Three.js相机旋转错误

Firebug抛出一个错误，说我的var相机上的“THREE没有定义”，我真的不明白为什么。这个错误对我来说没有任何意义，因为我看到它;在等号的右边有一个定义好的三项权利。Three.js相机旋转错误

 init(); 
     animate(); 

     function init() 
     { 
      var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); 
      camera.position.z = 500; 

      var controls = new THREE.TrackballControls(camera); 
      controls.addEventListener('change', render); 

      var scene = new THREE.Scene(); 

      var geometry = new THREE.BoxGeometry(100, 100, 100); 
      var material = new THREE.MeshBasicMaterial(); 

      var mesh = new THREE.Mesh(geometry, material); 
      scene.add(mesh); 

      var renderer = new THREE.WebGLRenderer(); 
      renderer.setSize(window.innerWidth, window.innerHeight); 
      document.body.appendChild(renderer.domElement); 
     } 

     function animate() 
     { 
      requestAnimationFrame(animate); 
      controls.update(); 
     } 

     function render() 
     { 
      renderer.render(scene, camera); 
     }

来源

2014-12-01 Charkins12

你是否包含了三个js脚本来确保THREE被定义？ '' – 2014-12-01 22:35:00

我有;它在我的html的;就在我在这里展示的东西之上。 – Charkins12 2014-12-01 22:36:59

嗯，我想它*应该*工作然后...仔细检查你没有网络错误下载三个js源文件。 – 2014-12-01 22:56:47

你的代码是很好的，除了你定义init（）函数，这意味着这些变量是本地的init（）函数，并不会在外部无法认识里面的变量。

在函数之外声明你的变量，这应该有助于解决问题。举个例子：

var camera, controls, scene, geometry, material, mesh, renderer; 

init(); 
animate(); 

function init() { 
    camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); 
    camera.position.z = 500; 
...

来源

2014-12-02 02:47:37 Zob

这就是问题所在！伟大的工作和许多谢谢你！ – Charkins12 2014-12-03 14:22:35

很可能，你没有正确包含three.js脚本。检查Firebug并观察THREE变量 - 在开始使用THREE.JS之前，必须定义它。检查网络错误是否正确加载。

接下来，确保在加载页面的其余部分后运行您的代码。

window.addEventListener('load', init);

这将调用init函数加载页面时

后，才接着，在全局范围内定义的变量，而不是内部的初始化函数。另外，不要忘记在你的动画函数中调用渲染函数。

来源

2014-12-02 10:11:03 lot

Three.js相机旋转错误

回答

相关问题