Three.js CanvasRenderer文物

Question

我正在尝试使用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/

Answer 1

你的模型在控制台中抛出错误，我建议你追踪它们。

您所看到的是与深度排序相关的CanvasRenderer的已知限制。你的几何形状使它变得更糟，它具有几个细长的面。该模型使用WebGLRenderer正确呈现。

此外，object.doubleSided已被弃用。它已被material.side = THREE.DoubleSide.取代。在这种情况下，似乎不需要该标志。

three.js r.58