Three.JS - Additional canvases only displaying black screen

Questions
, ,
1

Hello everyone

So I’m basically trying to create different objects on different canvases. The initial canvas (background) is working properly, but the additional canvases that I created would only display a black screen. Not sure what is wrong as I believe I have put in the necessary elements (lights, renderers, etc) inside already.

image
image1916×899 139 KB

If these small canvases could render properly, I am planning to include my custom 3D models, as well as orbit controls.

How my site is set up:
Background: A Fullscreen Three.JS scene containing various shapes with scroll animations - rendered into a fixed position (CSS) canvas that acts as a background.
Rows: A 50-50 grid layout where the left side contains texts, and the right side is a Three.JS scene resized using (window.ClientWidth and Height) and CSS Width and Height. This will be duplicated several times as the idea is to display numerous products. This is where the problem lies.
The web was built using vanilla Three.JS, and the idea is to basically create a futuristic looking e-commerce- hence the need for repeated canvas to display various products.

I have tried looking at these few examples, but the code structure is a bit to advanced for me at the moment, and I can’t seem to find an easier tutorial anywhere on Youtube.
https://threejs.org/examples/?q=multiple#webgl_multiple_elements
https://threejs.org/examples/?q=multiple#webgl_multiple_elements_text

I would also like to point out that I am a complete beginner in both Three.JS and web development in general, and I’m still struggling with creating the simplest of codes. Apologies for the question.
Any help would be greatly appreciated!

import './style.css';
import * as THREE from 'https://unpkg.com/three/build/three.module.js';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';



// Setup


//SCENE
const scene1 = new THREE.Scene();
const scene2 = new THREE.Scene();
const scene3 = new THREE.Scene();
scene1.add(scene1);
scene2.add(scene2);
scene3.add(scene3);

//CAMERA
const camera1 = new THREE.PerspectiveCamera(50, 2, 0.1, 1000);
const camera2 = new THREE.PerspectiveCamera(50, 2, 0.1, 1000);
const camera3 = new THREE.PerspectiveCamera(50, 2, 0.1, 1000);
scene1.add(camera1);
scene2.add(camera2);
scene3.add(camera3);

//CANVAS
const canvas1 = document.getElementById('c1')
const canvas2 = document.getElementById('c2')
const canvas3 = document.getElementById('c3')
scene1.add(canvas1);
scene2.add(canvas2);
scene3.add(canvas3);

//RENDERER
const renderer1 = new THREE.WebGLRenderer({ canvas: canvas1 });
renderer1.setPixelRatio(window.devicePixelRatio);
renderer1.setSize(window.innerWidth, window.innerHeight);
renderer1.render (scene1, camera1, canvas1);

const renderer2 = new THREE.WebGLRenderer({ canvas: canvas2 });
renderer2.setPixelRatio(window.devicePixelRatio);
renderer2.setSize(window.clientWidth, window.clientHeight);
renderer2.render (scene2, camera2, canvas2);

const renderer3 = new THREE.WebGLRenderer({ canvas: canvas3 });
renderer3.setPixelRatio(window.devicePixelRatio);
renderer3.setSize(window.clientWidth, window.clientHeight);
renderer3.render (scene3, camera3, canvas3);

 //document.body.appendChild(renderer.domElement)

//MODEL_CIRCLE FLOOR
const geometry1 = new THREE.CircleGeometry( 184, 64 );
const material1 = new THREE.MeshStandardMaterial( { color: 0x000000, wireframe: true, transparent:true, opacity: 0.07 } );
const circle1 = new THREE.Mesh( geometry1, material1 );
circle1.position.z = -5;
circle1.position.y = -3;
circle1.position.x = 0;
circle1.rotation.x = 1.6;
scene1.add( circle1 );

//MODEL_SPHERE
const geometry2 = new THREE.SphereGeometry( 184, 64, 64 );
const material2 = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, transparent:true, opacity: 0.02 } );
const sphere2 = new THREE.Mesh( geometry2, material2 );
sphere2.position.z = -5;
sphere2.position.y = -3;
sphere2.position.x = 0;
sphere2.rotation.x = 1.6;
scene1.add( sphere2 );

