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×600pxです。事前に感謝します。

4

1 に答える 1

5

まず、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/。

于 2012-10-20T23:53:21.297 に答える