0

Threejs を使用して collada ファイルを読み込もうとしています。すべてうまくいきますが、オブジェクトを回転させると、レンダリングが正しくないことがわかります。画像を確認してください:

ここに画像の説明を入力

コードは次のとおりです (別の例から部分的に盗用されました)。

function init() {
    container = document.createElement( 'div' );
    document.body.appendChild( container );

    var info = document.createElement( 'div' );
    info.style.position = 'absolute';
    info.style.top = '10px';
    info.style.width = '100%';
    info.style.textAlign = 'center';
    info.innerHTML = 'Drag to spin the cube';
    container.appendChild( info );

    camera = new THREE.PerspectiveCamera( 20, window.innerWidth / window.innerHeight, .1, 10000 );
    camera.position.x=50;
    camera.position.y=50;
    camera.position.z=50;
    camera.lookAt(new THREE.Vector3(0,0,0));
    scene = new THREE.Scene();

    renderer = new THREE.CanvasRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    container.appendChild( renderer.domElement );

    var ambientLight = new THREE.AmbientLight(0x000000);
    scene.add(ambientLight);

    var directionalLight = new THREE.DirectionalLight(0xffffff);
    directionalLight.position.set(100,50,80).normalize();
    scene.add(directionalLight);

    var loader = new THREE.ColladaLoader();
    loader.options.convertUpAxis = true; // this rotates so it looks right
    loader.load('models/VM.dae', function (result) {
        cube = result.scene;
        // cube.doubleSided = true;
        // cube.flipSided = true;
        console.log(cube);
        cube.updateMatrix();
        scene.add(result.scene);
        animate();
    });
}

function animate() {
    requestAnimationFrame( animate );
    render();
}

function render() {
    cube.rotation.y += 0.01;
    // plane.rotation.y = cube.rotation.y += ( targetRotation - cube.rotation.y ) * 0.05;
    renderer.render( scene, camera );
}

新しいアップデート：

ローダーをMTL+OBJのものに変更しました。結果はまったく同じです。

var loader = new THREE.OBJMTLLoader();
    loader.addEventListener("load", function (event) {
        cube = event.content;
        cube.doubleSided = true;
        console.log(event);
        scene.add(cube);
        animate();
    }); 
    loader.load ("models/VM.obj", "models/VM.mtl");

フィドル: http://jsfiddle.net/qMqH7/

4

1 に答える 1

1

モデルがコンソールでエラーをスローしています。追跡することをお勧めします。

あなたが見ているのは、CanvasRenderer深度ソートに関連する既知の制限です。いくつかの細長い面を持つジオメトリによってさらに悪化します。モデルは で正しくレンダリングされWebGLRendererます。

また、object.doubleSided廃止されました。この場合、フラグが必要とは思われmaterial.side = THREE.DoubleSide.ません。

three.js r.58

于 2013-07-11T18:02:28.570 に答える