如何在 three.js 中嵌入没有 CSS3DRenderer 的 YouTube 视频

Question

是否可以在 three.js 中嵌入没有 CSS3DRenderer 的 YouTube 视频？我使用的是硬纸板效果，所以CSS3DRenderer在这里不起作用。

这是我目前使用的代码。但是我面临跨域问题

video = document.createElement('video');
video.autoplay  = true;
video.src = 'http://myurl.com/videos/video.mp4';
newcanvas = document.createElement('canvas');
context = newcanvas.getContext('2d');
videoTexture = new THREE.Texture( newcanvas );
.....

在动画函数中我使用了下面的代码。

if (video.readyState === video.HAVE_ENOUGH_DATA ){
    context.drawImage(video,0, 0);
    if(videoTexture)
        videoTexture.needsUpdate = true;
}

Answer 1

首先，您需要将 YouTube 视频嵌入到 html 视频标签中。如果您在 Internet 上浏览一下，您会发现很多方法可以做到这一点。这可能对您有用：YouTube URL in Video Tag

完成这项工作后，您需要将其转换为 THREE.Texture，以便您可以将其映射到网格并使用 WebGL 渲染器。有一个 Three.js 扩展名：threex.videotexture

Answer 2

实际上是不可能的。 Youtube.com 不会接受任何具有这些资产的跨域工作。唯一的方法是将 youtube API 与 iframe 一起使用，但我采取了一些措施来实现这一点。

您将需要为您的网络应用程序添加服务器部分。我用的是nodejs.

这是程序：

使用经典google，youtubeAPilogin/search
进行搜索并收集搜索结果数据（最重要的是videoId）
保存到您自己的服务器
从网络应用调用您的新路线。

现在你可以随心所欲了。

直接演示link：https://maximumroulette.com:3000

https://github.com/zlatnaspirala/vue-typescript-starter

如何在 three.js 中嵌入没有 CSS3DRenderer 的 YouTube 视频

How to embed YouTube video without CSS3DRenderer in three.js

three.js

google-cardboard