Skip to content

Instantly share code, notes, and snippets.

@funwithtriangles
Created March 26, 2020 13:21
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save funwithtriangles/4eb00019747cbc1fee7261ae35721625 to your computer and use it in GitHub Desktop.
Save funwithtriangles/4eb00019747cbc1fee7261ae35721625 to your computer and use it in GitHub Desktop.
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