1

我使用立方体纹理的图像，图像在 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 像素。任何建议表示赞赏，thanx提前。

4

1 回答 1

5

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

问题的症结在于纹理会根据几何对象中存储的 UV 坐标映射到网格对象。对象的THREE.CubeGeometryUV 坐标存储在数组中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/。

于 2012-10-20T23:53:21.297 回答