Question

下面是一些代码示例：

var geometry = new THREE.BoxGeometry( larguraX,altura,comprimentoZ);     
var material = new THREE.MeshBasicMaterial( {color: "pink"} );
var mmesh = new THREE.Mesh( geometry, material );

var objj = new THREE.Object3D();
objj.add(mmesh);
...

为什么不是这样？

mmesh.translateX(50);
mmesh.rotateY(Math.PI/2);

结果如下：

objj.translate(50);
objj.rotateY(Math.PI/2);

Answer 1

它们是相同的。

请注意，红色和蓝色立方体完全对齐，形成一个紫色框

'use strict';

/* global THREE */

function main() {
  const canvas = document.querySelector('#c');
  const renderer = new THREE.WebGLRenderer({canvas: canvas});

  const fov = 75;
  const aspect = 2;  // the canvas default
  const near = 0.1;
  const far = 200;
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
  camera.position.set(50, 0, 2);

  const scene = new THREE.Scene();

  const boxWidth = 1;
  const boxHeight = 1;
  const boxDepth = 1;
  const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);

  const material1 = new THREE.MeshBasicMaterial({
    color: 'red', transparent: true, opacity: 0.5,
  });
  const material2 = new THREE.MeshBasicMaterial({
    color: 'blue', transparent: true, opacity: 0.5,
  });
  const cube1 = new THREE.Mesh(geometry, material1);
  const cube2 = new THREE.Mesh(geometry, material2);
  const obj = new THREE.Object3D();
  
  scene.add(cube1);
  scene.add(obj);  
  obj.add(cube2);

  cube1.translateX(50);
  cube1.rotateY(Math.PI / 2);

  obj.translateX(50);
  obj.rotateY(Math.PI / 2);

  renderer.render(scene, camera);
}

main();

<canvas id="c"></canvas>
<script src="https://threejsfundamentals.org/threejs/resources/threejs/r94/three.min.js"></script>

您可能需要发布更多代码

为什么网格会绕自己的轴旋转，而Objects3D为什么绕世界轴旋转？

1 个答案: