Is it possible to use Three.js website?

I'm going to add another answer. I would use

canvas {
  width: 100vw;
  height: 100vh;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -9999;
}

      

        
        
        
      

    

That's why:

Many people use it canvas { width: 100%; height: 100% }

, but it probably doesn't make a lot of sense. You don't want the canvas to be 100% of the body. You want it to be 100% screen / window. What it does canvas { width: 100vw; height: 100vh; }

. This is 100% of the viewport width and viewport height.

This means you don't have to set the body to height: 100%, which also doesn't make sense, especially if the page is above the window / screen.

display: block;

fixes some problems with scrollbars in certain browsers. It is used on some pages html, body { overflow: none; }

, but again it doesn't make sense if your page ends up being above the screen / window.

position: fixed;

makes the canvas position relative to the top of the window so it won't scroll off the page. If you are using position: absolute

then canvas will scroll from top if page is above screen / window. For example this page .

top: 0; left 0;

places it in the upper left corner. Without this, it will default to the default position that is inside the body margins. This is often solved by installing body { margin: 0; }

, but usually it means that you need some other container to add the field back, otherwise normal content will be positioned along the edge of the window.

z-index: -9999;

exists to try to pull it back than anything else, only if the page itself uses some negative values ​​for z-index

Here's an example as snippet

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);

var canvas = document.querySelector("canvas");
var renderer = new THREE.WebGLRenderer({canvas: canvas});
renderer.setClearColor(0xF0F0F0);

var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({ 
  color: 0x00ff00, 
  wireframe: true,
});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 1;

function resize() {
  var width = canvas.clientWidth;
  var height = canvas.clientHeight;
  if (width != canvas.width || height != canvas.height) {
    renderer.setSize(width, height, false);
    camera.aspect = width / height;
    camera.updateProjectionMatrix();
  }
}

function render(time) {
    time *= 0.001;
    resize();
    cube.rotation.x = time;
    cube.rotation.y = time * 0.31;
	renderer.render(scene, camera);
	requestAnimationFrame(render);
}
render();
      

        
        
        
      

    

canvas {
  width: 100vw;
  height: 100vh;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -9999;
}
      

        
        
        
      

    

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r77/three.min.js"></script>

<canvas></canvas>
<div>
  some content that is in front of the canvas
</div>
      

        
        
        
      

    

And here's an example outside SO so you can view it in a more complete size.

iframe

also works

Note that there is a problem that if your canvas animation is interactive, the elements in front of the canvas will contain mouse / touch events. There is no easy solution that I know of. You can mark everything except canvas / iframe like pointer-events: none

and mark canvas / iframe as pointer-events: auto

, but then you run into the problem that the text on your page cannot be selected and the links cannot be clicked. Then you can tell the tags <a>

are tagged pointer-events: auto

, so the links work, but I'm sure there will be problems here and there, depending on what information is on your page (trying to copy an email address or a location address, etc. ...)

One note: most of the three .js examples are structured differently (less flexible) by referencing window.innerWidth

and window.innerHeight

and for whatever reason, placing the content in a div with id="canvas"

.

Here is a snippet that uses this structure. There's a few more lines of code, redundant calls to renderer.setSize

and setting the camera aspect in 2 places (not very DRY), but as far as Q&A is concerned, the only difference is #canvas

instead of canvas

like CSS for the size of the div instead of the canvas.

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

var renderer = new THREE.WebGLRenderer();
document.getElementById("canvas").appendChild(renderer.domElement);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xF0F0F0);

var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({ 
  color: 0x00ff00, 
  wireframe: true,
});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 1;

function onResize() {
  renderer.setSize(window.innerWidth, window.innerHeight);
  
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
}

window.addEventListener('resize', onResize);

function render(time) {
    time *= 0.001;
    cube.rotation.x = time;
    cube.rotation.y = time * 0.31;
	renderer.render(scene, camera);
	requestAnimationFrame(render);
}
render();
      

        
        
        
      

    

#canvas {
  width: 100vw;
  height: 100vh;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -9999;
}
      

        
        
        
      

    

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r77/three.min.js"></script>

<div id="canvas"></div>
<div>
  some content that is in front of the canvas
</div>