Question

是否有可能在没有CSS3DRenderer的情况下将YouTube视频嵌入three.js？我正在使用纸板效果，所以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视频代码中嵌入YouTube视频。如果您在互联网上看一下，您会发现很多方法可以做到这一点。这可能对您有用：YouTube URL in Video Tag

完成此工作后，您需要将其转换为function FallBox(x, side, parent){ this.x = x; this.parent = parent || $("body"); this.side = side || Math.random()*200; this.createBox(); this.fall(); } FallBox.prototype.createBox = function(){ box = document.createElement('div'); $box = $(box); // I hate brackets $box.addClass("box"); $box.css({ width: this.side+"px", height: this.side+"px", left: this.x+"px", top: "-"+(this.side+5)+"px" }); this.box = $box; } FallBox.prototype.fall = function(){ this.parent.append(this.box); this.box.addClass("fall"); }，以便将其映射到网格并使用WebGL渲染器。这有一个THREE.Texture扩展名：threex.videotexture

Answer 2

在根茎中不可能。 Youtube.com将不接受带有资产的任何跨域工作。唯一的方法是将youtube API与iframe一起使用，但我采取了一些措施以使其成为可能。

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

这是过程：

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

现在您可以做任何您想做的事。

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

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

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

2 个答案: