Three.js: How to create a custom mesh?

Created on 12 Feb 2012  路  3Comments  路  Source: mrdoob/three.js

This didn't work:

var geom = new THREE.Geometry(); 
var v1 = new THREE.Vector3(0,0,10);
var v2 = new THREE.Vector3(0,500,10);
var v3 = new THREE.Vector3(500,500,10);

geom.vertices.push(new THREE.Vertex(v1));
geom.vertices.push(new THREE.Vertex(v2));
geom.vertices.push(new THREE.Vertex(v3));
geom.faces.push( new THREE.Face3( 0, 1, 2 ) );

var object = new THREE.Mesh( geom, new THREE.MeshNormalMaterial() );
scene.addObject(object);
Question

Most helpful comment

var geom = new THREE.Geometry(); 
var v1 = new THREE.Vector3(0,0,10);
var v2 = new THREE.Vector3(0,500,10);
var v3 = new THREE.Vector3(500,500,10);

geom.vertices.push(new THREE.Vertex(v1));
geom.vertices.push(new THREE.Vertex(v2));
geom.vertices.push(new THREE.Vertex(v3));
geom.faces.push( new THREE.Face3( 0, 1, 2 ) );
geom.computeFaceNormals(); // your geometry needs normals if you want to use MeshNormalMaterial

var object = new THREE.Mesh( geom, new THREE.MeshNormalMaterial() );
scene.add(object); // scene.addObject is supposed to be used internally only, sorry about that.

All 3 comments

var geom = new THREE.Geometry(); 
var v1 = new THREE.Vector3(0,0,10);
var v2 = new THREE.Vector3(0,500,10);
var v3 = new THREE.Vector3(500,500,10);

geom.vertices.push(new THREE.Vertex(v1));
geom.vertices.push(new THREE.Vertex(v2));
geom.vertices.push(new THREE.Vertex(v3));
geom.faces.push( new THREE.Face3( 0, 1, 2 ) );
geom.computeFaceNormals(); // your geometry needs normals if you want to use MeshNormalMaterial

var object = new THREE.Mesh( geom, new THREE.MeshNormalMaterial() );
scene.add(object); // scene.addObject is supposed to be used internally only, sorry about that.

What a fast answer. Thank you very much! Are you still working on the project? Do you need something?

Yup!

https://github.com/mrdoob/three.js/commits/dev

Not sure what's needed to be honest... I think we just need time :D

Was this page helpful?
0 / 5 - 0 ratings

Related issues

akshaysrin picture akshaysrin  路  3Comments

boyravikumar picture boyravikumar  路  3Comments

filharvey picture filharvey  路  3Comments

scrubs picture scrubs  路  3Comments

clawconduce picture clawconduce  路  3Comments