three.js 初学者卡在了第一步："undefined is not a function"

Question

我的问题与这个问题相同：Three.js - Uncaught TypeError: undefined is not a function -- 没有适合我的解决方案。

我从 three.js (http://threejs.org/docs/index.html#Manual/Introduction/Creating_a_scene) 中的入门页面开始带有 three.js 库的应用程序位于 HTML 文件附带的文件夹中。代码的核心在这里：

<script src="js/three.js"></script>
<script>
  // Javascript will go here
  var scene = new THREE.Scene();
  var camera = THREE.PerspectiveCamera( 75, 
              window.innerWidth / window.innerHeight, 1, 10000 );
  var renderer = new THREE.WebGLRenderer();
  renderer.setSize( window.innerWidth, window.innerHeight);
  document.body.appendChild( renderer.domElement );

  var geometry = new THREE.BoxGeometry( 1, 1, 1 );
  var material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
  var cube = new THREE.Mesh( geometry, material );
  scene.add( cube );

  camera.position.z = 1000;

  function render() { 
    requestAnimationFrame( render ); 
    renderer.render( scene, camera ); 
  } 
  render();
</script>

可以使用最小化的库 (three.min.js)，在这种情况下，我会收到错误 Uncaught TypeError: undefined is not a function 并且 Chrome 开发人员工具会引用该文件中的一行。同样，使用 mr.doob 构建文件夹中的未最小化版本 (three.js)，也会发生相同的错误，但在第 10614 行。在 three.js 中，这是 this.updateProjectionMatrix() 上方的空白行以下代码：

THREE.PerspectiveCamera = function ( fov, aspect, near, far ) {

    THREE.Camera.call( this );

    this.type = 'PerspectiveCamera';


    this.zoom = 1;

    this.fov = fov !== undefined ? fov : 50;
    this.aspect = aspect !== undefined ? aspect : 1;
    this.near = near !== undefined ? near : 0.1;
    this.far = far !== undefined ? far : 2000;

    this.updateProjectionMatrix();

};

请注意上面四行中错误指出的地方使用了 undefined。

我正在使用 MAMP Web 服务器展示代码。我已经在我的 iMac 和我的 Windows 8 PC 上安装了它。该页面未能在 Chrome 和 Firefox 中显示，始终显示相同的诊断消息。

我觉得我犯了一些非常基本的错误。帮忙？

Answer 1

您在创建 THREE.PerspectiveCamera 的实例时错过了小词 "new":

<script src="js/three.js"></script>
<script>
  // Javascript will go here
  var scene = new THREE.Scene();
  var camera = new THREE.PerspectiveCamera( 75, 
              window.innerWidth / window.innerHeight, 1, 10000 );
  var renderer = new THREE.WebGLRenderer();
  renderer.setSize( window.innerWidth, window.innerHeight);
  document.body.appendChild( renderer.domElement );

  var geometry = new THREE.BoxGeometry( 1, 1, 1 );
  var material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
  var cube = new THREE.Mesh( geometry, material );
  scene.add( cube );

  camera.position.z = 1000;

  function render() { 
    requestAnimationFrame( render ); 
    renderer.render( scene, camera ); 
  } 
  render();
</script>

另请注意，您不会看到太多，因为您的相机距离那个小盒子太远了:)

成功

camera.position.z = 50;

看到你的盒子在你面前闪着绿色的光..

three.js 初学者卡在了第一步："undefined is not a function"

three.js beginner stuck on first step: "undefined is not a function"

javascript

three.js