I recently delved into the world of Web GL and THREE.js
After following a tutorial on YouTube, I attempted to display a cube and an axis using the code below. Unfortunately, upon trying to view the page with this code, I encountered a Javascript error message:
Uncaught TypeError: this.updateMorphTargets is not a function
Seeking guidance from those well-versed in THREE.js, I'm unsure where I went wrong. Any assistance would be greatly appreciated. Thank you 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);
});