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。我真的希望这个项目的文档会变得更厚一些...现在每个小东西需要几个小时的试验和错误（至少对我而言）！

纹理映射与three.js

1 个答案: