6

#yyds干货盘点#THREE.BoxHelper的使用注意

 3 years ago
source link: https://blog.51cto.com/u_11871779/4936711
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

#yyds干货盘点#THREE.BoxHelper的使用注意

原创

歆冉 2022-01-17 08:55:11 博主文章分类：three.js ©著作权

文章标签 three.js BoxHelper 文章分类 JavaScript 前端开发 阅读数513

在使用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.此时的效果如下:

#yyds干货盘点#THREE.BoxHelper的使用注意_BoxHelper

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

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.此时的效果如下:

#yyds干货盘点#THREE.BoxHelper的使用注意_BoxHelper_02

5.核心代码说明

#yyds干货盘点#THREE.BoxHelper的使用注意_BoxHelper_03

  • 出现这个的原因应该是： 在BoxHelper的后面对group进行了缩放操作
    同理，改变位置，也会有相同的问题
    #yyds干货盘点#THREE.BoxHelper的使用注意_three.js_04
    此时的效果如下：
    #yyds干货盘点#THREE.BoxHelper的使用注意_BoxHelper_05
    同理，旋转角度，也会有相同的问题
    #yyds干货盘点#THREE.BoxHelper的使用注意_BoxHelper_06
    此时的效果如下：
    #yyds干货盘点#THREE.BoxHelper的使用注意_three.js_07
  • 在使用了BoxHelper以后，再对group进行位置大小角度操作的话，就会出现不吻合的现象
  • 打赏
  • 赞
  • 收藏
  • 评论
  • 分享
  • 举报

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK