three.js 初学者坚持第一步：“未定义不是函数”答案

【问题标题】：three.js beginner stuck on first step: "undefined is not a function"three.js 初学者坚持第一步：“未定义不是函数”
【发布时间】：2018-09-07 02:51:44
【问题描述】：

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

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

<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 中始终显示相同的诊断消息。

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

【问题讨论】：

标签： javascript three.js

【解决方案1】：

在创建 THREE.PerspectiveCamera 的实例时，您错过了“新”这个小词：

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

看到你的盒子在你面前闪闪发光..

【讨论】：