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

【问题标题】：How to embed YouTube video without CSS3DRenderer in three.js如何在 three.js 中嵌入没有 CSS3DRenderer 的 YouTube 视频
【发布时间】：2016-08-20 04:59:26
【问题描述】：

是否可以在 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;
}

【问题讨论】：

标签： three.js google-cardboard

【解决方案1】：

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

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

【讨论】：

我只是在 threex.videotexture 中传递跨域 url('myurl.com/img/videos/sample.mp4')。但是视频没有播放。
这是我目前修改的代码。 var canPlayMp4 = document.createElement('video'); var url = "myurl.com/img/videos/sample.mp4"; var videoTexture=new THREEx.VideoTexture(url) video=videoTexture.video; video.setAttribute('crossorigin', ''); videoTexture.texture.minFilter = THREE.LinearFilter; videoTexture.texture.magFilter = THREE.LinearFilter; updateFcts.push(function(delta, now){ videoTexture.update(delta, now) })
对不起，我没空，我看到你发布了另一个问题（stackoverflow.com/questions/36883592/…），希望对你有所帮助
试试：video.setAttribute('crossorigin', 'anonymous');
或者：video.crossOrigin = "anonymous";

【解决方案2】：

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

您需要为您的 Web 应用添加服务器部分。我使用 nodejs。

这是程序：

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

现在你可以为所欲为。

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

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

【讨论】：