三.js相机旋转错误答案

【问题标题】：Three.js camera rotation error三.js相机旋转错误
【发布时间】：2015-01-30 01:20:24
【问题描述】：

Firebug 在我的 var 相机上抛出一个错误，说“三个未定义”，老实说，我不明白为什么。这个错误对我来说没有任何意义，因为在我看来；在等号的右边有一个定义的三权。

        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 );
        }

【问题讨论】：

您是否包含了三个 js 脚本以确保定义了三个？ <script src="js/three.min.js"></script>
我有；它在我的 html 的中；就在我在这里展示的之上。
嗯，我想它应该工作了...仔细检查您下载三个js源文件时没有网络错误。

标签： javascript camera three.js

【解决方案1】：

您的代码很好，只是您在 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;
...

【讨论】：

【解决方案2】：

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

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

window.addEventListener('load', init);

这只会在页面加载后调用init函数

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

【讨论】：