使用three.js JSONLoader

Question

只能看到導入到three.js場景的模型。 幾何圖形看起來不錯，但不管顯示哪種材質，模型都不顯示。

我是WebGL的新手，所以我很難診斷，但我的猜測是在JSONLoader回調期間出現了問題。

感謝您的幫助。

var camera, scene, renderer, mesh, loader; 

init(); 
animate(); 

function init() { 

    camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 1, 10000); 
    camera.position.z = 1000; 

    scene = new THREE.Scene(); 

    loader = new THREE.JSONLoader(); 

    loader.load("scripts/model.js", function(geometry) { 
     mesh = new THREE.Mesh(geometry, new THREE.MeshNormalMaterial()); 
     mesh.scale.set(10, 10, 10); 
     mesh.position.y = 150; 
     mesh.position.x = 0; 
    }); 

    scene.add(mesh); 

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

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

    renderer = new THREE.WebGLRenderer(); 
    renderer.setSize(window.innerWidth, window.innerHeight); 

    document.body.appendChild(renderer.domElement); 

} 

function animate() { 

    requestAnimationFrame(animate); 

    mesh.rotation.x += 0.05; 

    renderer.render(scene, camera); 
} 

Answer 1

在模型完成加載之前，您正在將網格添加到場景中。

移動線

scene.add(mesh); 

到加載器回調函數。

Answer 2

認爲這可能會幫助任何人誰的更準確的答案搜索：

loader.onLoadComplete=function(){scene.add(mesh)} 

也完全裝載機refrence，請參考這裏：

http://threejs.org/docs/index.html#Reference/Loaders/Loader

希望這會有所幫助。

Answer 3

animate()還應該在回調函數中去除控制檯錯誤。