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

Question

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

Answer 1

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

webgl interactive points

interactive raycasting points。

但是我建议使用GPU驱动的光线投射-它的速度要快得多，在移动鼠标时FPS会更好（尽管有一些小错误）：GPUPicker。

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