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函数
    }
})

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

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

NSDT场景编辑器 | NSDT 数字孪生 | GLTF在线编辑器 | 3D模型在线转换 | UnrealSynth虚幻合成数据生成器 | 3D模型自动纹理化工具
2023 power by nsdt©鄂ICP备2023000829号