嘗試使用Three.js + ColladaLoader.js實現WebGL查看器

Question

我想實現使用three.js + colladaloader.js的WebGl查看器，但在嘗試導入並查看我自己的collada對象時遇到了一些問題。我可以將我自己的模型，它（而無需修改代碼），當正確加載的例子，但我得到一個

無法轉換變換型LOOKAT的 WebGLRenderingContext：GL錯誤：GL_INVALID_OPERATION： glDrawElements：嘗試訪問超出範圍的頂點的屬性0

任何想法如何得到我自己的模型工作

我要補充一點，我ColladaLoader.js是一個補丁版本在這裏舉辦https://raw.github.com/jihoonl/three.js/6e5a02427f2b9626a3fccc9c09d8654cc02d2109/examples/js/loaders/ColladaLoader.js

這裏是模型我試圖加載：http://sketchup.google.com/3dwarehouse/details?mid=bad38a0b2a3d753c8857d6b1c783b210&ct=mdsa&prevstart=0

這裏是我的代碼：

<script> 

    if (! Detector.webgl) Detector.addGetWebGLMessage(); 

    var container, stats; 

    var camera, scene, renderer, objects; 
    var particleLight, pointLight; 
    var dae, skin; 

    var loader = new THREE.ColladaLoader(); 
    loader.options.convertUpAxis = true; 
    loader.load('/site_media/models/model.dae', function (collada) { 

     dae = collada.scene; 
     skin = collada.skins[ 0 ]; 

     dae.scale.x = dae.scale.y = dae.scale.z = 0.002; 
     dae.updateMatrix(); 

     init(); 
     animate(); 

    }); 

    function init() { 

     container = document.createElement('div'); 
     document.body.appendChild(container); 

     camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 2000); 
     camera.position.set(2, 2, 3); 

     scene = new THREE.Scene(); 

     // Grid 

     var size = 14, step = 1; 

     var geometry = new THREE.Geometry(); 
     var material = new THREE.LineBasicMaterial({ color: 0x303030 }); 

     for (var i = - size; i <= size; i += step) { 

      geometry.vertices.push(new THREE.Vector3(- size, - 0.04, i)); 
      geometry.vertices.push(new THREE.Vector3( size, - 0.04, i)); 

      geometry.vertices.push(new THREE.Vector3(i, - 0.04, - size)); 
      geometry.vertices.push(new THREE.Vector3(i, - 0.04, size)); 

     } 

     var line = new THREE.Line(geometry, material, THREE.LinePieces); 
     scene.add(line); 

     // Add the COLLADA 

     scene.add(dae); 

     particleLight = new THREE.Mesh(new THREE.SphereGeometry(4, 8, 8), new THREE.MeshBasicMaterial({ color: 0xffffff })); 
     scene.add(particleLight); 

     // Lights 

     scene.add(new THREE.AmbientLight(0xcccccc)); 

     var directionalLight = new THREE.DirectionalLight(/*Math.random() * 0xffffff*/0xeeeeee); 
     directionalLight.position.x = Math.random() - 0.5; 
     directionalLight.position.y = Math.random() - 0.5; 
     directionalLight.position.z = Math.random() - 0.5; 
     directionalLight.position.normalize(); 
     scene.add(directionalLight); 

     pointLight = new THREE.PointLight(0xffffff, 4); 
     pointLight.position = particleLight.position; 
     scene.add(pointLight); 

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

     container.appendChild(renderer.domElement); 

     stats = new Stats(); 
     stats.domElement.style.position = 'absolute'; 
     stats.domElement.style.top = '0px'; 
     container.appendChild(stats.domElement); 

     // 

     window.addEventListener('resize', onWindowResize, false); 

    } 

    function onWindowResize() { 

     camera.aspect = window.innerWidth/window.innerHeight; 
     camera.updateProjectionMatrix(); 

     renderer.setSize(window.innerWidth, window.innerHeight); 

    } 

    // 

    var t = 0; 
    var clock = new THREE.Clock(); 

    function animate() { 

     var delta = clock.getDelta(); 

     requestAnimationFrame(animate); 

     if (t > 1) t = 0; 

     if (skin) { 

      // guess this can be done smarter... 

      // (Indeed, there are way more frames than needed and interpolation is not used at all 
      // could be something like - one morph per each skinning pose keyframe, or even less, 
      // animation could be resampled, morphing interpolation handles sparse keyframes quite well. 
      // Simple animation cycles like this look ok with 10-15 frames instead of 100 ;) 

      for (var i = 0; i < skin.morphTargetInfluences.length; i++) { 

       skin.morphTargetInfluences[ i ] = 0; 

      } 

      skin.morphTargetInfluences[ Math.floor(t * 30) ] = 1; 

      t += delta; 

     } 

     render(); 
     stats.update(); 

    } 

    function render() { 

     var timer = Date.now() * 0.0005; 

     camera.position.x = Math.cos(timer) * 10; 
     camera.position.y = 2; 
     camera.position.z = Math.sin(timer) * 10; 

     camera.lookAt(scene.position); 

     particleLight.position.x = Math.sin(timer * 4) * 3009; 
     particleLight.position.y = Math.cos(timer * 5) * 4000; 
     particleLight.position.z = Math.cos(timer * 4) * 3009; 

     renderer.render(scene, camera); 

    } 

</script> 

Answer 1

通過使我的質地BIGGER（並把它放在同一個文件夾我的模型和重命名固定它以相同的名稱作爲我的模型） 好像ColladaLoader.js不加載小紋理出於某種原因

另一件事有一個bug https://github.com/mrdoob/three.js/issues/3106但這是修復https://raw.github.com/jihoonl/three.js/6e5a02427f2b9626a3fccc9c09d8654cc02d2109/examples/js/loaders/ColladaLoader.js，並且它似乎不工作沒有此修復