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开发者工具会引用该文件中的一行。同样地，使用three.js构建文件夹中的未最小化版本（mr.doob），同样的错误发生在第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实例时，你错过了“new”这个小字.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;

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

three.js初学者坚持第一步：＆＃34; undefined不是一个功能＆＃34;

1 个答案: