gpt4 book ai didi

reactjs - 将视频播放器添加到带有控件的 GLB 模型

转载 作者:行者123 更新时间:2023-12-05 06:49:12 26 4
gpt4 key购买 nike

我正在尝试使用 Three.JS 在 GLB 模型网格中添加视频播放器。虽然这可以使用 VideoTexture 完成,但我正在尝试添加视频播放器默认具有的所有控件。

这是使用 VideoTexture 的代码片段:

let video = document.createElement( 'video' );
video.loop = true;
video.crossOrigin = 'anonymous';
video.muted = "muted";
video.load();
video.src = videoD;
video.controls = true

let texture = new THREE.VideoTexture( video );
texture.minFilter = THREE.NearestFilter;
texture.magFilter = THREE.LinearFilter;
texture.format = THREE.RGBFormat;
let material = new THREE.MeshBasicMaterial( { map : texture } );

// and then use this material as the material for the glb child mesh

上述方法的问题是我无法添加控件。我目前正在使用 react ,所以另一种方式是使用 HTML 组件并尝试加载它来代替网格,这是使用 react refs 的方法


<>
<primitive ref={stall_ref} object={glb.scene} />
<Html>
<ReactPlayer ref={react_player_ref} id="widget2" url='https://www.youtube.com/watch?v=ysz5S6PUM-U' />
</Html>
</>

然后使用这个ref来修改视频播放器的位置

// I'm actually not sure what I'm doing here

react_player_ref.current.position.copy(meshChild.position)
react_player_ref.current.quaternion.copy(meshChild.quaternion)
react_player_ref.current.matrix.copy(meshChild.matrix)
react_player_ref.current.matrixWorld.copy(meshChild.matrixWorld)
react_player_ref.current.scale.copy(meshChild.scale)
react_player_ref.current.rotation.set(meshChild.rotation)

最佳答案

我认为你最好的选择可能是用一堆平面自己构建一个 UI,然后使用 raycastinglibraries such as this注册点击。

由于您的 threeJS 视频纹理使用视频 dom 元素,因此应该可以使用 JavaScript 轻松控制它。

const DemoScene = () => {
const ref = useRef()

useEffect(() => {
// ...

// setup UI planes
const geometry = new THREE.PlaneGeometry(5, 20, 32)
const material = new THREE.MeshBasicMaterial({
color: 0xffff00,
side: THREE.DoubleSide
})
const playUIPlane = new THREE.Mesh(geometry, material)
scene.add(playUIPlane)

// ...

// setup raycasting, see documentation…
const raycaster = new THREE.Raycaster()
raycaster.setFromCamera(pointer, camera)
const intersects = raycaster.intersectObjects(scene.children)

// ...

// check if/which UI has been intersected
const video = ref.current
const { object } = intersects[0]

if (object === playUIPlane) video.play()
if (object === pauseUIPlane) video.pause()
if (object === incVolumeUIPlane) video.volume += 0.2

// ...
}, [ref])

return (
<>
<video ref={ref} width="320" height="240" controls loop>
<source src="movie.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
<canvas />
</>
)
}

关于reactjs - 将视频播放器添加到带有控件的 GLB 模型,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66622131/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com