在 React 中，如何组合两个稍微偏移的视频来创建 3D 视频（立体 3D）？

Question

我同时录制了两个稍微水平偏移的视频，旨在将它们一起使用以形成要使用 3D 眼镜（不是红/蓝眼镜）观看的 3D 视频。这可以用 React + TypeScript 实现吗？

我听说可以在 Three.js 和 WebGL 中做到这一点，这都是我愿意探索的工具，但我想知道它是否像并排放置或通过画布操作覆盖视频一样简单？最好/推荐的方法是什么？

Answer 1

我从来没有做过这样的实现，如果我正确理解你以及你想要实现的目标，你可以尝试使用

StereoCamera

。

立体相机

有关设置和校准的更多信息，您可以在这篇文章中找到。

用视频重构的官方示例CodeSandbox

import React, { useEffect, useRef } from 'react'
import * as THREE from 'three'
import { StereoEffect } from 'three/examples/jsm/effects/StereoEffect.js'

const App: React.FC = () => {
  const containerRef = useRef<HTMLDivElement | null>(null)
  const videoRefs = useRef<HTMLVideoElement[]>([])

  useEffect(() => {
    if (!containerRef.current) return

    let camera: THREE.PerspectiveCamera
    let scene: THREE.Scene
    let renderer: THREE.WebGLRenderer
    let effect: StereoEffect

    function init() {
      camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 10000)
      camera.position.z = 2000

      scene = new THREE.Scene()
      scene.background = new THREE.Color(0x333333)

      const video1 = document.createElement('video')
      video1.src = 'https://cdn.pixabay.com/video/2021/11/30/99350-653447896_tiny.mp4' // Replace with your video path
      video1.crossOrigin = 'anonymous'
      video1.loop = true
      video1.muted = true
      video1.setAttribute('playsinline', '')
      video1.oncanplay = () => video1.play()
      videoRefs.current.push(video1)

      const video2 = document.createElement('video')
      video2.src = 'https://cdn.pixabay.com/video/2021/11/30/99350-653447896_tiny.mp4' // Replace with your video path
      video2.crossOrigin = 'anonymous'
      video2.loop = true
      video2.muted = true
      video2.setAttribute('playsinline', '')
      video2.oncanplay = () => video2.play()
      videoRefs.current.push(video2)

      const texture1 = new THREE.VideoTexture(video1)
      const texture2 = new THREE.VideoTexture(video2)

      const planeGeometry = new THREE.PlaneGeometry(800, 450)
      const planeMaterial1 = new THREE.MeshBasicMaterial({ map: texture1 })
      const planeMaterial2 = new THREE.MeshBasicMaterial({ map: texture2 })

      const videoPlane1 = new THREE.Mesh(planeGeometry, planeMaterial1)
      const videoPlane2 = new THREE.Mesh(planeGeometry, planeMaterial2)

      videoPlane1.position.set(-600, 0, 0)
      videoPlane2.position.set(600, 0, 0)

      scene.add(videoPlane1)
      scene.add(videoPlane2)

      renderer = new THREE.WebGLRenderer()

      if (!containerRef.current) return
      renderer.setSize(window.innerWidth, window.innerHeight)
      containerRef.current.appendChild(renderer.domElement)

      effect = new StereoEffect(renderer)
      effect.setSize(window.innerWidth, window.innerHeight)

      animate()
    }

    function animate() {
      camera.lookAt(scene.position)
      effect.render(scene, camera)
      requestAnimationFrame(animate)
    }

    init()

    return () => {
      if (renderer) {
        renderer.dispose()
      }
    }
  }, [])

  return <div ref={containerRef} />
}

export default App