Three.js over background

我使用three.js來渲染雪花效果。雪的作品，但似乎創建自己的低於頁面內容的div，而不是在身體的背景。Three.js over background

<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> 

</head> 
<body onload="init()"> 
<script type="text/javascript" src="js/ThreeCanvas.js"></script> 
<script type="text/javascript" src="js/Snow.js"></script> 
    <script> 

     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 < 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 < particles.length; i++) { 

       var particle = particles[i]; 
       particle.updatePhysics(); 

       with (particle.position) { 
        if (y < -1000) y += 2000; 
        if (x > 1000) x -= 2000; 
        else if (x < -1000) x += 2000; 
        if (z > 1000) z -= 2000; 
        else if (z < -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); 


     } 

</script> 
<h2> 
    THIS IS A TEST 
</h2> 
<p> 
Content here <br /> 

<p>&nbsp; <br /> 
<p>&nbsp; <br /> 


</body> 
</html>

看起來好像雪出現在這裏。我試圖把它在它自己的DIV，並稱格到我的CSS等

這似乎是

正在創造自己的格但即使我改變（「DIV」）到別的在我的CSS或使用GetElemmentByID不起作用。

來源

2013-12-18 Brandon Scott

您應該使用CSS定位div以確保它不在文檔的正常流程（佈局）中。

例如：

#snowflake-div { 
    position:absolute; 
    top:0; 
    left:0; 
}

這將發生在從左上角開始的任何內容three.js所雪花的動畫。根據你的div元素的大小和期望的影響，這應該做的伎倆。

來源

2013-12-19 12:11:07 Anselan

我想，（見下面的代碼註釋），但由於 –

如果我正確理解你的話，你想避免添加aditional'div'元素到你的html。要做到這一點，而不是：

container = document.createElement('div'); 
document.body.appendChild(container); 
renderer = new THREE.CanvasRenderer(); 
container.appendChild(renderer.domElement);

你應該這樣做：

renderer = new THREE.CanvasRenderer(); 
document.body.appendChild(renderer.domElement);

來源

2013-12-19 12:46:09

，打破了代碼@Marko –

Three.js over background

回答

相關問題