Three.js 비디오 배경 정적 카메라

현재 비디오 배경이 있지만 포 그라운드에서 움직이는/대화식 WebGL 요소 또는 obj가있는 웹 페이지를 만들려고합니다.Three.js 비디오 배경 정적 카메라

카메라는 정적이지만 전경의 3D 물체가 움직입니다. CSS 비디오 배경 튜토리얼을 만들려고했지만 비디오가 3D 오브젝트 대신 포 그라운드에 있습니다.

내 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>

그리고 처음에 참조 된 CSS는 : 나는 어떻게 HTML, CSS 및 Three.js를 작품을 오해하고

아마도

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; 
}

하지만 내가 얻을 수있는 도움을 주시면 감사하겠습니다. 고맙습니다.

출처

2017-09-09 B Sc.

비디오 상단에 three.js 캔버스가 필요하고 렌더러가 투명한 배경을 원하게됩니다. 당신의 CSS에서

는

video { z-index: -1; }

그리고 transparent background에 대한

을 설정

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

three.js를 r.87

설정

출처

2017-09-09 05:28:39 WestLangley

Three.js 비디오 배경 정적 카메라

답변

관련 문제