2015-11-23 78 views
0

我是新的WebGL和Three.js。我試圖導入一個簡單的3D模型,我在Blender中創建並保存爲.dae。我使用Python http服務器在本地進行測試。背景顏色沒問題,但我無法在場景中顯示我的3D模型。在Chrome中我看到錯誤控制檯:ThreeJS不顯示DAE 3D模型

Uncaught TypeError: THREE.UV is not a function - ColladaLoader.js:2413 
Mesh.handlePrimitive @ ColladaLoader.js:2413 
Mesh.parse @ ColladaLoader.js:2317 
Geometry.parse @ ColladaLoader.js:2233 
parseLib @ ColladaLoader.js:235 
parse @ ColladaLoader.js:130 
req.onreadystatechange @ ColladaLoader.js:73 

<html> 
 
<head> 
 
    <title>3D object.js</title> 
 
</head> 
 
<body> 
 
<script src="js/three.min.js"></script> 
 
<script src="js/ColladaLoader.js"></script> 
 
<script> 
 

 
    var renderer = new THREE.WebGLRenderer(); 
 
    renderer.setSize(800, 600); 
 
    document.body.appendChild(renderer.domElement); 
 

 
    var scene = new THREE.Scene(); 
 

 
    var camera = new THREE.PerspectiveCamera(
 
      35,    // Field of view 
 
      800/600,  // Aspect ratio 
 
      0.1,   // Near plane 
 
      1000   // Far plane 
 
    ); 
 

 
    camera.position.set(-15, 1000, 10); 
 
    camera.lookAt(scene.position); 
 

 
    var loader = new THREE.ColladaLoader(); 
 
    loader.options.convertUpAxis = true; 
 
    loader.load('models/MyModel.dae', function(collada) { 
 
     var dae = collada.scene; 
 
     var skin = collada.skins[0]; 
 
     dae.position.set(0,0,0); 
 
     dae.scale.set(1,1,1); 
 
     scene.add(dae); 
 
    }); 
 

 
    var dirLight = new THREE.DirectionalLight(0xffffff, 1); 
 
    dirLight.position.set(100, 100, 50); 
 
    scene.add(dirLight); 
 

 
    Render(); 
 

 
    function Render() { 
 
     renderer.setClearColor(0xffe5e5, 1); 
 
     renderer.render(scene, camera); 
 
    } 
 
</script> 
 
</body> 
 

 
</html>

能有人給我任何想法,該怎麼辦?我已經花了數小時試圖找到解決方案而沒有成功。

編輯: 我下載了另一個ColladaLoader.js,現在我沒有錯誤了。但我仍然無法在現場看到3D模型。

+0

'Loader.load方法()在你的渲染功能

查找失蹤requestAnimationFrame(FUNC)'是異步的。這就是爲什麼你有一個回調函數。您正在模型加載之前進行渲染。 – WestLangley

+0

@WestLangley感謝您解釋它的工作原理。 – Moonbeam

回答