2016-12-05 12 views
0

UVテクスチャをthree.jsで正しくレンダリングするための助けが必要です。 Blenderでタイルテクスチャを繰り返すモデルを作成しました。タイルテクスチャはUVマッピングを使用して適用され、正しくレンダリングされている場合は次のようになります。 Render image using Blender 。ただし、JSONLoaderをthree.jsでロードすると、タイルは各ポリゴンを塗りつぶすだけで、結果はScreenshot of render using three.js です。私は私のコードでTHREE.RepeatWrappingを設定しようとしましたが、何も変わっていない:THREE.js JSONLoaderを使用してUVテクスチャを繰り返す

bodyLoader = new THREE.JSONLoader(); 
bodyLoader.load('./starofthesea_threejs.json', function(geometry, materials) { 
    mainBodyMaterials = new THREE.MeshFaceMaterial(materials); 
    console.log(materials); 
    mainBodyMaterials.wrapS = THREE.RepeatWrapping; 
    mainBodyMaterials.wrapT = THREE.RepeatWrapping; 
    mainBodyMaterials.needsUpdate = true; 
    mainBody = new THREE.Mesh(geometry, mainBodyMaterials); 
    mainBody.traverse (function (child) { 
    if (child instanceof THREE.Mesh) { 
     child.castShadow = true; 
     child.receiveShadow = true; 
    } 
    }); 
    mainBody.scale.x = mainBody.scale.y = mainBody.scale.z = 1; 
    geometry.computeBoundingBox(); 
    geometry.computeFaceNormals(); 
    geometry.computeFlatVertexNormals(); 
    scene.add(mainBody); 

}); 

は、それが正しくレンダリング得るために私のコードで何か問題、または回避策はありますか?すべての援助は深く感謝しています。

+0

ちょっと考えて、mainBodyMaterials.repeat.set(10、10)を設定する必要がありますか?テクスチャは2幅の高さにする必要がありますか? – Sentinel

+0

マテリアルのリピートを設定するだけで「未定義」エラーがスローされ、テクスチャのすべてのディメンションはすでに2の累乗に設定されています – kychung

答えて

0

最後に、BlenderモデルとJSの両方が正しく設定されていない自分で問題を理解しました。 RepeatWrappingはテクスチャに適用されますが、素材には適用されません。私はTHREE.MeshFaceMaterialの構造を研究して、基礎となるテクスチャのハンドルを見つける必要があります。テクスチャは、更新のためにマークされますが、イメージがある」

mainBodyMaterials = new THREE.MeshFaceMaterial(materials); 
for(prop in mainBodyMaterials.materials) { 
    if(mainBodyMaterials.materials[prop].map != null) { 
    mainBodyMaterials.materials[prop].map.wrapS = THREE.RepeatWrapping; 
    mainBodyMaterials.materials[prop].map.wrapT = THREE.RepeatWrapping; 
    tex.push(mainBodyMaterials.materials[prop].map.clone()); 
    tex[tex_sequence].needsUpdate = true; 
    tex_sequence++; 
    } 
} 

、タイル材料の一つが正しくレンダリングされます正しくテクスチャにラップし、wrapTを適用した後、しかし:私は、画像のテクスチャにすべての材料を見つけるために材料を横断する必要があります未定義のエラーは捨ててしまいます。 Three.js r72 - Texture marked for update but image is undefined? タイルを繰り返すいくつかの素材があるので、私はJSルーチンの始めにグローバル配列を作成し、修正されたテクスチャを1つプッシュする必要があります

var tex = new Array(); 
var tex_sequence = 0; 

JS呼び出しを修正した後も、テクスチャの1つがまだ機能していません。私は忘れたのはONE three.jsのためのUVスロットだけです。私は、Blenderの同じUVスロットの下で再びUVをアンラップする必要があります。すべてが魅力のように機能し、私は私の苦しい経験が同様の問題によって怒っている人を助けることを願っています。

関連する問題