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....
No description
2 Replies
dys πŸ™
dys πŸ™β€’10mo ago
Have you considered React Three Fiber?
thethingisback
thethingisbackOPβ€’10mo ago
No I haven't but I'm looking at it now. THank you
Want results from more Discord servers?
Add your server