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

Question

我有一个场景，里面有 10 个立方体。看到这个 fiddle：https://jsfiddle.net/gilomer88/tcpwez72/47/

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

我不断收到以下错误：

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

无法弄清楚为什么会这样。

请注意，我制作的 fiddle 已完成 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() 函数中 - 您将在 fiddle 中看到它。）

为了它的价值，当我把它放在一起时，我遵循了这个 THREE.js 例子：https://threejs.org/examples/?q=mul#webgl_multiple_elements

Answer 1

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

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

我对你的 fiddle 进行了一些更改：https://jsfiddle.net/xn19qbf7/
（我还添加了一些 HTML、CSS、JS，以便细节视图显示在主要 canvas 的顶部，并且它的场景得到渲染。）

我猜你的问题出在你最初分配给 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");

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

THREE.js Displaying Scene on top of another Scene

three.js

scene