//MODEL_RING
const geometry3 = new THREE.RingGeometry( 184, 188, 80 );
const material3 = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, transparent:true, opacity: 0.01  } );
const mesh3 = new THREE.Mesh( geometry3, material3 );
mesh3.position.z = -5;
mesh3.position.y = -3;
mesh3.position.x = 0;
scene1.add( mesh3 );

//MODEL_RING2
const geometry4 = new THREE.RingGeometry( 184, 188, 80 );
const material4 = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, transparent:true, opacity: 0.01  } );
const mesh4 = new THREE.Mesh( geometry4, material4 );
mesh4.position.z = -5;
mesh4.position.y = -3;
mesh4.position.x = 0;
scene1.add( mesh4 );

//MODEL_STAR
function addStar() {
const geometry = new THREE.SphereGeometry(0.1, 4, 24);
const material = new THREE.MeshStandardMaterial({ color: 0xffffff });
const star = new THREE.Mesh(geometry, material);
const [x, y, z] = Array(3)
    .fill()
    .map(() => THREE.MathUtils.randFloatSpread(100));
star.position.set(x, y, z);
scene1.add(star); }
Array(200).fill().forEach(addStar);

//MODEL_MOUSE 1
const loader = new GLTFLoader();
var mouse;
loader.load( 'MOUSE_ROBO15.glb', function ( gltf ) {
  mouse = gltf.scene;
  gltf.scene.position.z = -5.5;
  gltf.scene.position.x = 2;
  gltf.scene.position.y = -3;
  gltf.scene.rotation.y = -0.7;
  gltf.scene.scale.set(2, 2, 2);
	scene1.add( mouse); }, 
  undefined, function ( error ) {
	console.error( error ); } );

//LIGHTS
const pointLight = new THREE.PointLight(0xffffff,3,1000);
pointLight.position.set(5, 5, 5);
const pointLight2 = new THREE.PointLight(0xffffff,0.8);
pointLight2.position.set(25, 20, 200);
const ambientLight = new THREE.AmbientLight(0xffffff);
scene1.add(pointLight, pointLight2, ambientLight);

const ambientLight2 = new THREE.AmbientLight(0xffffff);
scene2.add(ambientLight2);

const ambientLight3 = new THREE.AmbientLight(0xffffff);
scene3.add(ambientLight3);

//BACKGROUND
const spaceTexture = new THREE.TextureLoader().load('whitebg.jpeg');
scene1.background = spaceTexture;
const handbackground1 = new THREE.TextureLoader().load('spacepdf.jpg');
scene2.background = handbackground1;
const handbackground2 = new THREE.TextureLoader().load('spacepdf.jpg');
scene3.background = handbackground2;

//SCROLL ANIMATION
function moveCamera() {
  const t = document.body.getBoundingClientRect().top;
  circle1.rotation.z += -0.005;
  sphere2.rotation.z += 0.0025;
  camera1.position.z = t * -0.03;
  camera1.position.x = t * -0.0006;
  camera1.rotation.y = t * -0.0006;}

document.body.onscroll = moveCamera;
moveCamera();

//ANIMATION LOOP
function animate() {
  requestAnimationFrame(animate);

  mesh3.rotation.y += 0.00215;
  mesh4.rotation.y += -0.00215;
  circle1.rotation.z += -0.0001;
  sphere2.rotation.z += 0.0001;
  
//controls.update();
  renderer1.render(scene1, camera1)
  renderer2.render(scene2, camera2)
  renderer3.render(scene3, camera3)


}

animate();
2

1st thing, this doesn’t look correct.

Your script also shows that you are only adding meshes to scene 1.

Also render doesn’t take 3 parameters.

Also, do you really need to call the renderers render method while setting up the scene? Your animation loop is rendering.

Check the console for errors.

I think you need to go backwards all the way, right back to the beginning, delete all your code, and just get 1 simple thing rendering in your browser first, using the correct code.

as a test, try rendering the same scene in each renderer

  renderer1.render(scene1, camera1)
  renderer2.render(scene1, camera2)
  renderer3.render(scene1, camera3)