三.js作为网站背景可能

Three.js as background of website possible?

本文关键字：背景 网站 js      更新时间：2023-09-26

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

有人知道怎么做吗？

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

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

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

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

这意味着您不需要将正文设置为高度：100%，这也没有意义，特别是如果页面高于窗口/屏幕

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

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

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

z-index: -9999;在那里尝试强制它比其他任何东西都更远，以防页面本身使用一些负值来z-index

下面是一个示例作为代码段

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>

这是SO之外的示例，因此您可以更轻松地查看全尺寸。

iframe的工作也是如此

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

需要注意的是：大多数三个.js示例的结构不同(不太灵活(，通过引用window.innerWidth和window.innerHeight并将画布放入带有id="canvas"的div中，出于某种原因。

下面是使用该结构的代码片段。还有几行代码，对renderer.setSize的冗余调用以及在2个地方设置相机方面(不是很D.R.Y.(，但就本问答而言，唯一的区别是#canvas而不是canvas作为CSS来调整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;
}
<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>

通常我使用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#L128http://jetienne.com/index-webgl.html 为生活代码

这不是

实际的背景，而是显示动画的 100% 宽度/高度元素，其余内容使用假背景上方的z-index或类似内容"提升"。

按照 threejs.org 上非常基本的示例(这里(，我只需要将画布样式部分更改为：

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

这会将画布移动到背景中。

相关文章：