2 replies

THREE.js BG 'cloud' animation directional lights setting

GH: https://github.com/nnall/CRUDApps/blob/main/signup/src/components/SignUp.js

I've created a background rotating cloud animation, using this as a guide: https://redstapler.co/cool-nebula-background-effect-three-js/

Just before the end of the instructions, there's a section for adding Lighting, which is where I'm having problems.

It gives these settings - keeping in mind that it's using a basic static html page setup and not react:

let directionalLight = new THREE.DirectionalLight(0xff8c19);
directionalLight.position.set(0,0,1);
scene.add(directionalLight);

let orangeLight = new THREE.PointLight(0xcc6600,50,450,1.7);
orangeLight.position.set(200,300,100);
scene.add(orangeLight);

let redLight = new THREE.PointLight(0xd8547e,50,450,1.7);
redLight.position.set(100,300,100);
scene.add(redLight);

let blueLight = new THREE.PointLight(0x3677ac,50,450,1.7);
blueLight.position.set(300,300,200);
scene.add(blueLight);

let directionalLight = new THREE.DirectionalLight(0xff8c19);
directionalLight.position.set(0,0,1);
scene.add(directionalLight);

let orangeLight = new THREE.PointLight(0xcc6600,50,450,1.7);
orangeLight.position.set(200,300,100);
scene.add(orangeLight);

let redLight = new THREE.PointLight(0xd8547e,50,450,1.7);
redLight.position.set(100,300,100);
scene.add(redLight);

let blueLight = new THREE.PointLight(0x3677ac,50,450,1.7);
blueLight.position.set(300,300,200);
scene.add(blueLight);

let directionalLight = new THREE.DirectionalLight(0xff8c19);
directionalLight.position.set(0,0,1);
scene.add(directionalLight);

let orangeLight = new THREE.PointLight(0xcc6600,50,450,1.7);
orangeLight.position.set(200,300,100);
scene.add(orangeLight);

let redLight = new THREE.PointLight(0xd8547e,50,450,1.7);
redLight.position.set(100,300,100);
scene.add(redLight);

let blueLight = new THREE.PointLight(0x3677ac,50,450,1.7);
blueLight.position.set(300,300,200);
scene.add(blueLight);

let directionalLight = new THREE.DirectionalLight(0xff8c19);
directionalLight.position.set(0,0,1);
scene.add(directionalLight);

let orangeLight = new THREE.PointLight(0xcc6600,50,450,1.7);
orangeLight.position.set(200,300,100);
scene.add(orangeLight);

let redLight = new THREE.PointLight(0xd8547e,50,450,1.7);
redLight.position.set(100,300,100);
scene.add(redLight);

let blueLight = new THREE.PointLight(0x3677ac,50,450,1.7);
blueLight.position.set(300,300,200);
scene.add(blueLight);

which I've translated to react like so:

let directionalLight = new THREE.DirectionalLight(0xf2f2a5);
directionalLight.position.set(0, 0, 2);
directionalLight.intensity = 8; // Adjust the intensity
scene.add(directionalLight);

      let orangeLight = new THREE.PointLight(0xcc6600, 50, 450, 1.7);
      orangeLight.position.set(200, 300, 100);
      orangeLight.intensity = 5; // Adjust the intensity
      scene.add(orangeLight);

      let redLight = new THREE.PointLight(0xd8547e, 50, 450, 1.7);
      redLight.position.set(100, 300, 100);
      redLight.intensity = 5; // Adjust the intensity
      scene.add(redLight);

      let blueLight = new THREE.PointLight(0x3677ac, 50, 450, 1.7);
      blueLight.position.set(300, 300, 200);
      blueLight.intensity = 5; // Adjust the intensity
      scene.add(blueLight);

let directionalLight = new THREE.DirectionalLight(0xf2f2a5);
directionalLight.position.set(0, 0, 2);
directionalLight.intensity = 8; // Adjust the intensity
scene.add(directionalLight);

      let orangeLight = new THREE.PointLight(0xcc6600, 50, 450, 1.7);
      orangeLight.position.set(200, 300, 100);
      orangeLight.intensity = 5; // Adjust the intensity
      scene.add(orangeLight);

      let redLight = new THREE.PointLight(0xd8547e, 50, 450, 1.7);
      redLight.position.set(100, 300, 100);
      redLight.intensity = 5; // Adjust the intensity
      scene.add(redLight);

      let blueLight = new THREE.PointLight(0x3677ac, 50, 450, 1.7);
      blueLight.position.set(300, 300, 200);
      blueLight.intensity = 5; // Adjust the intensity
      scene.add(blueLight);

let directionalLight = new THREE.DirectionalLight(0xf2f2a5);
directionalLight.position.set(0, 0, 2);
directionalLight.intensity = 8; // Adjust the intensity
scene.add(directionalLight);

      let orangeLight = new THREE.PointLight(0xcc6600, 50, 450, 1.7);
      orangeLight.position.set(200, 300, 100);
      orangeLight.intensity = 5; // Adjust the intensity
      scene.add(orangeLight);

      let redLight = new THREE.PointLight(0xd8547e, 50, 450, 1.7);
      redLight.position.set(100, 300, 100);
      redLight.intensity = 5; // Adjust the intensity
      scene.add(redLight);

      let blueLight = new THREE.PointLight(0x3677ac, 50, 450, 1.7);
      blueLight.position.set(300, 300, 200);
      blueLight.intensity = 5; // Adjust the intensity
      scene.add(blueLight);

let directionalLight = new THREE.DirectionalLight(0xf2f2a5);
directionalLight.position.set(0, 0, 2);
directionalLight.intensity = 8; // Adjust the intensity
scene.add(directionalLight);

      let orangeLight = new THREE.PointLight(0xcc6600, 50, 450, 1.7);
      orangeLight.position.set(200, 300, 100);
      orangeLight.intensity = 5; // Adjust the intensity
      scene.add(orangeLight);

      let redLight = new THREE.PointLight(0xd8547e, 50, 450, 1.7);
      redLight.position.set(100, 300, 100);
      redLight.intensity = 5; // Adjust the intensity
      scene.add(redLight);

      let blueLight = new THREE.PointLight(0x3677ac, 50, 450, 1.7);
      blueLight.position.set(300, 300, 200);
      blueLight.intensity = 5; // Adjust the intensity
      scene.add(blueLight);

But I see none of these colors in my animation (see attmt picture).

GitHub

CRUDApps/signup/src/components/SignUp.js at main · nnall/CRUDApps

Server learning apps. Contribute to nnall/CRUDApps development by creating an account on GitHub.

Red Stapler

Create Cool Nebula Background Effect with Three.js - Red Stapler

So you’re looking for an idea to create a stunning background for your website? This tutorial is for you. We’ll show you how to create an animated Nebula background using JavaScript and Three.js. Let’s check....

THREE.js BG 'cloud' animation directional lights setting

Similar Threads

Similar Threads

Similar Threads