使用three.js 进行纹理映射答案

【问题标题】：Texture mapping with three.js使用three.js 进行纹理映射
【发布时间】：2013-04-30 19:42:43
【问题描述】：

我正在尝试使用 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();

谁能发现我做错了什么？

谢谢

【问题讨论】：

标签： javascript three.js webgl

【解决方案1】：

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

【讨论】：

THREE.UV 已被弃用，您确实应该使用 THREE.Vector2。