Three.js中旋转Mesh后BoxHelper无变化，求正确实现方法

嘿，我懂你遇到的困扰了——你已经把Mesh绕X轴转了90度，但BoxHelper的朝向却纹丝不动，这其实是Three.js里BoxHelper的一个常见特性：它默认只会在初始化时基于目标物体的状态生成线框，之后不会自动监听目标的变换。

下面给你两种实用的解决办法，按需选择：

方法一：将BoxHelper设为Mesh的子对象（推荐） #

这是最省心的方式，因为Three.js中父对象的所有变换（旋转、平移、缩放）都会自动传递给子对象。你只需要把BoxHelper加到Mesh下面，而不是直接加到场景里：

// 创建Mesh并设置旋转
var object = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({ color: 0xff0000 }));
object.rotation.x = Math.PI / 2;
scene.add(object); // 先把Mesh添加到场景

// 创建BoxHelper并挂载为Mesh的子对象
var box = new THREE.BoxHelper(object, 0xffff00);
object.add(box); // 关键：加到Mesh下，而非scene

这样一来，不管你之后怎么修改Mesh的姿态，BoxHelper都会自动跟着同步变换，完全不用额外维护。

方法二：手动更新BoxHelper（适合特殊场景） #

如果因为某种原因，你必须把BoxHelper和Mesh放在场景的同级层级，那可以在Mesh变换后手动调用update()方法，让BoxHelper重新计算目标物体的当前边界和姿态：

var object = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({ color: 0xff0000 }));
object.rotation.x = Math.PI / 2;
scene.add(object);

var box = new THREE.BoxHelper(object, 0xffff00);
scene.add(box);

// 手动更新BoxHelper，同步Mesh的最新状态
box.update();

要是你在做动画（比如每一帧都修改Mesh的旋转），记得把box.update()放到动画循环里，这样BoxHelper才能实时跟上Mesh的变化。

小提醒 #

顺便提一句，你原来写的new THREE.MeshBasicMaterial(0xff0000)虽然能运行，但更规范的写法是传入配置对象{ color: 0xff0000 }，这样后续添加其他材质属性（比如透明度、线框模式）会更方便。

内容的提问来源于stack exchange，提问作者Mandroid