2

私は Three.js を使用して、キャンバス要素から生成された、各面に異なる色とテキストを持つ多面体を生成しています。今のところ、Three.js にネイティブ クラスが含まれている多面体に固執していますが、いずれはもっと不規則な形状に分岐したいと考えています。

立方体でこれを行う方法を説明するオンラインで利用可能な多くの例があります ( Three.js cube with different texture on each faceのような StackOverflow の投稿を含む)。立方体以外に適用された同じ手法を示すサンプルを見つけることに成功していませんが、ほとんどの場合、CubeGeometry で機能する同じプロセスが TetrahedronGeometry などでも機能します。

多面体を生成するために使用しているコードの簡略版を次に示します。

switch (shape) {
    case "ICOSAHEDRON" :

        // Step 1: Create the appropriate geometry.
        geometry = new THREE.IcosahedronGeometry(PolyHeatMap.GEOMETRY_CIRCUMRADIUS);

        // Step 2: Create one material for each face, and combine them into one big
        // MeshFaceMaterial.
        material = new THREE.MeshFaceMaterial(createMaterials(20, textArray));

        // Step 3: Pair each face with one of the materials.
        for (x = 0; face = geometry.faces[x]; x++)
        {
            face.materialIndex = x;
        }
        break;

     // And so on, for other shapes.
}

function createTexture (title, color) {
    var canvas = document.createElement("canvas");

    // Magical canvas generation happens here.

    var texture = new THREE.Texture(canvas);
    texture.needsUpdate = true;

    return new THREE.MeshLambertMaterial({ map : texture });
}

function createMaterials (numFacets, textArray)
{
    var materialsArray = [],
        material;

    for (var x = 0, xl = numFacets; x < xl; x++)
    {
        material = createTexture(textArray[x], generateColor(textArray[x]));
        material.side = THREE.DoubleSide;
        materials.push(oMaterial); 
    }

    return materials;
}

立方体はこの手法を使用して完全にレンダリングされますが、他の多面体では、テクスチャが期待どおりに動作しません。

二十面体の例

ここで何が起こっているのかを正確に説明するのは難しいです。基本的に、各面は正しいテクスチャを表示していますが、テクスチャ自体は、多面体全体を覆うように引き伸ばされ、シフトされています。言い換えると、形状を真正面から見ると、左上の面はそのテクスチャの左上部分のみを表示し、右上の面は右上部分のみを表示するなどです。

多面体の反対側の面には、テクスチャの詳細がまったく表示されません。色のみ。

私は Three.js を試す前に 3D レンダリングの経験がなかったので、CubeGeometry によって自動的に処理され、姉妹クラスでは処理されないいくつかのステップが欠けていると思います。投稿された他の例を参照しますが、ほとんどの例は立方体のレンダリングであり、そうでない例は通常単色を使用しています。

立方体以外の形状のテクスチャを適切に拡大縮小して中央に配置するには、どうすればよいですか?

4

1 に答える 1

2

新しい UV を設定する必要があります。

それを行う方法の簡単な例を作成しましたが、それが最善の方法であるかどうかはわかりません。

jsFiddle の例

アップデート

  geometry.faceVertexUvs[0] = [];

   for(var i = 0; i < geometry.faces.length; i++){                              

        // set new coordinates, all faces will have same mapping.            
        geometry.faceVertexUvs[0].push([
        new THREE.Vector2( 0,0 ),
        new THREE.Vector2( 0,1 ),
        new THREE.Vector2( 1,1),

        ]);
    }
于 2013-10-04T19:46:40.147 に答える