Three.js CanvasRenderer Artifacts

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