Video Textures

Muestra vídeos sobre markers trackeados.

Ejemplo con Three.js

// Crear elemento de vídeo
const video = document.createElement('video')
video.src = './video.mp4'
video.loop = true
video.muted = true
video.playsInline = true

// Crear textura de vídeo
const videoTexture = new THREE.VideoTexture(video)
videoTexture.minFilter = THREE.LinearFilter
videoTexture.magFilter = THREE.LinearFilter
videoTexture.colorSpace = THREE.SRGBColorSpace

// Crear plano con la textura
const plane = new THREE.Mesh(
  new THREE.PlaneGeometry(1, 1),
  new THREE.MeshBasicMaterial({
    map: videoTexture,
    side: THREE.DoubleSide,
    toneMapped: false
  })
)

// Añadir al adapter
adapter.addARContent('miMarker', plane, { scale: 1, flipX: true })

// Reproducir/pausar según el tracking
tracker.on('found', (id) => {
  if (id === 'miMarker') video.play()
})

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

Notas importantes

Configuración de textura

• Siempre usa colorSpace = THREE.SRGBColorSpace en la textura
• Siempre usa toneMapped = false en el material
• Usa flipX: true si el vídeo aparece en espejo

Autoplay

Los navegadores bloquean el autoplay de vídeos con sonido. Inicia el vídeo como muted y ofrece al usuario un botón para activar el audio si es necesario.