ThreeJS教程:射线拾取Sprite控制场景
推荐:将NSDT场景编辑器加入你的3D工具链
3D工具集:NSDT简石数字孪生
射线拾取Sprite控制场景
射线投射器Raycaster
通过.intersectObjects()
方法可以拾取网格模型Mesh
,一样也可以拾取精灵模型Sprite
。
下面举一个例子,把精灵模型当做一个功能按钮,当鼠标单击选中以后,改变3D场景中参数,比如模型的颜色。
给精灵模型绑定一个函数.change()
三维场景中提供了两个精灵模型对象,可以分别自定义一个方法.change()
。
sprite.change = function(){
mesh.material.color.set(0xffffff);
}
sprite2.change = function(){
mesh.material.color.set(0xffff00);
}
射线选中Sprite
,sprite.change()
函数执行
鼠标单击,如果选中某个精灵模型,就调用该精灵模型绑定的函数.change()
。
addEventListener('click', function (event) {
...
...
// 射线交叉计算拾取精灵模型
const intersects = raycaster.intersectObjects([sprite,sprite2]);
if (intersects.length > 0) {
intersects[0].object.change();//执行选中sprite绑定的change函数
}
})