CODEWITHSUNDEEP
javascriptthree.js
culeaalex
culeaalex

Reputation: 47

THREE.js make transparent objects that have other objects in background

Hy,

I want to make a room in three.js and I want the walls that have objects behind them (from the pov of the camera) to become transparent (.5 opacity) as I rotate the room.

To clarify a little bit:

Imagine you have a room. That room has walls. In that room you insert furniture. Camera looks at the room and I want the walls to be transparent only if from the pov of the camera they have other objects behind (so you can see throw walls the room). The walls in the back should have opacity 1. So anywhere you move the camera (and look at the room) you can see all the elements (otherwise some walls will block the view) enter image description here

Upvotes: 1

Views: 2386

Answers (1)

Komsomol
Komsomol

Reputation: 742

You don't provide a lot of detail with regards to how you are moving the camera. But it can be done fairly easily. All meshes have a material property that has an opacity.

Here is a jsFiddle - http://jsfiddle.net/Komsomol/xu2mjwdk/

I added the entire OrbitControls.js inside and added a boolean;

var doneMoving = false;

Which I added in the mouseup and mousedown of the OrbitControls. Just to capture when we are not moving the camera.

There are some specific options that need to be added in the renderer and the object.

renderer = new THREE.WebGLRenderer({
    alpha:true,
    transparent: true
});

The object

torusMat = new THREE.MeshPhongMaterial();
torusMat.needsUpdate = true;
torusMat.transparent = true;

And finally add some control code in the Animate method to kick off whatever changes you want. 

if(doneMoving){
   torusMat.opacity = 0.5;
} else {
    torusMat.opacity = 1;
}

That's about it. This should give you enough of an idea how to implement this.

Upvotes: 1

Related Questions