Three.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/ 上学习了 "Intro to WebGL with Three.js" 教程，在我尝试使用它之前它工作得很好。立方体和立方体 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 网站上，但应该通过刷新页面或导航离开并返回到它来显示。您可能需要尝试多次。

Answer 1

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

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

Answer 2

这完成了我想要的：

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 我认为你的解决方案会导致我的一组对象旋转，就好像它们是一个分段对象一样，但我想要的是一组对象以相同的方式旋转，但彼此分开（即五个立方体，每个都围绕自己的中心旋转，而不是五个立方体围绕中间立方体的中心旋转）。不过，也许我错了。

Three.js组渲染

Three.js group rendering

javascript

rendering

three.js