How to add three.js as background in HTML

Adding three.js as a background in HTML

Three.js is a JavaScript library used for rendering animations on the web. It makes use of WebGL for this purpose.

One important application of three.js is its use in HTML pages. We can render graphics and display them with our HTML pages more aesthetically pleasing. There are two ways to go about this problem:

Setting <canvas> position to fixed.
Using an iframe tag.

Setting the `<canvas>` `position` to `fixed`

We can set the position attribute of <canvas> to fixed and assign the z-index a value of -1. This will move the scene towards the back.

Note: To read more on the properties above, please follow these links:
Position attribute
Z-index attribute

Syntax

The HTML syntax for rendering the three.js background is as follows.

<canvas id="c"></canvas>

The CSS syntax for editing the properties of the HTML <canvas> is as follows.

#c {
 position: fixed;
 left: 0;
 top: 0;
 z-index:-1;
}

Explanation

Setting position:fixed will fix the position of our background and will stay in place when the HTML page in front is scrolled up or down.
The top:0; left:0 styling attributes position the canvas to the top left corner of the screen after its position is set to fixed.
The z-index: -1 styling attribute moves the canvas a point towards the back on the z-axis. And our HTML code is displayed on the front.

Explanation

The explanation for the code in the HTML tab is as follows:

Line 13: This contains the <canvas> properties we will alter in the CSS file.
Lines 15–26: This is the HTML page on which we want to add our three.js background.
Line 36: Inside this <script> tag is the three.js code that renders our background.

The explanation for the code in the CSS tab is as follows:

Lines 1–6: These contain the attributes we spoke about while discussing the syntax.

The rest of the files contain properties for classes present on the HTML page.

Using an `<iframe>` tag

Another method to use the three.js code as background is to use the <iframe> tag.

Syntax

The HTML and syntax for rendering the three.js background is as follows:

<iframe id="background" src="background.html"></iframe>

The CSS syntax for editing the properties of the HTML <iframe> is:

#background {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: -1;
    border: none;
    pointer-events: none;
}

Explanation

In src, an attribute for <iframe> tag, we specify the name of the HTML file containing the three.js code.
The width and height properties ensure that the <iframe> fills the entire page.
The left and top properties ensure that the <iframe> is positioned at the top left of the screen.
The z-index is also set to -1. This moves the <iframe> towards the back of the page.
The pointer-events property is to block interactions with the three.js page if any exist.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>THREE Background</title>
    <link rel="stylesheet" href="styles.css">
    <style>
        body { margin: 0; }
    </style>
</head>
<body>

    <iframe id="background" src="./three.html"></iframe>

    <div class="form">
        <img class="educativelogo" src='./logoMarkWhite.png'/>   
        <h1 class='heading'>Welcome to Educative Answers</h1>
        <h2 class="heading">Dummy text</h2>
        <p class="about">Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Nunc sit amet sem malesuada, sollicitudin metus vitae, tincidunt magna. 
            Praesent nec nisi sit amet augue dignissim pulvinar sit amet sit amet quam. 
            Vestibulum eleifend odio ac pulvinar sollicitudin. Ut vestibulum purus turpis, 
            ut ultrices eros semper eget. Duis dignissim purus at sagittis blandit. Fusce 
            at enim vel dui euismod auctor. Vivamus lectus tellus, fermentum ac molestie non, 
            eleifend eget sem. Sed id elit at urna varius fringilla.</p>
    </div>
    
</body>
</html>

Explanation

Inside iframe.html:
- Line 13: We use the the <iframe> tag to render our scene.
Inside styles.css:
- Lines 1–10: These lines contain the properties as discussed in the syntax above.
Inside three.html:
- This file contains the same scene we created to use as a background in the previous example.
- Lines 36–37: The renderer in this scene is not given the HTML canvas as an argument so it creates its own, which can be accessed using the renderer object’s .domElement() method. We then append it to the DOM using the document.body.appendChild() method.