Take the 2-minute tour ×

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

share|improve this question

1 Answer 1

up vote 0 down vote accepted

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.

share|improve this answer
Thank you so much. What if I wanted to add a button into a toolbar to control opacity settings? Like a gradient scroll button for that object? –  Euridice01 Feb 13 '13 at 16:16
You can look at the three.js examples that use the dat.gui.js library. –  gaitat Feb 13 '13 at 18:52

Your Answer


