I know how to create a mesh dynamically in three.js, but its not clear how to add custom UV and normals in the mesh. here is how to create a custom mesh, how do we add UV and normals to this mesh programmatically?

thanks!

var imgTexture = THREE.ImageUtils.loadTexture(image);
var avatarGeom = new THREE.Geometry();

avatarGeom.vertices.push(new THREE.Vector3(0.895813,0.732893,0));
avatarGeom.vertices.push(new THREE.Vector3(-1.007173,0.732893,0));
avatarGeom.vertices.push(new THREE.Vector3(0.895813,-1.390674,0));
avatarGeom.vertices.push(new THREE.Vector3(-1.007173,-1.390674,0));

var face = new THREE.Face3(2,3,1);
avatarGeom.faces.push(face);

face = new THREE.Face3(0,2,1);
avatarGeom.faces.push(face);

var avatar = new THREE.Mesh(avatarGeom,new THREE.MeshLambertMaterial(imgTexture));
avatar.doubleSided = true;
scene.add(avatar);

I know how to create a mesh dynamically in three.js, but its not clear how to add custom UV and normals in the mesh. here is how to create a custom mesh, how do we add UV and normals to this mesh programmatically?

thanks!

var imgTexture = THREE.ImageUtils.loadTexture(image);
var avatarGeom = new THREE.Geometry();

avatarGeom.vertices.push(new THREE.Vector3(0.895813,0.732893,0));
avatarGeom.vertices.push(new THREE.Vector3(-1.007173,0.732893,0));
avatarGeom.vertices.push(new THREE.Vector3(0.895813,-1.390674,0));
avatarGeom.vertices.push(new THREE.Vector3(-1.007173,-1.390674,0));

var face = new THREE.Face3(2,3,1);
avatarGeom.faces.push(face);

face = new THREE.Face3(0,2,1);
avatarGeom.faces.push(face);

var avatar = new THREE.Mesh(avatarGeom,new THREE.MeshLambertMaterial(imgTexture));
avatar.doubleSided = true;
scene.add(avatar);

• javascript
• webgl
• three.js

1 Answer 1

The normal goes in the face. The UVs go in the geometry.

var imgTexture = THREE.ImageUtils.loadTexture(image);
var avatarGeom = new THREE.Geometry();

avatarGeom.vertices.push(new THREE.Vector3(0.895813,0.732893,0));
avatarGeom.vertices.push(new THREE.Vector3(-1.007173,0.732893,0));
avatarGeom.vertices.push(new THREE.Vector3(0.895813,-1.390674,0));
avatarGeom.vertices.push(new THREE.Vector3(-1.007173,-1.390674,0));

var face = new THREE.Face3(2,3,1);
face.normal.set(0,0,1); // normal
avatarGeom.faces.push(face);
avatarGeom.faceVertexUvs[0].push([new THREE.UV(1,1),new THREE.UV(0,1),new THREE.UV(1,0)]); // uvs

face = new THREE.Face3(0,2,1);
face.normal.set(0,0,1); // normal
avatarGeom.faces.push(face);
avatarGeom.faceVertexUvs[0].push([new THREE.UV(0,0),new THREE.UV(1,1),new THREE.UV(1,0)]); // uvs

var avatar = new THREE.Mesh(avatarGeom,new THREE.MeshLambertMaterial(imgTexture));
avatar.doubleSided = true;
scene.add(avatar);

The reason UVs go in the geometry is because this way we can have different channels (different sets of UVs for the same geometry).