Three.js作为网站的背景可能吗？

Question

我一直在考虑使用three.js 在网站上进行有趣的实验。我想使用当前的实验（我已经有了它的代码）并将其用作我网站的背景。

有人知道怎么做吗？

我在这里看到它完成了：http : //janjorissen.be/

三个JS API：https : //github.com/mrdoob/three.js/wiki/API-Reference

Answer 1

我要添加另一个答案。我会用

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

原因如下：

很多人使用，canvas { width: 100%; height: 100% }但这可以说没有多大意义。你不希望画布是身体的 100%。你想要它 100% 的屏幕/窗口。这就是canvas { width: 100vw; height: 100vh; }它的作用。它是视口宽度和视口高度的 100%。

这意味着您不需要将 body 设置为 height: 100% 这也没有意义，尤其是当页面高于窗口/屏幕时

display: block;修复了某些浏览器上滚动条的一些问题。有些页面会使用，html, body { overflow: none; }但如果您的页面最终需要比屏幕/窗口高，那么这又没有意义。

position: fixed;使画布位置相对于窗口顶部，因此它不会随页面滚动。如果您使用，position: absolute那么如果页面高于屏幕/窗口，画布将从顶部滚动。例如这个页面。

top: 0; left 0;把它放在左上角。没有它，它将默认为它的默认位置，即在身体的边距内。通常这是通过设置来解决的，body { margin: 0; }但通常这意味着您最终需要一些其他容器来添加边距，否则您的正常内容将被定位在窗口的边缘。

z-index: -9999; 是否有尝试强制它比其他任何东西都更远，以防万一页面本身使用了一些负值 z-index

这是一个示例作为片段

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

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

而且这里有一个例子外SO以便您可以查看它更容易全尺寸。

iframe工作也一样

请注意，如果您的画布动画是交互式的，那么画布前面的元素会消耗鼠标/触摸事件。我知道没有简单的解决方案。您可以将除画布/iframe 之外的所有内容pointer-events: none标记为，并将画布/iframe 标记为，pointer-events: auto但随后您会遇到无法选择页面上的文本且无法单击任何链接的问题。然后，您可以说设置<a>标签以pointer-events: auto使链接有效，但我确信这里和那里都会出现问题，具体取决于您页面上的信息（尝试复制电子邮件地址或位置地址等...）

一注：大多数three.js所示例由参考结构不同的（不太灵活）window.innerWidth和window.innerHeight并把画布一个div里面有id="canvas"某种原因。

这是使用该结构的片段。还有几行代码，renderer.setSize在 2 个地方（不是很 DRY）有多余的调用和设置相机方面，但就这个问答而言，唯一的区别是#canvas而不是canvas作为 CSS 来调整 div 而不是画布的大小。

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

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

Answer 2

通常我使用 iframe 来实现这一点。因此，您不会与基页发生冲突。

<style>
iframe {
    z-index : -9999;
    position: absolute;
    top : 0;
    left    : 0;
    width   : 100%;
    height  : 100%;
    margin  : 0;
    padding : 0;
}
</style>
<iframe src="http://example.com/"></iframe> 

一个例子 https://github.com/jeromeetienne/www.jetienne.com/blob/master/index-webgl.html#L128为生活来源 http://jetienne.com/index-webgl.html代码