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

Question

I'm experimenting with three.js. Based on several tutorials I've created a small script that loads an object from obj file, puts a texture on it and provides some interactive features like camera control and collision detection when the cursor moves over the object on screen.

I know how i can change the transparency of the whole object, but now I'm looking for a way to make the loaded object partially transparent depending on the cursors position. If the ray of the cursor intersects the object, all triangles nearby the collision point should get a higher transparency so that i can see other objects inside or behind this object. Is there a way to do this? Anybody knows a tutorial which shows a solution for the implementation with three.js?

For any help or approach I would be grateful.

Answer 1

Its possible to write a custom vertex shader for that, where each vertex has a transparent attribute, and with mouse movements, find the intersection face, and modify face's vertex transparent value.

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

in this example i wrote very simple shader with attribute opacity per pixel, then in the intersection testing i change the opacity for intersected face's vertices

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;