无法在 Three.js 中对线框旋转进行动画处理

Can't animate wireframe rotation in Three.js

本文关键字：旋转 动画 处理 线框 Three js      更新时间：2023-09-26

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

当我删除 BoxHelper 时，动画可以工作，但我想在没有对角线而不是实体对象的情况下对立方体线框进行动画处理。

<小时 />

代码笔演示：

演示

<小时 />

法典：

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();

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();
相关文章：