Skip to main content

Three.JS - Additional canvases only displaying black screen

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.

Background Canvas Works, other canvas only Black Screen

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!

Code: (Javascript part only)

type here

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();

I tried rearranging the code, tried to replicate some of the present examples, but they seemed to be too advanced for me. I've also tried using one single Scene but that didn't seem like the correct way. I've also tried messing with the lights and backgrounds, and they don't seem to do anything.

Via Active questions tagged javascript - Stack Overflow https://ift.tt/jy5cm7K
Labels:

Comments

Post a Comment

Popular posts from this blog

How to show number of registered users in Laravel based on usertype?

i'm trying to display data from the database in the admin dashboard i used this: <?php use Illuminate\Support\Facades\DB; $users = DB::table('users')->count(); echo $users; ?> and i have successfully get the correct data from the database but what if i want to display a specific data for example in this user table there is "usertype" that specify if the user is normal user or admin i want to user the same code above but to display a specific usertype i tried this: <?php use Illuminate\Support\Facades\DB; $users = DB::table('users')->count()->WHERE usertype =admin; echo $users; ?> but it didn't work, what am i doing wrong? source https://stackoverflow.com/questions/68199726/how-to-show-number-of-registered-users-in-laravel-based-on-usertype
Post a Comment
Read more

Why is my reports service not connecting?

I am trying to pull some data from a Postgres database using Node.js and node-postures but I can't figure out why my service isn't connecting. my routes/index.js file: const express = require('express'); const router = express.Router(); const ordersCountController = require('../controllers/ordersCountController'); const ordersController = require('../controllers/ordersController'); const weeklyReportsController = require('../controllers/weeklyReportsController'); router.get('/orders_count', ordersCountController); router.get('/orders', ordersController); router.get('/weekly_reports', weeklyReportsController); module.exports = router; My controllers/weeklyReportsController.js file: const weeklyReportsService = require('../services/weeklyReportsService'); const weeklyReportsController = async (req, res) => { try { const data = await weeklyReportsService; res.json({data}) console...
Post a Comment
Read more

How to split a rinex file if I need 24 hours data

Trying to divide rinex file using the command gfzrnx but getting this error. While doing that getting this error msg 'gfzrnx' is not recognized as an internal or external command Trying to split rinex file using the command gfzrnx. also install'gfzrnx'. my doubt is I need to run this program in 'gfzrnx' or in 'cmdprompt'. I am expecting a rinex file with 24 hrs or 1 day data.I Have 48 hrs data in RINEX format. Please help me to solve this issue. source https://stackoverflow.com/questions/75385367/how-to-split-a-rinex-file-if-i-need-24-hours-data
Post a Comment
Read more