使用three.js进行纹理映射

Question

我正在尝试使用three.js在四边形上映射纹理，但是纹理坐标似乎有些问题，因为我看到的只是图像的左上像素（UV = {0，0}，我猜到了）...

这是我定义几何的方法：

var geom = new THREE.Geometry();
geom.vertices.push(new THREE.Vertex(new THREE.Vector3(-100,  50, 0)));
geom.vertices.push(new THREE.Vertex(new THREE.Vector3(-100,  -50, 0)));
geom.vertices.push(new THREE.Vertex(new THREE.Vector3(0,  -50, 0)));
geom.vertices.push(new THREE.Vertex(new THREE.Vector3(0,  50, 0)));
geom.faces.push(new THREE.Face3(0, 1, 2));
geom.faces.push(new THREE.Face3(0, 2, 3));
geom.faceVertexUvs[0].push([new THREE.Vector2(0, 0),
                            new THREE.Vector2(10, 0),
                            new THREE.Vector2(10, 10)]);
geom.faceVertexUvs[0].push([new THREE.Vector2(0, 0),
                            new THREE.Vector2(10, 10),
                            new THREE.Vector2(0, 10)]);
//I also tried:
//geom.faceVertexUvs[0].push([new THREE.Vector2(0, 0),
//                            new THREE.Vector2(10, 0),
//                            new THREE.Vector2(10, 10),
//                            new THREE.Vector2(0, 0),
//                            new THREE.Vector2(10, 10),
//                            new THREE.Vector2(0, 10)]);
geom.computeCentroids();
geom.computeFaceNormals();

有人可以发现我在做什么错吗？

谢谢

Answer 1

在发布问题2分钟后找到解决方案...我需要使用新的THREE.UV而不是THREE.Vector2。 我真的希望这个项目的文档会更厚一点……每件事现在都需要数小时的反复试验（至少对我而言）！