三.js分组渲染

Question

我正在尝试使用将要渲染的对象作为参数的单个函数（render2，第 35 行）渲染一组带有 three.js 的对象，但它不起作用。只要有一个仅用于控制该立方体的函数，我就可以使单个立方体旋转，但是当我尝试使用 render2 函数时出现错误。由 cubeGenerator 函数制成的立方体似乎与 groupRenderer 函数中的内容相匹配，这也与最初进入 render2 函数中的内容相匹配。之后，render和render1函数按预期打印cube和cube1信息，但是render2函数打印出一个数字和一个错误：

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

我在http://threejs.org/ 阅读了“使用 Three.js 介绍 WebGL”教程，在我尝试使用它之前它工作得很好。 cube 和 cube1 正在工作，但立方体组显示在屏幕上并且不旋转。我很感激任何帮助。这是我现在的代码：

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 网站上，但它应该通过刷新页面或导航离开并返回它来出现。您可能需要多次尝试。

Answer 1

这完成了我想要的：

var scene = new THREE.Scene();
var aspect = window.innerWidth / window.innerHeight;
var camera = new THREE.PerspectiveCamera(75, aspect, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
camera.position.z = 10;

var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshNormalMaterial();
var cube = new THREE.Mesh(geometry, material);
cube.position.x = -1;

var geometry1 = new THREE.BoxGeometry(1, 1, 1);
var material1 = new THREE.MeshNormalMaterial();
var cube1 = new THREE.Mesh(geometry1, material1);
cube1.position.x = 1;

var render = function() {
    requestAnimationFrame(render);
    cube.rotation.x += 0.05;
    cube.rotation.y += 0.05;
    cube1.rotation.x += 0.05;
    cube1.rotation.y += 0.05;
    for (object of group.children) {
    object.rotation.x += 0.05;
    object.rotation.y += 0.05;
    }
    renderer.render(scene, camera);
};

var cubeGenerator = function(newGroup) {
    console.log("--------------------\nGenerating Cubes");
    for (var i = -2; i < 3; i++) {
    var newGeometry = new THREE.BoxGeometry(1, 1, 1);
    var newMaterial = new THREE.MeshNormalMaterial();
    var newCube = new THREE.Mesh(newGeometry, newMaterial);
    newCube.position.x = i;
    newGroup.add(newCube);
    console.log(newCube);
    }
    console.log("Done Generating Cubes\n--------------------");
};

var group = new THREE.Group();
cubeGenerator(group);

scene.add(cube);
scene.add(cube1);
scene.add(group);
render();

我将三个渲染函数组合成一个渲染每个对象的函数。 @dcromley我认为您的解决方案会导致我的一组对象像一个分段对象一样旋转，但我想要的是一组对象以相同的方式旋转，但彼此分开（即五个立方体，每个都围绕自己的中心旋转，而不是五个立方体围绕中间立方体的中心旋转）。不过，也许我弄错了。

Answer 2

我想你只想渲染一次。如果你想旋转一个对象，你的例程将是：

旋转1（对象1）；

如果您希望一组对象一起旋转，请将对象添加到场景中（并将场景添加到基础场景中）并旋转场景。你的例行程序是：

旋转2（场景1）；

编辑：添加脚本

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