THREE.js - Uncaught TypeError

Question

I am just learning to use Web GL and THREE.js

I followed a tutorial on YouTube and as a result ended up with the below code. This code should display a cube and an axis. However, when I try to display the page containing this code I get a Javascript error. The error states:

Uncaught TypeError: this.updateMorphTargets is not a function

I am not sure what I have done wrong but was hoping that someone here who was familiar with THREE.js could help me out. Thanks so much for your time.

jQuery(document).ready( function($){

    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight,.1, 500);
    var renderer = new THREE.WebGLRenderer();

    renderer.setClearColor(0x000000);
    renderer.setSize(window.innerWidth, window.innerHeight);

    var axis = new THREE.AxisHelper(10);

    scene.add(axis);

    var cubeGeometry = new THREE.BoxGeometry(5, 5, 5);
    var cubeMaterial = new THREE.MeshBasicMaterial({color: 0xdddddd, wireframe:true});
    var cube = THREE.Mesh(cubeGeometry, cubeMaterial);

    cube.position.x = 0;
    cube.position.y = 0;
    cube.position.z = 0;

    scene.add(cube);

    camera.position.x = 40;
    camera.position.y = 40;
    camera.position.z = 40;

    camera.lookAt(scene.position);

    $('#webgl-container').append(renderer.domElement);
    renderer.render(scene, camera);

});

Look at the stack trace of the error. What line is it originating from? — Andy Ray
– Andy Ray, Commented Oct 6, 2015 at 0:34
It's coming from line 16927 in three.js when it tries to call this.updateMorphTargets(); — Emberdyn
– Emberdyn, Commented Oct 6, 2015 at 0:37
Is that the origin of the stack trace? There's no functions calling that one? — Andy Ray
– Andy Ray, Commented Oct 6, 2015 at 1:08

Paul-Jan · Accepted Answer · 2015-12-22 18:25:00Z

21

You made a simple typo, forgetting the new operator before Three.MESH, so it should be:

var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

The new operator is a big deal, without it the THREE.Mesh is no longer a constructor but an ordinary function. This causes the this inside the function to refer the THREE namespace object itself, as opposed to a newly created Mesh object. The THREE namespace object does not have an updateMorphTarget() method, hence the error.

edited Dec 22, 2015 at 18:25

answered Oct 6, 2015 at 9:38

Paul-Jan

17.4k1 gold badge68 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

nbro Over a year ago

You say: " The THREE object does not have an updateMorphTarget() method", but you mean the THREE namespace object.

Paul-Jan Over a year ago

Very true, the current wording could be confusing. I've edited the answer, thanks!

Prav Over a year ago

Brilliant observation!

Collectives™ on Stack Overflow

THREE.js - Uncaught TypeError

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related