Question

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

有人知道怎么做吗？

三个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％。

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

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

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

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>

here's an example outside SO以便您可以更轻松地查看完整尺寸。

iframes work as well

请注意，如果画布动画是交互式的，那么画布前面的元素会占用鼠标/触摸事件。我知道没有简单的解决方案。您可以将该canvas / iframe标记为pointer-events: none，并将canvas / iframe标记为pointer-events: auto，但是您会遇到无法选择页面上没有文字且无法点击链接的问题。然后，您可以设置<a>代码设置为pointer-events: auto，以便链接正常工作，但我确定这里和那里会出现问题，具体取决于您网页上的信息（尝试复制电子邮件地址，或者位置地址等...）

一个注意事项：大多数three.js示例的结构不同（灵活性较差），引用window.innerWidth和window.innerHeight，并且由于某种原因将画布放在带有id="canvas"的div中。 / p>

这是使用该结构的代码段。还有几行代码，renderer.setSize的冗余调用以及将相机方面设置为2个位置（不是非常干），但就此Q＆amp; A而言，唯一的区别是#canvas而不是canvas {1}}作为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>

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生活代码

Answer 3

这不是实际的背景，而是显示动画的100％宽度/高度元素，其余内容使用z-index或类似于伪造背景的“提升”。

Answer 4

按照threejs.org（here）的基本示例，我只需将画布样式部分更改为：

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

将画布移动到背景中。

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

4 个答案: