Threejs youtube iframe在单击后禁用FirstPersonControl

我在CreateSecene（）中加载了一个youtube视频。视频加载并播放，但它禁用了我的FirstPersonControl。我尝试将单击事件同时附加到元素和iframe，但是我没有抓住事件。我的理论是我可以使用e.preventDefault（），但我不确定这是否有效。我正在使用CSS3DRenderer渲染CSS3D对象

在中，您可以启动youtube视频并仍然使用threejs控件。对我来说，在我点击youtube小部件后，我的键盘键都不工作了，我唯一能与之交互的就是youtube小部件，我的场景中没有其他对象

我真的不确定我的代码中显示了什么，这可能会导致问题

var YoutubePlane = function (id, x, y, z, ry) {
    let element = document.createElement('div')
    let width = '500px'
    let height = '400px'

    element.style.width = width;
    element.style.height = height;
    element.style.backgroundColor = '#ffffff'
    element.className = 'three-div'

    let iframe = document.createElement('iframe')
    // iframe.style.pointerEvents = "none";
    iframe.style.width = width
    iframe.style.height = height
    iframe.style.border = '0px'
    iframe.src = ['https://www.youtube.com/embed/', id, '?rel=0&controls=0'].join('')
    element.appendChild(iframe)

    let div = new THREE.CSS3DObject(element)
    div.position.set(x, y, z)
    div.rotation.y = ry
    div.name = "youtube"

    return div;
}

---

需要注意的一点是：当禁用键盘控件时，单击控件仍然有效（将摄影机向前移动）。

由于这是一个控件问题，因此提供将对象添加到场景的代码似乎有些奇怪。根据你的描述，这很好。当涉及子帧时，任何JavaScript应用程序中的鼠标事件都可能很棘手。您有可以共享的JSFIDLE或codepen吗？向文档中添加事件不应被窗口和框架焦点取代。控件是否以元素或窗口而不是文档为目标？Three.js默认在大多数控件类上使用Document，但您提到“my FirstPersonControl”，因此这里没有足够的信息。重复@Radio的优点：如果您需要有关此类特定问题的帮助，并且自己无法确定有问题的代码，您需要提供一个在线示例，我们可以看一下。@Radio我试图制作一个代码笔，但它没有加载CSS3DRenderer。我用2个渲染器加载2个场景，因为我使用的是CSS3D。但是我没有运气把它加载到代码笔上。代码只是出错（但我看不到错误，因为我猜它在后端）。我想我需要做另一个堆栈溢出后只是为了这个！Jkjk但我还没有做任何事情，因为事件的Iframe。默认情况下，它会单击并播放。但我永远无法重新控制我的第一人称控制权。