Skip to content

Instantly share code, notes, and snippets.

@ShaneBrumback

ShaneBrumback/threejs-examples-3d-rendering-youtube-videos.html

Last active April 30, 2025 01:43
Show Gist options
  • Save ShaneBrumback/3db6ee46cbd636adbc956a9472881222 to your computer and use it in GitHub Desktop.
Save ShaneBrumback/3db6ee46cbd636adbc956a9472881222 to your computer and use it in GitHub Desktop.
Download ZIP
Three.jsExamples 3D Rendering YouTube Videos
Raw
threejs-examples-3d-rendering-youtube-videos.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Threejs Examples - 3D Rendering YouTube Videos</title>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
background-color: black;
color: white;
margin: 0;
}
#blocker {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
</style>
</head>
<body>
<duv id="container"></duv>
<div id="blocker"></div>
<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"three": "../build/three.module.js",
"three/addons/": "../jsm/"
}
}
</script>
<script type="module">
import * as THREE from 'three';
import { TrackballControls } from 'three/addons/controls/TrackballControls.js';
import { CSS3DRenderer, CSS3DObject } from 'three/addons/renderers/CSS3DRenderer.js';
let camera, scene, renderer;
let controls;
function Element(id, x, y, z, ry) {
const div = document.createElement('div');
div.style.width = '480px';
div.style.height = '360px';
div.style.backgroundColor = '#000';
const iframe = document.createElement('iframe');
iframe.style.width = '480px';
iframe.style.height = '360px';
iframe.style.border = '0px';
iframe.src = ['https://www.youtube.com/embed/', id, '?rel=0'].join('');
div.appendChild(iframe);
const object = new CSS3DObject(div);
object.position.set(x, y, z);
object.rotation.y = ry;
return object;
}
const container = document.getElementById('container');
camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 5000);
camera.position.set(500, 500, 550);
scene = new THREE.Scene();
renderer = new CSS3DRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
let group = new THREE.Group();
group.add(new Element('67Ii__vPouE', 0, 0, 240, 0));
group.add(new Element('_n8Yb_j5E2o', 240, 0, 0, Math.PI / 2));
group.add(new Element('STRk1CWK8JQ', 0, 0, - 240, Math.PI));
group.add(new Element('mhuxhXU9PPY', - 240, 0, 0, - Math.PI / 2));
scene.add(group);
controls = new TrackballControls(camera, renderer.domElement);
controls.rotateSpeed = 4;
window.addEventListener('resize', onWindowResize);
// Block iframe events when dragging camera
const blocker = document.getElementById('blocker');
blocker.style.display = 'none';
controls.addEventListener('start', function () {
blocker.style.display = '';
});
controls.addEventListener('end', function () {
blocker.style.display = 'none';
});
animate();
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
requestAnimationFrame(animate);
controls.update();
renderer.render(scene, camera);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment