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