Get canvas with ThreeJS behind al the DOM-elements

Questions
, ,
1

Hello guys,
How do i position the canvas that it is behind the div elements, so i can use threejs in the background? i’ve tried z-index but without success :frowning: As u can see in the picture the lighthelper (for demo purposes) shows in front of the div element.
Kind regards!

picture1
picture11920×1019 124 KB

1 Like
2

Without seeing the code of your website its not possible to provide help. It’s best if you demonstrate the issue with a live example: Edit fiddle - JSFiddle - Code Playground

3

If you make sure that your canvas element is the first child of your body you probably don’t need to play around with the z-index values of your elements.

Something like this:

<!DOCTYPE html>
<html>
    <head>
        ...
    </head>
    <body>
        <!-- Canvas first -->
        <canvas id="canvas"></canvas>
        
        <!-- Other stuff -->
        <div>
            ...
        </div>

        <div>
            ...
        </div>
    </body>
</html>

...
#canvas {
    position: fixed;
    top: 0;
    left: 0;
}
...

...
const canvas = document.getElementById('canvas');

const renderer = new THREE.WebGLRenderer({ canvas: canvas });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.render(scene, camera);
...
1 Like