Three.js - 未捕获的 TypeError: undefined 不是一个函数

Question

在使用Three.js时，我遇到了Uncaught TypeError: undefined is not a function的错误。 这个错误显示在我创建THREE.PerspectiveCamera的那一行。 脚本是：

window.requestAnimFrame = (function(callback){
        return window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        function(callback){
            window.setTimeout(callback, 1000 / 60);
        };
    })();

    function animate(lastTime, angularSpeed, three){
        // update
        var date = new Date();
        var time = date.getTime();
        lastTime = time;

        // render
        three.renderer.render(three.scene, three.camera);

        // request new frame
        requestAnimFrame(function(){
            animate(lastTime, angularSpeed, three);
        });
    }

    $(window).bind('load',function(){
        var angularSpeed = 0.2; // revolutions per second
        var lastTime = 0;
        $container = $("#container");
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        $container.append(renderer.domElement);

        // camera - Uncaught Type Error on the below line
        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
        camera.position.y = -450;
        camera.position.z = 400;
        camera.rotation.x = 45 * (Math.PI / 180);

        // scene
        var scene = new THREE.Scene();

        var material = new THREE.LineBasicMaterial({
                            color: 0x0000ff,
                        });
        var geometry = new THREE.Geometry();
        for(var i=0;i<100;i++){
            geometry.vertices.push(new THREE.Vector3(i-100,i-100,i-100));
            geometry.vertices.push(new THREE.Vector3(i+100,i+100,i+100));
            var line = new Three.Line(geometry,material);
            scene.add(line);
            geometry=new THREE.Geometry();
        }


        // create wrapper object that contains three.js objects
        var three = {
            renderer: renderer,
            camera: camera,
            scene: scene,
        };

        animate(lastTime, angularSpeed, three);
    });

这是因为我声明摄像机的方式有误吗？ 我查了three.js文档，给出的示例基本相同。 所以我不知道该怎么办。

更新： 在遇到上一个错误时，我使用了Three.js的本地副本。然后我将其替换为链接http://www.html5canvastutorials.com/libraries/Three.js。 现在，PerspectiveCamera错误已经消失，但在Three.js脚本内部产生了一个新错误。该错误是Three.js脚本第337行的Uncaught TypeError: Cannot read property 'x' of undefined。

谢谢。

- rahules

---

请查看关于WebGL支持的条件语句，网址为http://www.johannes-raida.de/tutorials/three.js/tutorial07/tutorial07.htm。你从哪里导入three.js库？ - Four_lo

我认为你不能仅仅在x轴上旋转相机，需要同时改变相机的lookAt属性并偏移相机的x位置。 - Four_lo

仍然出现“无法读取未定义的属性'x'”吗？如果是这样，请尝试放入一个x位置值。three.js 读取坐标 X、Y，然后是 Z。在继续之前，它可能需要一个 x 值。 - Four_lo

@Four_lo 我尝试使用mrdoob.github.com上的另一个three.js副本，现在线条正在渲染。我需要检查它是否正确渲染，但错误已经消失了。 - rahules

你可以在包装对象中去掉“scene”后面的逗号，但如果这是所有问题的原因，那就太糟糕了，所以它不可能是原因。 - Four_lo

Answer 1

本地复制的问题在于你使用了未构建的Three.js文件（即src/Three.js）。你需要的是build/three.js或者build/three.min.js文件。我将它复制到了我的项目中，并且改变了脚本标签的src属性的引用，这样一切就开始正常工作了。

简而言之：

mrdoob-three.js-2524525(or some other number here)
 |
 +----build
 |     |
 |     +--three.js     <-- YES, CORRECT FILE
 |     +--three.min.js <-- YES
 |     ...
 |
 +----src
 ...   |
       +--Three.js     <-- NO, PREBUILT FILE THAT ONLY CONTAINS CONSTANTS
       ...

- Nashenas