Home/ Questions/Q 9282443
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T18:22:38+00:00

I’m self teaching myself WebGL for a project I want to work on but

  • 0

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!! 😀

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0