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

Labels:

Comments

Post a Comment

Popular posts from this blog

ValueError: X has 10 features, but LinearRegression is expecting 1 features as input

So, I am trying to predict the model but its throwing error like it has 10 features but it expacts only 1. So I am confused can anyone help me with it? more importantly its not working for me when my friend runs it. It works perfectly fine dose anyone know the reason about it? cv = KFold(n_splits = 10) all_loss = [] for i in range(9): # 1st for loop over polynomial orders poly_order = i X_train = make_polynomial(x, poly_order) loss_at_order = [] # initiate a set to collect loss for CV for train_index, test_index in cv.split(X_train): print('TRAIN:', train_index, 'TEST:', test_index) X_train_cv, X_test_cv = X_train[train_index], X_test[test_index] t_train_cv, t_test_cv = t[train_index], t[test_index] reg.fit(X_train_cv, t_train_cv) loss_at_order.append(np.mean((t_test_cv - reg.predict(X_test_cv))**2)) # collect loss at fold all_loss.append(np.mean(loss_at_order)) # collect loss at order plt.plot(np.log(al...
Post a Comment
Read more

Sorting large arrays of big numeric stings

I was solving bigSorting() problem from hackerrank: Consider an array of numeric strings where each string is a positive number with anywhere from to digits. Sort the array's elements in non-decreasing, or ascending order of their integer values and return the sorted array. I know it works as follows: def bigSorting(unsorted): return sorted(unsorted, key=int) But I didnt guess this approach earlier. Initially I tried below: def bigSorting(unsorted): int_unsorted = [int(i) for i in unsorted] int_sorted = sorted(int_unsorted) return [str(i) for i in int_sorted] However, for some of the test cases, it was showing time limit exceeded. Why is it so? PS: I dont know exactly what those test cases were as hacker rank does not reveal all test cases. source https://stackoverflow.com/questions/73007397/sorting-large-arrays-of-big-numeric-stings
Post a Comment
Read more

How to load Javascript with imported modules?

I am trying to import modules from tensorflowjs, and below is my code. test.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title </head> <body> <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@2.0.0/dist/tf.min.js"></script> <script type="module" src="./test.js"></script> </body> </html> test.js import * as tf from "./node_modules/@tensorflow/tfjs"; import {loadGraphModel} from "./node_modules/@tensorflow/tfjs-converter"; const MODEL_URL = './model.json'; const model = await loadGraphModel(MODEL_URL); const cat = document.getElementById('cat'); model.execute(tf.browser.fromPixels(cat)); Besides, I run the server using python -m http.server in my command prompt(Windows 10), and this is the error prompt in the console log of my browser: Failed to loa...
Post a Comment
Read more