Kevin Powell - Community•12mo ago

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

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

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....

2 Replies

dys 🐙•12mo ago

Have you considered React Three Fiber?

thethingisbackOP•12mo ago

No I haven't but I'm looking at it now. THank you

Gaming

Programming

THREE.js BG 'cloud' animation directional lights setting

Did you find this page helpful?