Making a Popup Scene

Questions
,
1

I am trying to create two independent scenes (with differing renders) and I am struggling to get it to work.

I have a sample fiddle setup here:

Upon clicking generate new scene, I would like to have a differing threejs scene appear in the popup window, new scene should have a simple cube in the pop up div.

image
image887×771 4.47 KB

I am unsure where I am going wrong and hope someone can point me in the right direction.

My function to generate the new scene is:

function generateNewScene () {
    let divOfInterest = document.getElementById('newScene');
    let popup = document.getElementById('newCanvasScene');
    let newScene = new THREE.Scene();
    let newCamera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
    newCamera.position.z = 500;
    newScene.add(newCamera);
    let newGeometry = new THREE.CubeGeometry(200, 200, 200);
    let newMaterial = new THREE.MeshNormalMaterial();
    let newMesh = new THREE.Mesh(newGeometry, newMaterial);
    newScene.add(newMesh);
    const newRenderer = new THREE.WebGLRenderer({
		  antialias: true,
  		canvas: popup
		})
    newRenderer.setSize(window.innerWidth, window.innerHeight);
    divOfInterest.appendChild(newRenderer.domElement);

}

}

I am not sure if I need to specify the canvas in the newRenderer constructor and I am not sure how to setup the last line of the generateNewScene function. I have tried a whole bunch of differing setups, but no dice. Eventually I want to hook up a differing animation function on this as well.

Thanks for your help.

2

I was able to make the new scene in the popup window (some poor coding on my end fixed this), but the new animate function is giving me some errors. The newAnimate function returns an error that the “cubeMesh” is undefined.

How can I pass this geometry into the new render and animate functions?

function newAnimate() {

    requestAnimationFrame(newAnimate);
    newRenderFunc();

}

function newRenderFunc() {

    cubeMesh.rotation.x += 0.001;
    cubeMesh.rotation.y += 0.002;
    
    newRenderer.render(newScene, newCamera);

}

function generateNewScene () {
	 	let divOfInterest = document.getElementById('newScene');
    let newScene = new THREE.Scene();
    let newCamera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
    newCamera.position.z = 500;
    newScene.add(newCamera);
    let newGeometry = new THREE.CubeGeometry(200, 200, 200);
    let newMaterial = new THREE.MeshNormalMaterial();
    let cubeMesh = new THREE.Mesh(newGeometry, newMaterial);
    newScene.add(cubeMesh);
    const newRenderer = new THREE.WebGLRenderer({
		  antialias: true,
		})
    newRenderer.setSize(window.innerWidth, window.innerHeight);
    newRenderer.render(newScene, newCamera);
    divOfInterest.appendChild(newRenderer.domElement);
}

This code all gets called on the click of a button:

openModalButtons.forEach(button => {
  button.addEventListener('click', () => {
    const modal = document.querySelector(button.dataset.modalTarget)
    openModal(modal)
    generateNewScene()
    newAnimate()
    
  })
})

I lack understanding of the typical render function as well, how does the typical render function know the variable mesh? I would have thought that this would yield the same error (mesh is undefined).

3

It’s a slightly different constellation than yours, but maybe you can take from it how it works with different scenes?

Construction of frames with contour/profile

4

Thanks hofk, I went through this thread and some of the other multicanvas/ multirender examples and found that they all use one render function and reworked mine to match.

Placing all of the code into the init and main render and animate function works, but I would still like to learn why my previous code was not working.

If anyone else has some insight, I would appreciate learning more.

function init() {
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(50, innerWidth / innerHeight, 1, 10000);
    camera.position.z = 500;
    scene.add(camera);
    geometry = new THREE.PlaneGeometry(200, 200);
    material = new THREE.MeshNormalMaterial({side: THREE.DoubleSide});
    mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);
    
    
    renderer = new THREE.WebGLRenderer({
    	antialias: true,
      canvas: document.querySelector('canvas')
    })

    renderer.setSize(innerWidth,innerHeight)
    renderer.setPixelRatio(window.devicePixelRatio)
    document.body.appendChild(renderer.domElement);


    //trying this up at init
    var divOfInterest = document.getElementById('newScene');
    newScene = new THREE.Scene();
    newCamera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
    newCamera.position.z = 500;
    newScene.add(newCamera);
    var newGeometry = new THREE.BoxGeometry(200, 200, 200);
    var newMaterial = new THREE.MeshNormalMaterial();
    cubeMesh = new THREE.Mesh(newGeometry, newMaterial);
    newScene.add(cubeMesh);
    newRenderer = new THREE.WebGLRenderer({
		  antialias: true,
		})
    newRenderer.setSize(window.innerWidth, window.innerHeight);
    newRenderer.render(newScene, newCamera);
    divOfInterest.appendChild(newRenderer.domElement);
    

}

function animate() {
    
    requestAnimationFrame(animate);
    render();

}

function render() {

    mesh.rotation.x += 0.001;
    mesh.rotation.y += 0.002;
    cubeMesh.rotation.x += 0.001;
    cubeMesh.rotation.y += 0.002;

    renderer.render(scene, camera);
    newRenderer.render(newScene, newCamera);
}