在使用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进行位置大小角度操作的话,就会出现不吻合的现象