I utilized the map function to generate multiple scenes. Within this map function, I established a specific number of div elements (the quantity corresponds to the number of scenes). My inquiry is how can I attach each scene to its respective div.
Upon attempting to render, the initial model (or all others, excluding the last one) briefly appears before disappearing, followed by the final model being displayed. My current understanding leads me to believe that this issue is related to the render function.
However, I am uncertain about the next steps to take. Any assistance on this matter would be greatly appreciated.
let cameraInstance = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
)
const rendererInstance = new THREE.WebGLRenderer({ alpha: true })
rendererInstance.setSize(300, 200)
const oControl = new OrbitControls(
cameraInstance,
rendererInstance.domElement
)
const loaderInstance = new THREE.JSONLoader()
let createSceneInstance = tempInstances.map((tempInstance, i) => {
let sceneInstance = new THREE.Scene()
const ambientLight = new THREE.AmbientLight(0x383838)
sceneInstance.add(ambientLight)
const spotLight = new THREE.SpotLight(0xffffff)
spotLight.position.set(300, 300, 300)
spotLight.intensity = 1
sceneInstance.add(spotLight)
let newDiv = document.createElement('div')
newDiv.id = 'instance' + i
document.getElementById('instances').appendChild(newDiv)
loaderInstance.load(
path + tempInstance.json3d,
(geo, mat) => {
let ins1 = new THREE.Mesh(geo, mat)
ins1.scale.set(20, 20, 20)
sceneInstance.add(ins1)
cameraInstance.position.set(30, 35, 40)
cameraInstance.lookAt(sceneInstance.position)
const render = () => {
requestAnimationFrame(render)
oControl.update()
rendererInstance.render(sceneInstance, cameraInstance)
}
render()
}
)
return sceneInstance
})
document
.getElementById('instance0')
.appendChild(rendererInstance.domElement)