Using 3D Content as a Website Background ~ Designing Websites with 3D Content (Three.js)

Using Three.js 3D Content as a Website Background (with Three.js[r145])

When creating a WebGLRenderer, setting alpha:true makes the canvas background transparent.

renderer = new THREE.WebGLRenderer({
  canvas:can,
  antialias:true,            // Enable antialiasing
  alpha: true,               // Make background transparent
  premultipliedAlpha: false, // Do not use premultiplied alpha
});

By adding the following to the CSS of the canvas that displays the 3D content, it will become the background.

  position:fixed;
  left:0;
  top:0px;
  z-index: -1;