Three.JS OBJモデルが表示されない

私はc4dで作成した（found）よりも.objモデルを持っていて、スケール1でメートル単位でエクスポートしました。 OBJLoaderを使ってThree.jsにロードしようとするよりも、エラーは表示されませんが、モデルは表示されません。このThree.JS OBJモデルが表示されない

<script src="http://threejs.org/build/three.js"></script> 
<script src="http://threejs.org/examples/js/loaders/OBJLoader.js"></script> 
<body style="margin:0;padding:0;"> 
</body> 
<script> 
    var scene = new THREE.Scene(); 
    var camera = new THREE.PerspectiveCamera(45, innerWidth/innerHeight, 1, 2000); 
    var render = new THREE.WebGLRenderer(); 
    camera.position.set(0, 0, 53); 

    render.setSize(innerWidth, innerHeight); 
    document.body.appendChild(canvas = render.domElement); 

    render.setClearColor(0x111111, 1); 

    function loadScene() { 
     var loader = new THREE.OBJLoader(); 
     loader.load("./fox.obj", function(model) { 
      model.traverse(function(child) { 
       if (child instanceof THREE.Mesh) { 
        child.material.color = 0xffb830; 
       } 
      }); 
      model.position.set(0, 0, -53); 
      scene.add(model); 
      window.model = model; 
     }); 
     render.render(scene, camera); 
    } 

    window.onload = loadScene; 
</script>

出典

2016-05-16 WildeMe

答え：javacriptを頭や体の中に入れてください。 –

よりも重要なことはありません – WildeMe

ロードされたモデルの位置とサイズが正しいかどうかを確認するには、boundingboxヘルパーhttp://threejs.org/docs/#Reference/Extras.Helpers/BoundingBoxHelperを使用してみます。 –

持っているかどうかを確認するためにmodel.children[N].geometry.verticesを見：を（UPDATEで以下のシンプルな補正、）

1 - この行を削除：

render.render(scene, camera);

2 - 初期化後にこのコードを追加：

function animate() { 
     requestAnimationFrame(animate); 
     render.render(scene, camera); 
    } 
    animate();

3 - また、three.jsライブラリ用の別のソースを使用します。私は現在、別のプロジェクトで使用しているローカルコピーを含めていました。ダウンロードしたファイルから直接ファイルをダウンロードしてください：https://github.com/mrdoob/three.js/archive/master.zip

OrbitControlsをシーンに追加して、シーンは、オブジェクトがあなたが予想していたよりも大きく、そのために（明らかに）表示されない可能性があるためです。あなたはthree.jsソースで利用可能なOrbitControls.js含めることによって軌道コントロールを追加し、あなたのコードに次の行を追加することができ：

var controls = new THREE.OrbitControls(camera, render.domElement);

UPDATE：

だけで呼び出しますManoDestraのように、loadメソッドの機能の中にレンダリングしてください：

loader.load("./fox.obj", function(model) { 
    model.traverse(function(child) { 
     if (child instanceof THREE.Mesh) { 
      child.material.color = 0xffb830; 
     } 
    }); 
    model.position.set(0, 0, -53); 
    scene.add(model); 
    window.model = model; 
    render.render(scene, camera); 
});

出典

2016-05-17 00:43:55

おかしい、私は完全にレンダリングループの設定がないという事実を逃した。ロードされたモデルの位置を決める行の後で読み込みを停止しました。 – pailhead

私はmano destraの答えが正しいと思います。軌道コントローラとレンダーループを介してインタラクティブ機能を追加することで、元のコードを拡張しています。これを1回だけレンダリングする必要がある場合は、オブジェクトをロードした後に実行する必要があります。 – pailhead

軌道コントローラは、デバッグのためだけに（期待されたものより大きいか、別の位置にある可能性のあるオブジェクトを見つけようとしている）ユーザーに示唆に過ぎませんでした。レンダーループの必要性については、オブジェクトをロードした後にレンダラー関数を1回だけ呼び出すだけでも十分だと思いましたが、コードをテストしても機能しませんでした。レンダーループを追加することで、完全に機能しました。 –

問題での問題は何だが、オブジェクトがロードされる前に、あなたのシーンをレンダリングしていることです。

モデルがロードされた後でレンダリングされるような方法でrender.render（scene、camera）呼び出しを配置します。例えば。

function loadScene() { 
    var loader = new THREE.OBJLoader(); 
    loader.load("./fox.obj", function(model) { 
     model.traverse(function(child) { 
      if (child instanceof THREE.Mesh) { 
       child.material.color = 0xffb830; 
      } 
     }); 
     model.position.set(0, 0, -53); 
     scene.add(model); 
     window.model = model; 
     render.render(scene, camera); 
    }); 
}

（それはあなたの好みだ場合、またはあなたのHTMLの尾）私はまた、あなたのソースの全てがヘッド部に存在することを確実にするでしょう。次に、ウィンドウのロードイベントで初期化コードを呼び出します。また、前述のように、すべてのアセットがロードされた後で初めてシーンをレンダリングします。

またああ、また、child.material.colorは例えばオブジェクトです...例えば、あなたのシーンを見て

camera.lookAt(scene.position);

を呼び出しを必要とするかもしれませんchild.material.color = { r:1, g:1, b:1 }。

出典

2016-05-16 19:36:29 ManoDestra

これはなぜ問題ですか？ Three.jsは、シーングラフからノードを追加したり削除したりすることをサポートしています。レンダリングを開始してから何かを読み込んでシーンに追加したり、何らかのレンダリングロジックを実行したりすることができます（一定の更新やもっと複雑なもの）。これは、このことが描画されるかどうかにゼロ（0）の影響を与えます。確かに、カメラは物体を見ていないかもしれないが、いくつかの前提が可能である。 3つは右利きですから、これらの数字は意味があります。デフォルトのカメラは-z、z == 53、z == - 53に移動し、カメラとオブジェクトの間に106単位があります。 – pailhead

私はコメントをお詫びします、あなたの答えは実際には完全に正しいです。彼は何かをロードする前に一度だけシーンをレンダリングしています。私は言葉遣いだけを主張するだろう、それ自体は依然として問題ではない、問題は後で何も描画しないということである。このコードはレンダリングループがない可能性が最も高いです。私は単にオブジェクトを配置する行の後で読み込みを停止しました。 – pailhead

コードと、シーンを1回だけレンダリングする必要がある（レンダリングループなし）場合、ここで唯一有効な答えです。 – pailhead

は、（この材料は、仕事をするために、これのどれを必要としないはずです）など行方不明テクスチャ、ライトを行方不明、行方不明法線のようなものを排除するために、すべてのロードされたメッシュにをTHREE.MeshBasicMaterial({color:'red'})を適用します。
あなたは、私はそれがで働かせたが、有効な値

出典

2016-05-16 20:25:42 pailhead

Three.JS OBJモデルが表示されない

答えて

関連する問題