CODEWITHSUNDEEP
javascriptthree.jswebglopacity
Euridice01
Euridice01

Reputation: 2568

How do I change the opacity of an STL object in three.js/WebGL?

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

Upvotes: 2

Views: 4466

Answers (1)

gaitat
gaitat

Reputation: 12632

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.

Upvotes: 1

Related Questions