Three.js Gruppenrendering

Question

Ich versuche, eine Gruppe von Objekten mit three.js unter Verwendung einer einzigen Funktion zu rendern, die das zu rendernde Objekt als Parameter (render2, Zeile 35) akzeptiert, aber es funktioniert nicht. Ich kann einen einzelnen Würfel rotieren lassen, solange eine Funktion zum Steuern nur dieses Würfels eingebaut ist, aber ich bekomme einen Fehler, wenn ich versuche, die render2-Funktion zu verwenden. Die Würfel, die aus der cubeGenerator-Funktion stammen, scheinen mit dem übereinzustimmen, was in die groupRenderer-Funktion eintritt, die auch mit dem übereinstimmt, was anfänglich in die render2-Funktion eintritt. Danach, machen die und render1 Funktionen drucken Cube und cube1 Informationen wie erwartet, aber die render2 Funktion druckt eine Nummer und einen Fehler aus:

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 

ich durch das ging „Intro mit Three.js WebGL“ Tutorial bei http://threejs.org/ und es funktionierte gut, bis ich versuchte, damit herumspielen. Cube und Cube1 funktionieren, aber die Gruppe der Cubes wird auf dem Bildschirm angezeigt und rotiert nicht. Ich schätze jede Hilfe. Hier ist der Code Ich habe jetzt:

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); 

ich diese Änderung versucht, aber es hat auch nicht:

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 }; 

Hinweis: Das Tutorial immer zeigt nicht an den threejs oben .org Website, aber es sollte durch Aktualisieren der Seite oder Navigieren weg und zurück zu ihm kommen. Sie müssen möglicherweise mehrmals versuchen.

Answer 1

Dadurch wird erreicht, was ich wollte:

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 requestAnimationFrame(render); 21 cube.rotation.x += 0.05; 22 cube.rotation.y += 0.05; 23 cube1.rotation.x += 0.05; 24 cube1.rotation.y += 0.05; 25 for (object of group.children) { 26 object.rotation.x += 0.05; 27 object.rotation.y += 0.05; 28 } 29 renderer.render(scene, camera); 30 }; 31 32 var cubeGenerator = function(newGroup) { 33 console.log("--------------------\nGenerating Cubes"); 34 for (var i = -2; i < 3; i++) { 35 var newGeometry = new THREE.BoxGeometry(1, 1, 1); 36 var newMaterial = new THREE.MeshNormalMaterial(); 37 var newCube = new THREE.Mesh(newGeometry, newMaterial); 38 newCube.position.x = i; 39 newGroup.add(newCube); 40 console.log(newCube); 41 } 42 console.log("Done Generating Cubes\n--------------------"); 43 }; 44 45 var group = new THREE.Group(); 46 cubeGenerator(group); 47 48 scene.add(cube); 49 scene.add(cube1); 40 scene.add(group); 51 render();

ich die drei Funktionen in einem machen kombiniert, die jedes der Objekte machen. @dcromley Ich denke, deine Lösung würde bewirken, dass sich meine Objektgruppe so dreht, als wäre sie ein segmentiertes Objekt, aber ich wollte, dass sich eine Gruppe von Objekten auf die gleiche Weise dreht, aber voneinander getrennt ist (dh fünf Würfel, jeder dreht sich um sein eigenes Zentrum und nicht um fünf Würfel, die sich um die Mitte des mittleren Würfels drehen). Vielleicht irre ich mich aber.

Answer 2

Ich denke, Sie möchten nur einmal rendern. Wenn Sie ein Objekt drehen möchten, wäre Ihre Routine:

rotate1 (object1);

Wenn Sie eine Gruppe von Objekten zusammen rotieren möchten, fügen Sie die Objekte zu einer Szene hinzu (und fügen Sie die Szene zu Ihrer Basisszene hinzu) und drehen Sie die Szene. Ihre Routine wäre:

rotate2 (scene1);

EDIT: Skript hinzugefügt

"use strict"; 
var renderer, scene, camera, light, geometry, material, mesh; 
var scene2, mesh1, mesh2, mesh3, mesh4; 
window.onload = function() { 
    renderer = new THREE.WebGLRenderer(); 
    renderer.setSize(750, 750); 
    renderer.setClearColor(0x102030, 1); 
    document.body.appendChild(renderer.domElement); 
    scene = new THREE.Scene(); // the base scene 
    camera = new THREE.PerspectiveCamera(30, 1); 
    camera.position.set(0, 0, 30); 
    camera.lookAt(new THREE.Vector3(0,0,0)); 
    light = new THREE.AmbientLight(0x444444); 
    scene.add(light); 
    light = new THREE.DirectionalLight(0xff8888, 1); 
    light.position.set(10, 10, 20); 
    scene.add(light); 
    light = new THREE.DirectionalLight(0x88ff88, 1); 
    light.position.set(-10, 10, 20); 
    scene.add(light); 

    mesh1 = makebox(-3, -3, 0); // a couple of individual objects 
    scene.add(mesh1); 
    mesh2 = makebox(-3, 3, 0); 
    scene.add(mesh2); 

    scene2 = new THREE.Scene(); // a sub-scene, the boxes on the right 
    mesh3 = makebox(0, -3, 0); 
    scene2.add(mesh3); 
    mesh4 = makebox(0, 3, 0); 
    scene2.add(mesh4); 
    scene2.position.set(3, 0, 0); 
    scene.add(scene2); 

    fnloop(); 
} 
function fnloop() { 
    mesh1.rotateY(.01); // individual object 
    scene2.rotateY(-.01); // scene of 2 objects 
    renderer.render(scene, camera); 
    requestAnimationFrame(fnloop); 
} 
function makebox(x, y, z) { 
    geometry = new THREE.BoxGeometry(1, 2, 3); 
    material = new THREE.MeshPhongMaterial({ color:0xffffff, wireframe:false }); 
    mesh = new THREE.Mesh(geometry, material); 
    mesh.position.set(x, y, z); 
    return mesh; 
}