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

Make on object partially transparent using three.js

本文关键字：透明 对象部 js      更新时间：2023-09-26

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

我

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

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

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

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;
相关文章：