javascript - 无法在 Three.js 中为线框旋转设置动画

Question

我试着让线框在场景中旋转。

当我删除 BoxHelper 时动画有效，但我想为没有对 Angular 线而不是实体对象的立方体线框设置动画。

---

Codepen 演示:

Demo

---

代码:

var  w = window.innerWidth, h = window.innerHeight,
scene = new THREE.Scene(), 
camera = new THREE.PerspectiveCamera(75, w/h, 0.1, 1000),
renderer = new THREE.WebGLRenderer(),
geometry = new THREE.BoxGeometry( 1, 1, 1 ),
material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ),
mesh = new THREE.Mesh( geometry, material ),
cube = new THREE.BoxHelper(mesh);

cube.material.color.setRGB(25,25,25);
scene.add(cube);

camera.position.z = 2;
renderer.setSize(w,h);
document.body.appendChild(renderer.domElement);


function render(){
  requestAnimationFrame( render );
  cube.rotation.x += 1;
  renderer.render(scene, camera );
}

render();

Answer 1

THREE.BoxHelper 实例的位置与 THREE.Mesh 的位置相关联。为了使您的代码正常工作，您必须将网格添加到场景并旋转网格。您的盒子助手将随之而来。

如果您不想显示网格，您可以简单地设置 mesh.visible = false;

此代码有效:

var w = window.innerWidth, h = window.innerHeight,
    scene = new THREE.Scene(), 
    camera = new THREE.PerspectiveCamera(75, w/h, 0.1, 1000),
    renderer = new THREE.WebGLRenderer(),
    geometry = new THREE.BoxGeometry( 1, 1, 1 ),
    mesh = new THREE.Mesh( geometry );

camera.position.z = 2;  
renderer.setSize(w,h);
document.body.appendChild(renderer.domElement);

mesh.visible = false; //<-- hide mesh
scene.add(mesh);      //<-- add mesh to scene

cube = new THREE.BoxHelper(mesh);   
cube.material.color.setRGB(25,25,25);
scene.add(cube);

function render(){
    mesh.rotation.y += 0.01; //<-- rotate the mesh

    requestAnimationFrame( render );
    renderer.render( scene, camera );
}

render();