css - Three.js CSS3D 渲染器 YouTube 问题

Question

我使用 CSS3D 渲染器在我的 three.js 应用程序中放置了一个 YouTube 视频，您可以在下面的 JSFiddle 中看到一个简化的示例。

我有两个问题：

1 - 视频在某些角度变黑。不知道为什么。

2 - YouTube API 的 div 处理导致问题：

• YouTube API 的工作原理是用 iframe 替换您制作的空白 div，但 API 不会处理遮挡视频的原始 div。（ JSFiddle 中的 div 是粉红色的）
• 我想出了一个 hacky 解决方案：使用 jquery 将 div 宽度设置为 0px。但是这个随机 div 的存在导致我的应用程序出现性能问题 - 摆脱它也摆脱了 YouTube div。任何对这些问题的任何见解都将不胜感激！

这是 JSFIDDLE：

https://jsfiddle.net/fractalfantasy/ed9fw57x/22/

   //THIS IS THE ANNOYING DIV (LINE 32)
   var videodiv = document.createElement('div');
   videodiv.style.width = '480px';
   videodiv.style.height = '360px';
   videodiv.style.backgroundColor = 'pink';
   videodiv.setAttribute("id", "videoframe");

   // THIS IS MY AWFUL HACK TO GET RID OF IT (LINE 147)
   $("div #videoframe").css("width", "0px");
   $("div #videoframe").css("height", "0px");
   $("div #videoframe").css("background-color", "yellow");

   $("iframe").css("width", "480px");
   $("iframe").css("height", "360px");
   $("iframe").css("background-color", "black");

标签： cssthree.jsyoutube-api