web-dev-qa-db-ja.com

three.jsのOBJLoaderモデルへのマテリアルの割り当て

次のコードでOBJモデルをインポートしました。

var loader = new THREE.OBJLoader();
loader.addEventListener('load', function (geometry) {
    object = geometry.content;
    scene.add(object);
});
loader.load('ship.obj');

正常に動作しますが、マテリアルを追加しようとすると、効果がないか、モデルが消えます。私はこのようにそれを行うことができると思いました：

var ship = new THREE.Mesh(object, material);

しかし、それはうまくいきません。誰かがこれを行う方法を知っていますか、それとも可能かどうか？ OBJMTLLoaderも使用してみましたが、素材を変更することはできませんが、複雑さが増すだけです。

three.js
16
Hobo Joe

編集：この回答は現在古くなっています。代わりに、@ mightypileによる回答を参照してください。

materialを適切に定義したと仮定して、これを試してください。

loader.addEventListener( 'load', function ( event ) {

    var object = event.content;

    object.traverse( function ( child ) {

        if ( child instanceof THREE.Mesh ) {

            child.material = material;

        }

    } );

    scene.add( object );

});
22
WestLangley

@WestLangleyの回答を使用して、エラーが発生し続けました

loader.addEventListener is not a function

そして私のページはロードされませんでした。 discourse.threejs.org のAtul_Mouryaによると、ロード中にコールバック内に関数を実装する方が良い（またはより最新の？）アイデアです。私は彼のアドバイスを ドキュメント と@WestLangleyの 役立つ関数 と組み合わせて、この同じ質問に答えて次のことを考え出しました。

var ship_material = new THREE.MeshBasicMaterial( { color: 0x444444 } );
var loader = new THREE.OBJLoader();
loader.load( 'ship.obj',
    function( obj ){
        obj.traverse( function( child ) {
            if ( child instanceof THREE.Mesh ) {
                child.material = ship_material;
            }
        } );
        scene.add( obj );
    },
    function( xhr ){
        console.log( (xhr.loaded / xhr.total * 100) + "% loaded")
    },
    function( err ){
        console.error( "Error loading 'ship.obj'")
    }
);

この例では、進行状況とエラーのコールバックも実装されており、私にとってはうまくいきました。

4
mightypile