推荐：将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函数
    }
})

上一篇：ThreeJS教程：射线拾取层级模型(模型描边) (mvrlink.com)

下一篇：ThreeJS教程：CSS2DRenderer(HTML标签) (mvrlink.com)