CODEWITHSUNDEEP
3dthree.js
Kode
Kode

Reputation: 3215

Three.js - Directional lights for all sides of a box?

I have a 3D box that users customize and can rotate/spin with orbitcontrols using Three.js. The functionality is working as expected, however, the lighting is very difficult to get correct as users need to see the box color as they customized for which I am using Ambient light set at the following:

var light = new THREE.AmbientLight(0xffffff); // White light
scene.add(light);

The issue with the ambient light is that while it seems preserve the color the users selected, the depth/sharpness is lost, since the box is shown as opened, and users expect to see depth:

enter image description here

If I set the Ambient light to the default shown in the example, I get a little more depth/sharpness but lose the color since the light is different:

enter image description here

This has led me to trying directional lights, with the goal that I could have directional lights for the top, bottom, and sides. However, I am confused on how to implement this so I can have lights on all sides. The depth/sharpness looks great, but I don't know what the coordinates of position.set(0,0,0) represent. I suspect it is x,y,z. With the code below I can cover some of the box, but not all in light. I need it to be all lit up like Ambient but with the depth of using a directional. Here is my current code:

var directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
directionalLight.position.set(0, 1, 0);
scene.add(directionalLight);

var directionalLight2 = new THREE.DirectionalLight(0xffffff, 0.5);
directionalLight2.position.set(1, 0, 0);
scene.add(directionalLight2);

var directionalLight3 = new THREE.DirectionalLight(0xffffff, 0.5);
directionalLight3.position.set(0, 0, 1);
scene.add(directionalLight3);

Which lights the top and two sides well:

enter image description here

But not the other sides and bottom:

enter image description here

Is it possible to get directional lights for each side, top, and bottom of my box? If so, what do I need to do? Is it a matter of adding more lights with different coordinates? Update:

UPDATE: Using the post here, I can get the light to follow since I am using orbitcontrols. three.js directional light folllowing camera

Which gives me this:

enter image description here

The only issue is that on first load, it is all black until the user interacts. Any ideas of how to change this behavior so it shows the colors on load?

enter image description here

Upvotes: 1

Views: 2789

Answers (1)

WestLangley
WestLangley

Reputation: 104833

If you want uniform lighting that works well with OrbitControls or TrackballControls, you can use this pattern:

// light
var light = new THREE.PointLight( 0xffffff, 0.9 );
camera.add( light );

When you add a light as a child of the camera, you must remember to add the camera as a child of the scene:

scene.add( camera );

You do not need any other lights in your scene if you use this pattern.

three.js r.73

Upvotes: 5

Related Questions