javascript - THREE.js - 未捕获的类型错误

Question

我刚开始学习使用 Web GL 和 THREE.js

我按照 YouTube 上的教程进行操作，结果得到了以下代码。此代码应显示一个立方体和一个轴。但是，当我尝试显示包含此代码的页面时，出现 Javascript 错误。错误状态:

Uncaught TypeError: this.updateMorphTargets is not a function

我不确定我做错了什么，但希望这里熟悉 THREE.js 的人可以帮助我。非常感谢您的宝贵时间。

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

你犯了一个简单的错字，忘记了 Three.MESH 之前的 new 运算符，所以它应该是:

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

new 运算符很重要，没有它 THREE.Mesh 就不再是构造函数，而是一个普通函数。这会导致函数内部的 this 引用 THREE 命名空间对象本身，而不是新创建的 Mesh 对象。 THREE 命名空间对象没有 updateMorphTarget() 方法，因此出现错误。