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

Question

My problem is the same as this question: Three.js - Uncaught TypeError: undefined is not a function -- which did not have a solution that works for me.

I am starting on the Getting Started page in three.js (http://threejs.org/docs/index.html#Manual/Introduction/Creating_a_scene) which presents an application with the three.js library in a folder accompanying the HTML file. The heart of the code is here:

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

One may use either the minimized library (three.min.js) in which case I get the error Uncaught TypeError: undefined is not a function and Chrome developer tools cites a line in that file. Likewise, using the unminimized version (three.js) from the mr.doob build folder, the same error occurs but on line 10614. In three.js this is the blank line above this.updateProjectionMatrix() in the following code:

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

};

Notice the use of undefined in the four lines above where the error pointed.

I am presenting the code using a MAMP Web server. I have installed it both on my iMac and my Windows 8 PC. The page has failed to appear in both Chrome and Firefox always with the same diagnostic message.

I feel I'm making some very basic error. Help?

geekonaut · Accepted Answer · 2018-09-06 18:51:44Z

You missed the tiny word "new" when creating an instance of 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>

Also please note, that you won't see much as your camera is too far away from that tiny box :)

Make it

camera.position.z = 50;

to see your box shining in green in front of you..

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related