JSFiddle - React, Tailwind, and code Playground
HTML
<canvas id="c"></canvas>
<script src="https://threejsfundamentals.org/threejs/resources/threejs/r102/three.min.js"></script>
CSS
body {
margin: 0;
}
#c {
width: 100vw;
height: 100vh;
display: block;
}
JavaScript
// Three.js - Textured Cube
// from https://threejsfundamentals.org/threejs/threejs-textured-cube.html
'use strict';
/* global THREE */
function main() {
const canvas = document.querySelector('#c');
const renderer = new THREE.WebGLRenderer({canvas: canvas});
const fov = 75;
const aspect = 2; // the canvas default
const near = 0.1;
const far = 5;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.z = 2;
const scene = new THREE.Scene();
const boxWidth = 1;
const boxHeight = 1;
const boxDepth = 1;
const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);
const cubes = []; // just an array we can use to rotate the cubes
const videoElement = document.createElement('video');
videoElement.src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/175382/SampleVideo_1280x720_1mb.mp4";
videoElement.crossOrigin = 'anonymous';
videoElement.loop = true;
videoElement.muted = true;
videoElement.play();
const texture = new THREE.VideoTexture(videoElement)
const material = new THREE.MeshBasicMaterial({
map: texture
});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
cubes.push(cube); // add to our list of cubes to rotate
function resizeRendererToDisplaySize(renderer) {
const canvas = renderer.domElement;
const width = canvas.clientWidth;
const height = canvas.clientHeight;
const needResize = canvas.width !== width || canvas.height !== height;
if (needResize) {
renderer.setSize(width, height, false);
}
return needResize;
}
function render(time) {
time *= 0.001;
if (resizeRendererToDisplaySize(renderer)) {
const canvas = renderer.domElement;
camera.aspect = canvas.clientWidth / canvas.clientHeight;
camera.updateProjectionMatrix();
}
cubes.forEach((cube, ndx) => {
const speed = .2 + ndx * .1;
const rot = time * speed;
cube.rotation.x = rot;
...