三.js相机旋转误差

Three.js camera rotation error

本文关键字：误差 旋转 相机 js      更新时间：2023-09-26

Firebug在我的var相机上抛出一个错误，说"THREE未定义"，老实说，我看不出为什么。这个错误对我来说没有任何意义，因为在我看来;在等号的右手边有一个定义的 THREE 权利。

        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;
...

最有可能的是，您没有正确包含三个.js脚本。检查Firebug并注意THREE变量 - 在开始使用THREE.JS之前必须定义它。检查网络错误是否正确加载。

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

window.addEventListener('load', init);

这将仅在页面加载后调用 init 函数

然后，在全局范围内而不是在 init 函数中定义变量。另外，不要忘记在动画函数中调用渲染函数。

相关文章：