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

问题的关键在于纹理根据存储在Geometry对象中的UV坐标映射到Mesh对象。 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/进行以下链接。

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

1 个答案: