Question

在我的计划中，我做了：

var object = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial( 0xff0000 ) );
object.rotation.x = Math.PI / 2;
var box = new THREE.BoxHelper( object, 0xffff00 );
scene.add(box);

在这里，我首先尝试创建一个线框框，然后围绕x轴旋转90度（第2行）。但是我看不到盒子方向的任何变化。

这样做的正确方法是什么？

Answer 1

只需将立方体的旋转设置为90度（此处为45），您将拥有相同的立方体：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(2, 5, 10);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

scene.add(new THREE.GridHelper(10, 10));

var cube = new THREE.Mesh(new THREE.BoxGeometry(2, 2, 2), new THREE.MeshBasicMaterial({
  color: "aqua",
  wireframe: true
}));
cube.position.set(0, 1, 0);
cube.rotation.x = Math.PI * 0.25;
scene.add(cube);

var box = new THREE.BoxHelper(cube, 0xff9900);
scene.add(box);

render();

function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/92/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

围绕轴旋转立方体

1 个答案: