Three.js Video Hintergrund Statische Kamera

Ich versuche gerade eine Webseite zu erstellen, die einen Videohintergrund, aber ein bewegliches/interaktives WebGL Element oder obj im Vordergrund hat.Three.js Video Hintergrund Statische Kamera

Die Kamera wird statisch sein, aber das 3D-Objekt im Vordergrund soll sich bewegen. Ich habe versucht, ein CSS-Video-Hintergrund-Tutorial zu machen, und es funktioniert, aber das Video ist im Vordergrund statt des 3D-Objekts.

Das folgende ist mein HTML:

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> 
     <link rel="stylesheet" href="style.css"> 
     <style> 
      body { 
       margin: 0px; 
       background-color: #000000; 
       overflow: hidden; 
         } 
     </style> 
    </head> 
    <body> 
     <div class="container"> 
     <video poster="poster.png" autoplay="true" loop> 
      <source src="vine.mp4" type="video/mp4"> 
      <source src="vine.webm" type="video/webm"> 
      </video> 
     </div> 

     <script src="three.min.js"></script> 

     <script> 
      var camera, scene, renderer; 
      var mesh; 
      init(); 
      animate(); 
      function init() { 
       camera = new THREE.PerspectiveCamera(70, window.innerWidth/window.innerHeight, 1, 1000); 
       camera.position.z = 400; 
       scene = new THREE.Scene(); 
       var texture = new THREE.TextureLoader().load('crate.gif'); 
       var geometry = new THREE.BoxBufferGeometry(200, 200, 200); 
       var material = new THREE.MeshBasicMaterial({ map: texture }); 
       mesh = new THREE.Mesh(geometry, material); 
       scene.add(mesh); 
       renderer = new THREE.WebGLRenderer(); 
       renderer.setPixelRatio(window.devicePixelRatio); 
       renderer.setSize(window.innerWidth, window.innerHeight); 
       document.body.appendChild(renderer.domElement); 
       // 
       window.addEventListener('resize', onWindowResize, false); 
      } 
      function onWindowResize() { 
       camera.aspect = window.innerWidth/window.innerHeight; 
       camera.updateProjectionMatrix(); 
       renderer.setSize(window.innerWidth, window.innerHeight); 
      } 
      function animate() { 
       requestAnimationFrame(animate); 
       mesh.rotation.x += 0.005; 
       mesh.rotation.y += 0.01; 
       renderer.render(scene, camera); 
      } 
     </script> 

    </body> 
</html>

Und dann die CSS, die am Anfang verwiesen wird, ist:

body, html { 
margin: 0; 
padding: 0; 
} 

video { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    min-width: 100%; 
    min-height: 100%; 
    width: auto; 
    height; auto; 
}

Vielleicht bin ich Missverständnis, wie HTML, CSS und Three.js Werke aber ich würde jede Hilfe schätzen, die ich bekommen kann. Vielen Dank.

Quelle

2017-09-09 B Sc.

Sie möchten die three.js-Leinwand über dem Video und möchten, dass der Renderer einen transparenten Hintergrund hat.

In Ihrem CSS setzen

video { z-index: -1; }

Und für einen transparent background, Set

renderer = new THREE.WebGLRenderer({ alpha: true });

three.js r.87

Quelle

2017-09-09 05:28:39 WestLangley

Three.js Video Hintergrund Statische Kamera

Antwort

Verwandte Themen