【问题标题】：Make on object partially transparent using three.js使用three.js使对象部分透明
【发布时间】：2014-12-08 04:14:23
【问题描述】：
我正在尝试使用three.js。根据几个教程，我创建了一个小脚本，它从 obj 文件加载对象，在其上放置纹理，并在光标移动到屏幕上的对象上时提供一些交互功能，例如相机控制和碰撞检测。
我知道如何更改整个对象的透明度，但现在我正在寻找一种方法，根据光标位置使加载的对象部分透明。如果光标的光线与对象相交，则碰撞点附近的所有三角形都应获得更高的透明度，以便我可以看到该对象内部或后面的其他对象。有没有办法做到这一点？任何人都知道一个教程，它显示了使用three.js 实现的解决方案？
如有任何帮助或方法，我将不胜感激。
【问题讨论】：
标签：
javascript
object
three.js
transparency
【解决方案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;