如何在three.js 中创建具有法线和UV 的动态网格？答案

【问题标题】：how does one create a dynamic mesh WITH normal and UV in three.js?如何在three.js 中创建具有法线和UV 的动态网格？
【发布时间】：2012-05-28 05:01:50
【问题描述】：

我知道如何在 three.js 中动态创建网格，但不清楚如何在网格中添加自定义 UV 和法线。这是如何创建自定义网格，我们如何以编程方式将 UV 和法线添加到此网格？

谢谢！

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】：

正常进入face。 UV 进入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);

UV 进入几何体的原因是因为这样我们可以拥有不同的通道（同一几何体的不同 UV 集）。

【讨论】：