Three.js - Uncaught TypeError: undefined is not a function答案

【问题标题】：Three.js - Uncaught TypeError: undefined is not a functionThree.js - Uncaught TypeError: undefined is not a function
【发布时间】：2013-03-06 11:56:31
【问题描述】：

我在使用 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

谢谢。

【问题讨论】：

您好，您可以尝试将new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000); 直接输入到控制台并使用输出更新您的帖子吗？
@LimH。它给出了同样的错误，“UncaughtTypeError: undefined is not a function”。是不是因为浏览器不支持透视相机？
我一直在尝试 Chromium 中的脚本，方法是启用“覆盖软件渲染”选项。我在 Firefox 中试了一下，它显示——“TypeError: THREE.PerspectiveCamera is not a constructor”。
johannes-raida.de/tutorials/three.js/tutorial07/tutorial07.htm 查看有关您是否支持 WebGl 的条件语句。你从哪里导入 three.js 库？
@Four_lo 我使用的是从一个示例到现在的本地副本。我尝试了另一个链接html5canvastutorials.com/libraries/Three.js，这似乎解决了相机的问题，但在 Three.js 文件中产生了相同的错误，“Uncaught TypeError: Cannot read property 'x' of undefined”

标签： javascript three.js webgl

【解决方案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
       ...

【讨论】：