Databases
StackOverflow2013
Postsdbo
POThree.js over background
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POThree.js over background
    text
    copied!<p>I am using the three.js to render a snow effect. The snow works but seems to create its own div below the content of the page and not over the background of the body. </p> <pre><code>&lt;meta charset="utf-8"&gt; &lt;meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /&gt; &lt;/head&gt; &lt;body onload="init()"&gt; &lt;script type="text/javascript" src="js/ThreeCanvas.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="js/Snow.js"&gt;&lt;/script&gt; &lt;script&gt; var SCREEN_WIDTH = window.innerWidth; var SCREEN_HEIGHT = window.innerHeight; var numberOfFlakes = 75; var allowMouseMove = false; var allowTouchMove = false; var container; var particle; var camera; var scene; var renderer; var mouseX = 0; var mouseY = 0; var windowHalfX = window.innerWidth / 2; var windowHalfY = window.innerHeight / 2; var particles = []; var particleImage; function init() { container = document.createElement('div'); document.body.appendChild(container); camera = new THREE.PerspectiveCamera(75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000); camera.position.z = 1000; scene = new THREE.Scene(); scene.add(camera); renderer = new THREE.CanvasRenderer(); renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT); var materials = []; var material; particleImage = new Image(); particleImage.src = 'img/ParticleSmoke.png'; material = new THREE.ParticleBasicMaterial({ map: new THREE.Texture(particleImage) }); materials.push(material); for (var i = 0; i &lt; numberOfFlakes; i++) { particle = new Particle3D(materials[Math.floor(materials.length * Math.random())]); particle.position.x = Math.random() * 2000 - 1000; particle.position.y = Math.random() * 2000 - 1000; particle.position.z = Math.random() * 2000 - 1000; particle.scale.x = particle.scale.y = 1; scene.add(particle); particles.push(particle); } container.appendChild(renderer.domElement); if (allowMouseMove) { document.addEventListener('mousemove', onDocumentMouseMove, false); } if (allowTouchMove) { document.addEventListener('touchstart', onDocumentTouchStart, false); document.addEventListener('touchmove', onDocumentTouchMove, false); } setInterval(loop, 1000 / 60); } function onDocumentMouseMove(event) { mouseX = event.clientX - windowHalfX; mouseY = event.clientY - windowHalfY; } function onDocumentTouchStart(event) { if (event.touches.length == 1) { event.preventDefault(); mouseX = event.touches[0].pageX - windowHalfX; mouseY = event.touches[0].pageY - windowHalfY; } } function onDocumentTouchMove(event) { if (event.touches.length == 1) { event.preventDefault(); mouseX = event.touches[0].pageX - windowHalfX; mouseY = event.touches[0].pageY - windowHalfY; } } // function loop() { for (var i = 0; i &lt; particles.length; i++) { var particle = particles[i]; particle.updatePhysics(); with (particle.position) { if (y &lt; -1000) y += 2000; if (x &gt; 1000) x -= 2000; else if (x &lt; -1000) x += 2000; if (z &gt; 1000) z -= 2000; else if (z &lt; -1000) z += 2000; } } camera.position.x += (mouseX - camera.position.x) * 0.05; camera.position.y += (-mouseY - camera.position.y) * 0.05; camera.lookAt(scene.position); renderer.render(scene, camera); } &lt;/script&gt; &lt;h2&gt; THIS IS A TEST &lt;/h2&gt; &lt;p&gt; Content here &lt;br /&gt; &lt;p&gt;&amp;nbsp; &lt;br /&gt; &lt;p&gt;&amp;nbsp; &lt;br /&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>It seems like the snow shows up here. I have tried putting it in it's own div, adding that div to my CSS etc</p> <p>It seems like the</p> <pre><code>container = document.createElement('div'); document.body.appendChild(container); </code></pre> <p>is creating its own div but even if i change ('div') to something else in my css or use the GetElemmentByID doesn't work.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload