I've been working on rendering multiple scenes using a single renderer, but I'm facing some challenges in getting it right. Despite referring to other Stack Overflow answers, I haven't been able to achieve the desired outcome.
My approach involves loading each gltf model individually and assigning them to the same canvas element in my HTML file. However, when I try to render the scenes, the first one doesn't show up at all, and the second displays as a black box!
Essentially, I aim to render two meshes without resorting to using separate WebGL renderers. As far as I understand, this method allows me to render one scene, clear it, then render the second one while retaining the visibility of the first render in the initial scene.
Below are snippets of relevant code:
// Load a glTF resource
loader.load(
// insert path to first gltf file here
function ( gltf ) {
scene.add( gltf.scene );
},
// Load a glTF resource
loader.load(
// insert path to second gltf file here
function ( gltf ) {
scene2.add( gltf.scene );
},
// Canvas
const canvas = document.querySelector('canvas name here')
// Scene
const scene = new THREE.Scene()
const scene2 = new THREE.Scene();// Renderer
const renderer = new THREE.WebGLRenderer({
canvas: canvas,
antialias: true,
alpha: true
})
renderer.autoClear = false
renderer.clear()
renderer.render(scene, camera)
renderer.clearDepth()
renderer.render(scene2, camera)Edit: Just to clarify, I am attempting to replicate the effect showcased on this webpage: . Take note of how each scene has its own container in different locations on the webpage while utilizing the same renderer. I am not altering my geometry randomly.