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);
}
答
你的代码是很好的,除了你定义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;
...
+0
这就是问题所在!伟大的工作和许多谢谢你! – Charkins12 2014-12-03 14:22:35
答
很可能,你没有正确包含three.js脚本。检查Firebug并观察THREE变量 - 在开始使用THREE.JS之前,必须定义它。检查网络错误是否正确加载。
接下来,确保在加载页面的其余部分后运行您的代码。
window.addEventListener('load', init);
这将调用init函数加载页面时
后,才接着,在全局范围内定义的变量,而不是内部的初始化函数。另外,不要忘记在你的动画函数中调用渲染函数。
你是否包含了三个js脚本来确保THREE被定义? '' – 2014-12-01 22:35:00
我有;它在我的html的
;就在我在这里展示的东西之上。 – Charkins12 2014-12-01 22:36:59嗯,我想它*应该*工作然后...仔细检查你没有网络错误下载三个js源文件。 – 2014-12-01 22:56:47