How to merge multiple 3D scenes into one project using Three.js

Hi there,

Is there anyone that can instruct about how to combine 2 scenes into one project with separate javascript files using Three.js ?

For example, how to combine the following two three.js projects into one project with separate javascript files?
(https://codepen.io/tr13ze/pen/pbjWwg)
(https://codepen.io/mnmxmx/pen/BdjdMz)

I tried this code," document.getElementById(‘section’).appendChild(renderer.domElement)." But, the 3D objects are still separated in one screen, not together in one section or division.

Can you please give any other solution? Thanks a lot.

you need to untangle it and then wire everything into a unified scene.

1 Like

Hi drcmda

Thanks for your reply. I’m still new to JavaScript.

How to modify the files to untangle and wire it. Do you have any example for reference?

Thanks.

you have two separate sandboxes. and you should have a basic understanding of how three functions. you take out all the meshes one by one, add them to your scene, and then worry about side effects (render, resize, …). if you really don’t know how i think it’s to early, you should probably just study javascript and make simple threejs scenes with simple shapes. these examples are outdated anyway and wouldn’t run under latest three, they’d throw you into some churn bringing them up to date.

Thanks for your reply.

It’s clear that to take out each mesh and add them to one scene. If I want to separate different meshes in different javascript files in order to shorten the file length, is it possible for three.js by importing or exporting one another?

Attached is the screenshot for what I could do. The two 3D objects are separated, not in one section.

Thanks.

If I want to separate different meshes in different javascript files

of course, that is the default. but in order to use modules you need a bundler. vite, parcel whatever you like best.

Thanks for your sharing.