Aフレームの.objモデルが表示されていますが、壊れています

ここでは初心者からフレームまでのチュートリアルのシーンがあり、今は初めて.objモデルを使用しています。Aフレームの.objモデルが表示されていますが、壊れています

リモートサーバーを使用すると、それが重要な情報であると感じるようになります。

モデルが表示されていないことについて私は見ましたが、私の壊れた部分が表示されていて、どこから修正するのかわかりません。

これは、それが窓の3Dビルダーにどのように見えるかです：

そして、これは、（コントラストのためのピンクの平面上に裏打ちされた）、それは私のプロジェクトでどのように見えるかです：

ここではHTMLです：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Pokemon Stadium</title> 
    <link href="css/main.css" rel="stylesheet"> 
    <script src="https://aframe.io/releases/0.4.0/aframe.min.js"></script> 
    <script src="js/main.js"></script> 
</head> 
<body> 


<!-- Scene --> 
<a-scene onLoad=""> 
    <!------------------------------------------------ Assets ---------------------------------------------------------> 
    <a-assets> 
     <a-asset-item id="stadium-obj" src="assets/models/stadium/Pokemon+Stadium.obj"></a-asset-item> 
     <a-asset-item id="stadium-mtl" src="assets/models/stadium/Pokemon+Stadium.mtl"></a-asset-item> 
     <a-asset-item id="ivy-obj" src="assets/models/ivysaur/Pokemon.obj"></a-asset-item> 
     <a-asset-item id="ivy-mtl" src="assets/models/ivysaur/Pokemon.mtl"></a-asset-item> 
    </a-assets> 


    <!------------------------------------------------- Scene ---------------------------------------------------------> 
    <!-- Skybox --> 
    <a-sky color="#279DF4"></a-sky> 


    <!-- Abyss --> 
    <a-plane scale="1000 1000" position="0 -10 0" color="#212121" rotation="-90 0 0" material="shader: flat"></a-plane> 


    <!-- Stadium --> 
    <a-entity obj-model="obj: #stadium-obj; mtl: #stadium-mtl" position="0 0 -30" scale="0.05 0.05 0.05" material="side: double"></a-entity> 

    <!-- Bulbasaur --> 
    <a-entity obj-model="obj: #ivy-obj; mtl: #ivy-mtl" position="15 10 0" scale="1 1 1" rotation="0 90 0"></a-entity> 


    <!-- Camera + cursor --> 
    <a-entity camera look-controls position="10 12 0" rotation="-23 -90 0"> 
     <a-cursor id="cursor" 
        animation__click="property: scale; startEvents: click; from: 0.1 0.1 0.1; to: 1 1 1; dur: 150" 
        animation__fusing="property: fusing; startEvents: fusing; from: 1 1 1; to: 0.1 0.1 0.1; dur: 1500" 
        event-set__1="_event: mouseenter; color: springgreen" 
        event-set__2="_event: mouseleave; color: black" 
        fuse="true" 
        raycaster="objects: .link"></a-cursor> 
    </a-entity> 
</a-scene> 
</body> 
</html>

出典

2017-05-10 JDorman

おそらく材料の側面のタイプをTHREE.DoubleSideに設定する必要があります。 ~~Aフレームでは、AEntityの次のDOM属性を使用してタイプを変更できるはずです：material="side: double"。~~

これが当てはまらない場合は、あなたのシーンエレメントのスニペットで投稿を更新する必要があります。

EDIT：画像に示すように

、私のモデルの部分が誤ってレンダリングされます。 THREEjsのmodelloaderは、モデル内のすべてのメッシュを読み取り、それらをグループ化されたオブジェクトにバインドします。これを修正するには、メッシュのマテリアルの側面をDoubleSideに設定する必要があります。幸運なことにA-Frameでは、obj-modelコンポーネントは、モデルが正常にロードされたときにイベントを発行し、DOMエレメントに放出イベントmodel-loadedのリスナーを追加し、customeventを返すコールバックを追加します。訪問者は、モデルグループへの参照を送信します。 AEntityを照会すると、ID modelElが追加されました。

<script> 
    (function(modelEl) { 
    if (!window['AFRAME'] && !modelEl) { 
     return; 
    } 

    modelEl.addEventListener('model-loaded', function(evt) { 
     var model = evt.detail.model; 

     traverse(model); 
    }); 
    })(document.getElementById('stadium')); 

    function traverse(node) { 
    node.children.forEach(function(child) { 
     if (child.children) { 
     traverse(child); 
     } 

     updateMaterial(child['material'], THREE.DoubleSide); 
    }); 
    } 

    function updateMaterialSide(material, side) { 
    if (!material) { 
     return; 
    } 

    if (material instanceof THREE.Material) { 
     material.side = side; 
     material.needsUpdate = true 
    } else if (material instanceof THREE.MultiMaterial) { 
     material.materials.forEach(function(childMaterial) { 
     updateMaterial(childMaterial, side); 
     }); 
    } 
    } 
</script>

上記のスクリプトを実行した後、私のモデルといくつかのテクスチャの読み込みが修正されました。

カスタムコンポーネントを作成し、同じ問題が発生する可能性のあるすべてのモデルをクエリする必要がないようにobj-modelコンポーネントを変更または拡張することを検討することがあります。これがうまくいかない場合は、波面objの書き出し設定に問題があると思います。

EDIT2：私のコメントについて

が、ここでは固定OBJファイルの結果は、フレーム内にある：

便宜上ここでMTLとOBJファイルを見つけることができます。

その答えシェーンため

obj file

mtl file

出典

2017-05-10 13:06:56

おかげで、私はhtmlを入れました – JDorman

@JDormanああ、申し訳ありませんが、私は電車でこの答えを急いでしまった。可能であれば、**子**メッシュ上にマテリアルのサイドのタイプを設定する必要があります。 THREEjsを初めてお使いの方は、最初は混乱するかもしれません。 modelloaderはすべてのメッシュをグループ要素にラップします。このグループは、モデルからすべてのメッシュを格納するために使用されます。私は上記の私の例を更新しました。 THREEjsはA-Frameによって使用されているwebglフレームワークです。 –

これはすばらしく、私は明日それを試してみるよ！本当にありがとう！ – JDorman

Aフレームの.objモデルが表示されていますが、壊れています

答えて

関連する問題