如何在three.js中突出显示鼠标指针区域

Question

我有一个使用 ThreeJS 渲染的 .fbx 模型。 我想根据鼠标指针的位置在模型顶部显示一个圆圈。 我很难找到一个例子。 这是用着色器完成的吗？ 怎么样？

Answer 1

是的，要从 2D（投影）屏幕点获取真正的 3D 点（在模型空间中），您需要使用光线投射。我认为官方的例子是最好的。

webgl interactive points

interactive raycasting points.

但我建议使用 GPU 驱动的光线投射 - 它更快，在鼠标移动时您将获得更好的 FPS（不过它有一些小错误）： GPUPicker.

要绘制光照效果，您需要着色器（以及对象的着色器材质，放置在指针驱动的位置）。 参见示例here。