Skip to content

Instantly share code, notes, and snippets.

@funwithtriangles
Created March 26, 2020 13:21
Embed
What would you like to do?
Centering a fullscreen three.js video texture
import * as THREE from 'three'
const video = document.createElement('video')
export const vidTexture = new THREE.VideoTexture(video)
vidTexture.center.set(0.5, 0.5)
const resize = () => {
const wWidth = document.body.offsetWidth
const wHeight = document.body.offsetHeight
const vWidth = video.videoWidth
const vHeight = video.videoHeight
if (vWidth > vHeight) {
// Landscape
vidTexture.repeat.x = (wWidth / vWidth) * (vHeight / wHeight)
} else {
// Portrait
vidTexture.repeat.y = (vWidth / wWidth) * (wHeight / vHeight)
}
}
window.addEventListener('resize', resize)
video.addEventListener('loadedmetadata', resize)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment