CODEWITHSUNDEEP
three.jsscene
Sirab33
Sirab33

Reputation: 1285

THREE.js Displaying Scene on top of another Scene

I have a scene that has 10 cubes in it. See this fiddle: https://jsfiddle.net/gilomer88/tcpwez72/47/

When a user taps on one of the cubes, I want a new “details scene” to pop-open on top of the current "main scene" and have it display just that one cube the user tapped on.
When the user is done examining and playing with the cube they can close the “details scene”, thereby revealing the original "main scene" - which was really just sitting underneath it this whole time.

I keep getting the following error:

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

Can't figure out why that's happening.

Note that the fiddle I made is 95% complete - it's just missing this bit of HTML you see here:

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

(As soon as I added this HTML - and the CSS - everything started breaking up on me, no matter what I did to try fixing it - so I finally just took it out.)

Either way, I'm basically creating a new scene in which to display the "details view", along with a new renderer, OrbitControl, etc. - and the error occurs on this line:

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

(That line is in my makeDetailsScene() function - which you'll see in the fiddle.)

For what its worth, I was following this THREE.js example when I was putting this together: https://threejs.org/examples/?q=mul#webgl_multiple_elements

Upvotes: 0

Views: 767

Answers (1)

Brakebein
Brakebein

Reputation: 2237

I'm not sure why you need this extra <div id="renderingSpot"></div>. You could also just pass the canvas to the OrbitControls. When I run the following code, I don't get any errors:

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

I made some changes to your fiddle: https://jsfiddle.net/xn19qbf7/
(I also made some HTML, CSS, JS additions such that the details view displays on top of the main canvas and that its scene gets rendered.)

I guess your problem was your original assignment with jQuery:

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

renderingElement is still a jQuery object. But OrbitControls doesn't accept a jQuery object. So, you should get the real element:

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

Upvotes: 1

Related Questions