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

});

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

});

• javascript
• three.js

• Look at the stack trace of the error. What line is it originating from? – 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 Commented Oct 6, 2015 at 0:37
• Is that the origin of the stack trace? There's no functions calling that one? – Andy Ray Commented Oct 6, 2015 at 1:08

1 Answer 1

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.