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

});

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.