Attempting to render a group of objects using three.js with a single function, render2, that takes the object as a parameter has been unsuccessful. While individual cubes can rotate when controlled by their own function, an error is encountered when trying to use the render2 function. The cubes created from the cubeGenerator function seem to align with what is passed into the groupRenderer function, which in turn matches the initial input for the render2 function. However, while render and render1 functions output cube and cube1 information correctly, render2 function displays a number and throws an error:
main.js:20 T…E.Mesh {uuid: "6902A0C3-7CFA-4B5C-A7BC-11259CE69113", name: "", type: "Mesh", parent: T…E.Scene, children: Array[0]…}
main.js:28 T…E.Mesh {uuid: "275129EB-BD99-4156-B208-CED6F49F6112", name: "", type: "Mesh", parent: T…E.Scene, children: Array[0]…}
main.js:36 408.2339999877149
main.js:38 Uncaught TypeError: Cannot read property 'x' of undefined
Following the "Intro to WebGL with Three.js" tutorial on worked smoothly until experimentation began. While cube and cube1 rotations work fine, the group of cubes appear on screen but fail to rotate. Assistance regarding this issue would be greatly appreciated. Here is the current code snippet:
Line Code
1 var scene = new THREE.Scene();
2 var aspect = window.innerWidth / window.innerHeight;
3 var camera = new THREE.PerspectiveCamera(75, aspect, 0.1, 1000);
4 var renderer = new THREE.WebGLRenderer();
5 renderer.setSize(window.innerWidth, window.innerHeight);
6 document.body.appendChild(renderer.domElement);
7 camera.position.z = 10;
8
9 var geometry = new THREE.BoxGeometry(1, 1, 1);
10 var material = new THREE.MeshNormalMaterial();
11 var cube = new THREE.Mesh(geometry, material);
12 cube.position.x = -1;
13
14 var geometry1 = new THREE.BoxGeometry(1, 1, 1);
15 var material1 = new THREE.MeshNormalMaterial();
16 var cube1 = new THREE.Mesh(geometry1, material1);
17 cube1.position.x = 1;
18
19 var render = function() {
20 console.log(cube);
21 requestAnimationFrame(render);
22 cube.rotation.x += 0.05;
23 cube.rotation.y += 0.05;
24 renderer.render(scene, camera);
25 };
26
27 var render1 = function() {
28 console.log(cube1);
29 requestAnimationFrame(render1);
30 cube1.rotation.x += 0.05;
31 cube1.rotation.y += 0.05;
32 renderer.render(scene, camera);
33 }
34
35 var render2 = function(object) {
36 console.log(object);
37 requestAnimationFrame(render2);
38 object.rotation.x += 0.05;
39 object.rotation.y += 0.05;
40 renderer.render(scene, camera);
41 }
42
...
74 groupRenderer(group);
An attempt was made to modify the code as follows, however, it did not resolve the issue:
Line Code
43 var cubeGenerator = function(newGroup) {
44 console.log("--------------------\nGenerating Cubes");
45 for (var i = -2; i < 2; i++) {
46 // var newGeometry = new THREE.BoxGeometry(1, 1, 1);
47 // var newMaterial = new THREE.MeshNormalMaterial();
48 // var newCube = new THREE.Mesh(newGeometry, newMaterial);
49 // newCube.position.x = i;
50 // newGroup.add(newCube);
51 // console.log(newCube);
52 var clone = cube.clone();
53 clone.position.x = i;
54 newGroup.add(clone);
55 console.log(clone);
56 }
57 console.log("Done Generating Cubes\n--------------------");
58 };
Note: The tutorial may not always be visible on the threejs.org website; try refreshing or navigating away and back to access it. Multiple attempts might be needed.