Skip to content

Instantly share code, notes, and snippets.

@user01

user01/index.html

Last active January 31, 2022 05:20
Show Gist options
  • Save user01/65cbe8f15fe6f338f709dbc1b311575f to your computer and use it in GitHub Desktop.
Save user01/65cbe8f15fe6f338f709dbc1b311575f to your computer and use it in GitHub Desktop.
Download ZIP
three.js webgl - Video Cube UV Mapping
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - Video Cube UV Mapping</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
font-family: Monospace;
background-color: #000000;
margin: 0px;
overflow: hidden;
}
#info {
color: #fff;
position: absolute;
top: 10px;
width: 100%;
text-align: center;
z-index: 100;
display: block;
}
a {
color: red
}
#container {
width: 100%;
height: 100vh;
}
form {
color: white;
}
div#controls {
position: absolute;
right: 2px;
top: 2px;
}
</style>
</head>
<body>
<div id="info">
<a href="http://threejs.org" target="_blank">three.js</a> - Video Cube UV Mapping <a href="https://codex10.com"
target="_blank">codex10</a>
</div>
<video id="video" autoplay loop style="display:none">
<source src="sintel.mp4" type='video/mp4'>
</video>
<div id="container"></div>
<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r77/three.min.js"></script>
<script src="stats.min.js"></script>
<script src="index.js"></script>
</body>
</html>
Raw
index.js
var camera;
var scene;
var renderer;
var mesh;
var videoTexture;
var video;
var stats;
init();
animate();
function init() {
stats = new Stats();
document.body.appendChild(stats.dom);
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
var light = new THREE.DirectionalLight(0xffffff);
light.position.set(0, 1, 1).normalize();
scene.add(light);
var geometry = new THREE.CubeGeometry(10, 10, 10);
video = document.getElementById( 'video' );
videoTexture = new THREE.VideoTexture(video);
videoTexture.minFilter = THREE.LinearFilter;
videoTexture.magFilter = THREE.LinearFilter;
videoTexture.format = THREE.RGBFormat;
var material = new THREE.MeshPhongMaterial({ map: videoTexture });
var face1 = [new THREE.Vector2(0, .5), new THREE.Vector2(.3333, .5), new THREE.Vector2(.3333, 1), new THREE.Vector2(0, 1)];
var face2 = [new THREE.Vector2(.3333, .5), new THREE.Vector2(.6666, .5), new THREE.Vector2(.6666, 1), new THREE.Vector2(.3333, 1)];
var face3 = [new THREE.Vector2(.6666, .5), new THREE.Vector2(1, .5), new THREE.Vector2(1, 1), new THREE.Vector2(.6666, 1)];
var face4 = [new THREE.Vector2(0, 0), new THREE.Vector2(.3333, 0), new THREE.Vector2(.3333, .5), new THREE.Vector2(0, .5)];
var face5 = [new THREE.Vector2(.3333, 0), new THREE.Vector2(.6666, 0), new THREE.Vector2(.6666, .5), new THREE.Vector2(.3333, .5)];
var face6 = [new THREE.Vector2(.6666, 0), new THREE.Vector2(1, 0), new THREE.Vector2(1, .5), new THREE.Vector2(.6666, .5)];
geometry.faceVertexUvs[0] = [];
geometry.faceVertexUvs[0][0] = [face1[0], face1[1], face1[3]];
geometry.faceVertexUvs[0][1] = [face1[1], face1[2], face1[3]];
geometry.faceVertexUvs[0][2] = [face2[0], face2[1], face2[3]];
geometry.faceVertexUvs[0][3] = [face2[1], face2[2], face2[3]];
geometry.faceVertexUvs[0][4] = [face3[0], face3[1], face3[3]];
geometry.faceVertexUvs[0][5] = [face3[1], face3[2], face3[3]];
geometry.faceVertexUvs[0][6] = [face4[0], face4[1], face4[3]];
geometry.faceVertexUvs[0][7] = [face4[1], face4[2], face4[3]];
geometry.faceVertexUvs[0][8] = [face5[0], face5[1], face5[3]];
geometry.faceVertexUvs[0][9] = [face5[1], face5[2], face5[3]];
geometry.faceVertexUvs[0][10] = [face6[0], face6[1], face6[3]];
geometry.faceVertexUvs[0][11] = [face6[1], face6[2], face6[3]];
mesh = new THREE.Mesh(geometry, material);
mesh.position.z = -50;
scene.add(mesh);
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('container').appendChild(renderer.domElement);
window.addEventListener('resize', onWindowResize, false);
render();
}
function animate() {
mesh.rotation.x += 0.02;
mesh.rotation.y += 0.01;
render();
requestAnimationFrame(animate);
}
function render() {
renderer.render(scene, camera);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
render();
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment