在使用THREE.BoxHelper的时候，有时经常发现BoxHelper并没有包围住盒子，是什么原因了?

1.测试代码

const group = new THREE.Group()
const cube = addCube()
const cube2 = addCube({
    color: '#bb3'
})
cube2.position.set(20, 0, 0)
group.add(cube, cube2)
const boxHelper = new THREE.BoxHelper(group, 'red')
scene.add(boxHelper)
scene.add(group)

2.此时的效果如下:

5.png

  • 发现是吻合的，没有问题

3.测试代码

const group = new THREE.Group()
const cube = addCube()
const cube2 = addCube({
    color: '#bb3'
})
cube2.position.set(20, 0, 0)
group.add(cube, cube2)
const boxHelper = new THREE.BoxHelper(group, 'red')

group.scale.set(0.5, 0.5, 0.5)

scene.add(boxHelper)
scene.add(group)

4.此时的效果如下:

6.png

5.核心代码说明

7.png

  • 出现这个的原因应该是： 在BoxHelper的后面对group进行了缩放操作
    同理，改变位置，也会有相同的问题
    8.png
    此时的效果如下：
    9.png
    同理，旋转角度，也会有相同的问题
    10.png
    此时的效果如下：
    11.png

    6.总结

  • 在使用了BoxHelper以后，再对group进行位置大小角度操作的话，就会出现不吻合的现象