THREE.js 在另一个场景之上显示场景
THREE.js Displaying Scene on top of another Scene
我有一个场景,里面有 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
我不确定你为什么需要这个额外的 <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");
我有一个场景,里面有 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
我不确定你为什么需要这个额外的 <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");