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% } canvas { width: 100%; height: 100% }但這毫無意義。 您不希望畫布占主體的100％。 您希望它到屏幕/窗口的100％。 這就是canvas { width: 100vw; height: 100vh; } canvas { width: 100vw; height: 100vh; } canvas { width: 100vw; height: 100vh; } 。 它是視口寬度和視口高度的100％。

這意味着您無需將正文設置為高度：100％也沒有意義，尤其是當頁面比窗口/屏幕高時

display: block; 修復了某些瀏覽器上滾動條的一些問題。 有些頁面使用html, body { overflow: none; } html, body { overflow: none; }但是如果您的頁面最終需要比屏幕/窗口高，那也是沒有意義的。

position: fixed; 使畫布相對於窗口頂部的位置，使其不會隨頁面滾動。 如果您使用position: absolute那么如果頁面比屏幕/窗口高，則畫布將從頂部滾動。 例如此頁面 。

top: 0; left 0; 將其放在左上方。 否則，它將默認為位於身體邊緣內的默認位置。 通常，這可以通過設置body { margin: 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的工作也是如此

請注意，存在一個問題，如果您的畫布動畫是交互式的，則畫布前面的元素會吞噬鼠標/觸摸事件。 我沒有一個簡單的解決方案。 您可以將除canvas / iframe以外的所有內容都標記為pointer-events: none並且將canvas / iframe標記為pointer-events: auto但隨后遇到的問題是無法選擇頁面上的文本，也無法單擊任何鏈接。 然后，您可以說將<a>標記設置為具有pointer-events: auto使鏈接起作用，但是我確定這里和那里都會有問題，具體取決於頁面上的信息（嘗試復制電子郵件地址或位置）地址等）。

需要注意的是：通過引用window.innerWidth和window.innerHeight並出於某種原因將畫布放在具有id="canvas"的div內，大多數Three.js示例的結構不同（靈活性較差）。

這是使用該結構的代碼段。 還有更多的代碼行，對renderer.setSize冗余調用，以及將相機#canvas設置在2個位置（不是很干），但就此問與答而言，唯一的區別是#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> 

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

遵循threejs.org上非常基本的示例（ 此處 ），我只需要將canvas樣式部分更改為：

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

這樣就將畫布移到了背景上。

Answer 4

這不是實際的背景，而是顯示動畫的100％寬度/高度元素，其余內容使用z-index或類似元素在該假背景之上“升高”。