0
我想呈現一組對象與three.js使用一個單一的函數，該對象被渲染爲參數（render2，第35行），但它不工作。只要有一個爲控制該多維數據集而構建的函數，我就可以使單個多維數據集旋轉，但是當我嘗試使用render2函數時出現錯誤。由cubeGenerator函數製作的立方體似乎與進入groupRenderer函數的內容相匹配，該函數也與最初進入render2函數的內容相匹配。在此之後，渲染和render1功能打印立方體和預期cube1信息，但render2功能打印出一個數字和一個錯誤：Three.js組渲染
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
我經歷了去「介紹與three.js所到WebGL的」教程在http://threejs.org/，它工作得很好，直到我試着玩它。立方體和立方體1正在工作，但立方體組顯示在屏幕上並不旋轉。我感謝任何幫助。下面是代碼我現在所擁有的：
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
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 }
53 console.log("Done Generating Cubes\n--------------------");
54 };
55
56 var groupRenderer = function(renderGroup) {
57 console.log("--------------------\nRendering Group");
58 for (object of group.children) {
59 console.log(object);
60 render2(object);
61 }
62 console.log("Done Rendering Group\n--------------------");
63 };
64
65 var group = new THREE.Group();
66 cubeGenerator(group);
67
68 scene.add(cube);
69 scene.add(cube1);
70 scene.add(group);
71 render();
72 render1();
73 groupRenderer(group);
我嘗試這樣修改，但它也沒有工作：
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 };
注： 本教程並不總是在threejs露面.org網站，但它應該是刷新頁面或導航離開並返回到它。您可能需要嘗試多次。
我不確定你想要做什麼，但是......你首先調用render（）並在那個調用requestAnimationFrame（render）裏面調用，所以這個函數將被連續調用。然後你在'render1'和'render2'中做同樣的事情。 AFAIK這意味着所有3個函數將被調用每一幀。 – 2pha
如果你不想要這個，請去掉'requestAnimationFrame' – 2pha