Three.js Video Background Static Camera

Question

I am currently trying to create a webpage that has a video background but a moving/interactive WebGL element or obj in the foreground.

The camera will be static but the 3D object in the foreground is to be moving. I tried to do a CSS video background tutorial and it works but the video is in the foreground instead of the 3D object.

The following is my 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>

And then the css that is referenced in the beginning is:

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

Perhaps I am misunderstanding how HTML, CSS, and Three.js works but I would appreciate any help that I can get. Thank you.

score 0 · Accepted Answer · answered Sep 09 '17 at 05:28

You want the three.js canvas on top of the video, and you want the renderer to have a transparent background.

In your CSS, set

video { z-index: -1; }

And for a transparent background, set

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

three.js r.87

Three.js Video Background Static Camera

1 Answers1