How to move video behind the scene?

Questions
, ,
1

Hi, I’m very new to Three.js and I’m trying to use a video as my background and then have a loaded glTF in the foreground. I’ve been trying to get the video to go behind the scene, however im not sure what im doing and the scene is rendered behind the video. Here is my code:

<?php
session_start();
	
	include("connection.php");
	include("functions.php");

	$user_data = check_login($con);
?>
<!DOCTYPE html>
<html>
<html lang="en">
	<head>
		<title>A Pirate's Paradise</title>
		<link rel="shortcut icon" href="favicon.ico">
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<link type="text/css" rel="stylesheet" href="main.css">
<style>
	* {
	  box-sizing: border-box;
	}

	body {
	  margin: 0;
	  font-family: Arial;
	  font-size: 17px;
	}

	#myVideo {
	  position: fixed;
	  right: 0;
	  bottom: 0;
	  min-width: 100%; 
	  min-height: 100%;
	}

	.content {
	  position: fixed;
	  bottom: 0;
	  color: #f1f1f1;
	  width: 100%;
	  padding: 20px;
	}

</style>
</head>
<body>
	<div id='container'>
	<video autoplay muted loop id="myVideo">
	  	<source src="videos/emptyisland.mp4" type="video/mp4">
	</video>
	</div>
	<div class="content">
		<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>

		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js"
				}
			}
		</script>

		<script type="module">

			import * as THREE from 'three';

			import Stats from './jsm/libs/stats.module.js';

			import { OrbitControls } from './jsm/controls/OrbitControls.js';
			import { RoomEnvironment } from './jsm/environments/RoomEnvironment.js';

			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
			import { DRACOLoader } from './jsm/loaders/DRACOLoader.js';

			let mixer;

			const clock = new THREE.Clock();
			const container = document.getElementById( 'container' );

			const renderer = new THREE.WebGLRenderer({ alpha: true });
			renderer.setClearColor(0xffffff, 0);
			renderer.setPixelRatio( window.devicePixelRatio );
			renderer.setSize( window.innerWidth, window.innerHeight );
			renderer.outputEncoding = THREE.sRGBEncoding;
			container.appendChild( renderer.domElement );

			const pmremGenerator = new THREE.PMREMGenerator( renderer );

			const scene = new THREE.Scene();
			scene.environment = pmremGenerator.fromScene( new RoomEnvironment(), 0.04 ).texture;

			const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 2000);
			camera.position.set( 5, 2, 8 );

			const controls = new OrbitControls( camera, renderer.domElement );
			controls.target.set( 0, 0.5, 0 );
			controls.update();
			controls.enablePan = false;
			controls.enableDamping = true;

			const dracoLoader = new DRACOLoader();	
			dracoLoader.setDecoderPath( 'js/libs/draco/gltf/' );

			const loader = new GLTFLoader();
			loader.setDRACOLoader( dracoLoader );
			loader.load( 'models/gltf/piratewalk.glb', function ( gltf ) {

				const model = gltf.scene;
				model.position.set( 1, 1, 1 );
				model.scale.set( 1, 1, 1 );
				scene.add( model );

				mixer = new THREE.AnimationMixer( model );
				mixer.clipAction( gltf.animations[ 0 ] ).play();

				animate();

			}, undefined, function ( e ) {

				console.error( e );

			} );


			window.onresize = function () {

				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();

				renderer.setSize( window.innerWidth, window.innerHeight );

			};


			function animate() {

				requestAnimationFrame( animate );

				const delta = clock.getDelta();

				mixer.update( delta );

				controls.update();

				renderer.render( scene, camera );

			}


		</script>
		Hello, <?php echo $user_data['user_name']; ?>
		<br>
		<a href="logout.php">Logout</a>
	</div>
</body>

</html>

I found other solutions where the user had the issue of the scene rendering in front of the video, and therefore used a transparent canvas background, ive done this but it doesnt fix my issue. Any help would be greatly appreciated, thanks.

2

Have you considered to just create an instance of THREE.VideoTexture with your video and then apply it to Scene.background? Live example: Edit fiddle - JSFiddle - Code Playground

2 Likes
3

thanks! works great!