THREE.js在另一个场景上显示场景

我有一个场景，其中有10个立方体。 看这把小提琴：

当用户点击其中一个立方体时，我希望在当前“主场景”的顶部弹出一个新的“细节场景”，并让它仅显示用户点击的那个立方体。
当用户检查并玩完立方体后，他们可以关闭“细节场景”，从而显示原来的“主场景”——其实一直就在它下面

我不断得到以下错误：

Uncaught TypeError: scope.domElement.addEventListener is not a function

我不明白为什么会这样

请注意，我制作的小提琴完成了95%——只是缺少了这一点

HTML

，您可以在这里看到：

        <canvas id="detailsCanvas"></canvas>
        <div id="renderingSpot"></div>

（这一行在我的

makeDetailsScene（）

函数中，您将在小提琴中看到。）

---

为了说明它的价值，当我把它放在一起时，我遵循了这个THREE.js示例：

我不确定您为什么需要这个额外的

。您也可以将画布传递给OrbitControl。当我运行以下代码时，不会出现任何错误：

detailsScene.userData.renderingElement=document.getElementById（“renderingSpot”）；
const detailsOrbitController=新的轨道控制（detailsScene.userData.camera、detailsScene.userData.renderingElement）；

我对你的小提琴做了一些改动：
（我还添加了一些HTML、CSS和JS，以便详细视图显示在主画布的顶部，并渲染其场景。）

我猜你的问题是你最初在jQuery上的任务：

let renderingElement=$（“#renderingSpot”）；
detailsScene.userData.renderingElement=renderingElement；

renderingElement

仍然是jQuery对象。但是OrbitControls不接受jQuery对象。所以，你应该得到真实的元素：

let renderingElement=$（“#renderingSpot”）；
detailsScene.userData.renderingElement=renderingElement.get（0）；
//或如上所述
detailsScene.userData.renderingElement=document.getElementById（“renderingSpot”）；

嘿，关于使用

jQuery

和传统javascript之间的区别，我得出了相同的结论。归根结底，

jQuery

不能很好地处理所有

THREE.js

，因此最好使用

document.getElementById

。谢谢你的回复！（仅供参考，关于这把小提琴还有一些其他问题-我在这里发布了：。如果你想继续和我一起解决这首小曲的问题，请查看。再次感谢！）我没有在threejs论坛注册。但是Q2是因为只渲染了一次场景细节。收听orbit controls change事件以渲染场景（请参见上面的我的JSFIDLE），或者将DetailsRender.render（）调用放入渲染循环中。是！我看见了！添加到小提琴代码中的行：

detailsOrbitController.addEventListener（'change'，（）=>{detailsrender.render（detailscene，detailsCamera）

-我立即复制粘贴了它，它成功了。我忘了还要为此感谢你。除此之外，我想我还将在Three.js论坛上发布我的问题，以便其他人（比如你）可以看到它，并可能为整个社区提供更多答案。再次感谢！再次问候-我有一个全新的、全新的解决方案你帮过我的这个场景中的场景出现了令人费解的问题——我在这里发布了一个新问题：如果你能给我两分钱，我将不胜感激！

const detailsOrbitController = new OrbitControls(detailsScene.userData.camera, detailsScene.userData.renderingElement);