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.为在这种情况下似乎不需要标志。

三.js r.58

于 2013-07-11T18:02:28.570 回答