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.
<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:
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;
}
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.top:0; left:0
styling attributes position the canvas to the top left corner of the screen after its position
is set to fixed
.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.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.
<iframe>
tagAnother method to use the three.js code as background is to use the <iframe>
tag.
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;
}
src
, an attribute for <iframe>
tag, we specify the name of the HTML file containing the three.js code.width
and height
properties ensure that the <iframe>
fills the entire page.left
and top
properties ensure that the <iframe>
is positioned at the top left of the screen.z-index
is also set to -1
. This moves the <iframe>
towards the back of the page.pointer-events
property is to block interactions with the three.js page if any exist.Let's look at an example that uses three.js
as a background, implemented using the <iframe>
tag.
<!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>
iframe.html
:
<iframe>
tag to render our scene.styles.css
:
three.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.Note: To read more on the
appendChild()
method, follow this link.
Free Resources