使用three.js使对象部分透明

Question

我正在尝试three.js。 根据一些教程，我创建了一个小脚本，该脚本从obj文件加载对象，在其上放置纹理，并在光标移到屏幕上的对象上时提供一些交互功能，例如相机控制和碰撞检测。

我知道如何更改整个对象的透明度，但是现在我正在寻找一种方法来根据光标的位置使加载的对象部分透明。 如果光标的光线与该对象相交，则碰撞点附近的所有三角形应具有更高的透明度，以便我可以看到该对象内部或后面的其他对象。 有没有办法做到这一点？ 任何人都知道一个教程，该教程显示了Three.js实现的解决方案吗？

对于任何帮助或方法，我将不胜感激。

Answer 1

为此可以编写一个自定义顶点着色器，其中每个顶点都有一个透明属性，并通过鼠标移动找到相交面，并修改该面的顶点透明值。

http://jsfiddle.net/meirm/58w9cfb0/

在此示例中，我编写了一个非常简单的着色器，每个像素具有属性不透明度，然后在相交测试中，我更改了相交的脸部顶点的不透明度

attribute float opacity;

...

attributes.opacity.value[intersects[0].face.a] = 0.5;
attributes.opacity.value[intersects[0].face.a] = 0.5;
attributes.opacity.value[intersects[0].face.a] = 0.5;