如何在three.js / WebGL中更改STL对象的不透明度？

Question

I'm self teaching myself WebGL for a project I want to work on but I'm pretty new to all the nifty features of Three.js.

I have an STL object that I'm using an STL loader for to import into the 3-D Viewer. Now, I want to be able to change the opacity of that object and also, perhaps remove certain features of that object to see the interior of the STL image. How do change the opacity of the object, perhaps create a button to change the opacity. How do I do so?

Also, if possible (since the model loaded is composed of several parts) remove certain structures? Perhaps with a toolbar on the side, that says part 1, part 2, part 3 and for each part, you just see that part.

Thank you so much!! :D

Answer 1

At some point in your code you must have loaded the STL file using the STLLoader. And since STL files do not have materials you would have added a material definition like so:

var material = new THREE.MeshPhongMaterial ({ color: 0xFF0000 });
var mesh = new THREE.Mesh (object, material);

where object is assigned from the event.target in the addEventListener function, since that is the way to load STL files. You can change the material definition to:

var material = new THREE.MeshPhongMaterial ({ color: 0xFF0000, opacity: 0.5, transparent: true });
var mesh = new THREE.Mesh (object, material);

to get a red transparent material. You dont have to use Phong, you can also use LambertMaterial.