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

Question

我有一个包含 10 个立方体的场景。 看到这个小提琴：https://jsfiddle.net/gilomer88/tcpwez72/47/

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

我不断收到以下错误：

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

不知道为什么会这样。

请注意，我制作的小提琴已经完成了 95% - 它只是缺少您在此处看到的 HTML 的这一点：

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

（一旦我添加了这个 HTML - 和 CSS - 一切都开始在我身上崩溃，无论我做了什么来尝试修复它 - 所以我终于把它拿出来了。）

无论哪种方式，我基本上都是在创建一个新的scene 来显示“详细信息视图”，以及一个新的renderer、OrbitControl 等 - 并且错误发生在这一行：

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

（那行在我的 makeDetailsScene() 函数中 - 你会在小提琴中看到。）

对于它的价值，当我把它放在一起时，我正在关注这个 THREE.js 示例：https://threejs.org/examples/?q=mul#webgl_multiple_elements

Answer 1

我不知道你为什么需要这个额外的<div id="renderingSpot"></div>。您也可以将画布传递给 OrbitControls。当我运行以下代码时，我没有收到任何错误：

detailsScene.userData.renderingElement = document.getElementById("renderingSpot");
const detailsOrbitController = new OrbitControls(detailsScene.userData.camera, detailsScene.userData.renderingElement);

我对你的小提琴做了一些改动：https://jsfiddle.net/xn19qbf7/
（我还添加了一些 HTML、CSS、JS 内容，以便详细信息视图显示在主画布的顶部并渲染其场景。）

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

let renderingElement = $("#renderingSpot");
detailsScene.userData.renderingElement = renderingElement;

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

let renderingElement = $("#renderingSpot");
detailsScene.userData.renderingElement = renderingElement.get(0);
// or as above
detailsScene.userData.renderingElement = document.getElementById("renderingSpot");