Question

我目前正在尝试创建一个具有视频背景但前景中移动/交互式WebGL元素或obj的网页。

相机将是静态的，但前景中的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是：

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

也许我误解了HTML，CSS和Three.js是如何工作的，但我很感激我能得到的任何帮助。谢谢。

Answer 1

您希望视频顶部有three.js画布，并且您希望渲染器具有透明背景。

在CSS中，设置

video { z-index: -1; }

对于transparent background，请设置

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

three.js r.87

Three.js视频背景静态相机

1 个答案: