javascript - 立方体纹理在其中一个立方体面中反转

Question

我为立方体纹理使用图像，该图像在 4 个面中的 3 个中正确显示，而第 4 个面看起来是相反的。我的相关代码如下:

//dom
        var container2=document.getElementById('share');
        //renderer
        var renderer2 = new THREE.CanvasRenderer();
        renderer2.setSize(100,100);
        container2.appendChild(renderer2.domElement);
        //Scene
        var scene2 = new THREE.Scene();
        //Camera
        var camera2 = new THREE.PerspectiveCamera(50,200/200,1,1000);
        camera2.up=camera.up;
        //
        camera2.position.z = 90;
        //
        scene2.add(camera2);
        //Axes
        var axes2= new THREE.AxisHelper();

        //Add texture for the cube
        //Use image as texture
        var img2 = new THREE.MeshBasicMaterial({ //CHANGED to MeshBasicMaterial
        map:THREE.ImageUtils.loadTexture('img/fb.jpg') 
        });
        img2.map.needsUpdate = true; 
        //
        var cube = new THREE.Mesh(new THREE.CubeGeometry(40,40,40),img2);
        scene2.add(cube);

图像大小为 600*600 像素。感谢任何建议，提前谢谢。

Answer 1

首先，应该向其他人指出您正在尝试使用 javascript 库“three.js”进行开发。文档可在此处找到:http://mrdoob.github.com/three.js/docs

问题的症结在于纹理根据存储在几何对象中的 UV 坐标映射到网格对象。 THREE.CubeGeometry 对象将其 UV 坐标存储在数组 faceVertexUvs 中。

它包含以下 6 个面的 4 个顶点的 UV 坐标数组:

{{0,1}, {0,0}, {1,0}, {1,1}},  // Right Face (Top of texture Points "Up")
{{0,1}, {0,0}, {1,0}, {1,1}},  // Left Face (Top of texture Points "Up")
{{0,1}, {0,0}, {1,0}, {1,1}},  // Top Face (Top of texture Points "Backward")
{{0,1}, {0,0}, {1,0}, {1,1}},  // Bottom Face (Top of texture Points "Forward")
{{0,1}, {0,0}, {1,0}, {1,1}},  // Front Face (Top of texture Points "Up")
{{0,1}, {0,0}, {1,0}, {1,1}}   // Back Face (Top of texture Points "Up") **Culprit**

它将 UV 坐标映射到构成立方体的每个面，它们是:

{0, 2, 3, 1},  // Right Face (Counter-Clockwise Order Starting RTF)
{4, 6, 7, 5},  // Left Face (Counter-Clockwise Order Starting LTB)
{4, 5, 0, 1},  // Top Face (Counter-Clockwise Order Starting LTB)
{7, 6, 3, 2},  // Bottom Face (Counter-Clockwise Order Starting LBF)
{5, 7, 2, 0},  // Front Face (Counter-Clockwise Order Starting LTF)
{1, 3, 6, 4}   // Back Face (Counter-Clockwise Order Starting RTB)

上面的数字是顶点数组的索引，THREE.CubeGeometry 存储在 vertices 中，共有 8 个:

{20, 20, 20},     // Right-Top-Front Vertex
{20, 20, -20},    // Right-Top-Back Vertex
{20, -20, 20},    // Right-Bottom-Front Vertex
{20, -20, -20},   // Right-Bottom-Back Vertex
{-20, 20, -20},   // Left-Top-Back Vertex
{-20, 20, 20},    // Left-Top-Front Vertex
{-20, -20, -20},  // Left-Bottom-Back Vertex
{-20, -20, 20}    // Left-Bottom-Front Vertex

注意:以上所有相对方向均假设相机沿正 z 轴放置，朝向以原点为中心的立方体。

所以真正的罪魁祸首是纹理顶点向上的背面。在这种情况下，您希望纹理的顶部在背面指向下方，因此当立方体由于旋转而倒置并按照您的方式查看时，图像会如您所愿地出现。它需要更改如下:

{{1,0}, {1,1}, {0,1}, {0,0}}   // FIXED: Back Face (Top of texture Points "Down")

可以在代码中进行此更改以更改坐标以获得您想要的显示:

var cubeGeometry = new THREE.CubeGeometry(40, 40, 40);
cubeGeometry.faceVertexUvs[0][5] = [new THREE.UV(1, 0), new THREE.UV(1, 1), new THREE.UV(0, 1), new THREE.UV(0, 0)];
var cube = new THREE.Mesh(cubeGeometry, img2);

为了进一步阅读，我推荐以下有关使用 UV 坐标进行纹理映射的链接 http://www.rozengain.com/blog/2007/08/26/uv-coordinate-basics/ .