CODEWITHSUNDEEP
three.js
Ethan Kay
Ethan Kay

Reputation: 797

Three JS Material to see behind current div

Is there any material that would allow an object in a scene with this material to, wherever it is visibly rendered, show whatever is in the dom element behind the renderer's dom element?

In other words what do I need to do to the object "?" below such that viewer would see "D" instead of "C" whenever "B" is not blocking "?"?

Rendered     |            Scene          | Lower DOM Element
             |                           |
             |                           |      D                                               
    B        |      B              C     |      D                                               
    B        |      B       ?      C     |      D                                               
    B        |      B       ?      C     |      D                                               
    B        |      B       ?      C     |      D                                               
    B        |      B       ?      C     |      D                                               
    B        |      B       ?      C     |      D                                                   
    B        |      B       ?      C     |      D                                               
    D        |              ?      C     |      D                                               
    D        |              ?      C     |      D                                               
    D        |              ?      C     |      D                                               
    D        |              ?      C     |      D                                               
    C        |                     C     |      D         
    C        |                     C     |      D

Upvotes: 0

Views: 233

Answers (1)

Garrett Johnson
Garrett Johnson

Reputation: 2534

See-through Background

There is. You're looking for the WebGLRenderer alpha option and setClearAlpha function:

// Enables the canvas to be transparent
renderer = new THREE.WebGLRenderer({ alpha: true });

// Makes the backaground completely transparent
renderer.setClearAlpha(0);

You can see this in an example here: https://codepen.io/anon/pen/oQrPzO.

See-through Object

It sounds like you're interested in making rendered object behave as a "window" into the dom behind the canvas. That can be achieved with the opacity material setting:

// Set up a renderer with a white background
renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setClearAlpha(0);
renderer.setClearColor(0xffffff);

// ...
// Create a material to behave as a window
material = new THREE.MeshPhongMaterial({ opacity: 0.5, transparent: false });

It is important that the transparent option be set to false so that no blending occurs and the alpha is written directly to the canvas. Here's another example: https://codepen.io/anon/pen/oQrPzO.

Hope that helps!

Upvotes: 2

Related Questions