Three.js als hintergrund der website möglich?

Ich werde noch eine andere Lösung. Ich würde verwenden

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

Ist hier, warum:

Viele Menschen nutzen canvas { width: 100%; height: 100% } aber, dass wohl nicht viel Sinn machen. Sie wollen nicht die Leinwand, um 100% des Körpers. Sie wollen, dass es zu 100% der Bildschirm/Fenster. Das ist es, was canvas { width: 100vw; height: 100vh; } tut. Es ist 100% der viewport-Breite und die viewport-Höhe.

Bedeutet dies, dass Sie nicht brauchen, um die body auf height: 100%, was auch nicht sinnvoll wäre, vor allem, wenn die Seite größer als das Fenster/Bildschirm

display: block; behebt einige Probleme mit Scrollbalken auf bestimmte Browser. Einige Seiten verwenden html, body { overflow: none; } aber wieder, das macht keinen Sinn, wenn deine Seite landet, dass größer als der Bildschirm/Fenster.

position: fixed; lässt den canvas-position relativ zu der Oberseite des Fensters, damit es nicht zu scrollen mit der Seite. Wenn Sie position: absolute dann die Leinwand flimmert, wenn die Seite größer als der Bildschirm/Fenster. Zum Beispiel auf dieser Seite.

top: 0; left 0; bringt es auf den Links oben. Ohne, dass es standardmäßig der default-position ist innerhalb des Körpers Margen. Oft ist das Problem durch die Einstellung body { margin: 0; } aber in der Regel bedeutet das, dass Sie am Ende brauchen einige einen anderen Behälter, um einen Rand hinzuzufügen zurück in die sonst Ihr normales Gehalt bekommt, der sich an der Kante des Fensters.

z-index: -9999; ist es, zu versuchen zu zwingen, es weiter hinten, als irgendetwas anderes, nur für den Fall, die Seite selbst ist mit einigen negativen Werte für z-index

Hier ist ein Beispiel, wie ein snippet

JS:

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();

CSS:

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

HTML:

<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>

Und hier ist ein Beispiel draußen, SO so können Sie es leichter in voller Größe.

iframes so gut funktionieren

Beachten Sie, dass es das Problem, dass, wenn Sie Ihre Leinwand-animation und interaktive Elemente vor der Leinwand fressen die Maus/touch-events. Es gibt keine einfache Lösung, die ich kenne, für, die. Sie können markieren alles, aber das canvas - /iframe-als pointer-events: none und markieren Sie die Leinwand/iframe als pointer-events: auto aber dann Sie laufen in das Problem, dass kein text auf der Seite ausgewählt werden können und keine links angeklickt werden können. Man könnte dann sagen, setzen <a> tags zu haben pointer-events: auto so, dass links arbeiten, aber ich bin sicher, dass es Probleme hier und dort, je nachdem, welche Informationen auf Ihrer Seite (versuchen zu kopieren eine E-Mail-Adresse oder eine Adresse, etc...)

Ein Hinweis: die meisten three.js Beispiele sind strukturierte verschiedenen (weniger flexibel) durch verweisen auf window.innerWidth und window.innerHeight und setzen die canvas-Bereich innerhalb eines div mit einer id="canvas" aus irgendeinem Grund.

Hier ist ein Ausschnitt mit der Struktur. Es gibt mehrere Zeilen von code, redundante Aufrufe an renderer.setSize und Einstellung der Kamera-Aspekt an 2 stellen (nicht sehr D. R. Y.) aber, soweit dies F&Eine ist besorgt, der einzige Unterschied ist #canvas statt canvas als die CSS, um die Größe des div-statt der Leinwand.

JS:

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();

CSS:

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

HTML:

<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>

Folgende sehr einfache Beispiel auf threejs.org (hier), hatte ich nur ändern Sie die Leinwand-Stil-Abschnitt:

canvas {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -9999;
}

Bewegt die Leinwand, um den hintergrund.