Video Textures

Display videos on tracked markers.

Example with Three.js

// Create video element
const video = document.createElement('video')
video.src = './video.mp4'
video.loop = true
video.muted = true
video.playsInline = true

// Create video texture
const videoTexture = new THREE.VideoTexture(video)
videoTexture.minFilter = THREE.LinearFilter
videoTexture.magFilter = THREE.LinearFilter
videoTexture.colorSpace = THREE.SRGBColorSpace

// Create plane with the texture
const plane = new THREE.Mesh(
  new THREE.PlaneGeometry(1, 1),
  new THREE.MeshBasicMaterial({
    map: videoTexture,
    side: THREE.DoubleSide,
    toneMapped: false
  })
)

// Add to adapter
adapter.addARContent('myMarker', plane, { scale: 1, flipX: true })

// Play/pause based on tracking
tracker.on('found', (id) => {
  if (id === 'myMarker') video.play()
})

tracker.on('lost', (id) => {
  if (id === 'myMarker') video.pause()
})

Important notes

Texture configuration

• Always use colorSpace = THREE.SRGBColorSpace on the texture
• Always use toneMapped = false on the material
• Use flipX: true if the video appears mirrored

Autoplay

Browsers block autoplay of videos with sound. Start the video as muted and offer the user a button to enable audio if needed.