Hi guys,
I’m just starting my THREE.js journey so 0 experience and I was wondering if I could pick any of your brains and help to figure out what the problem is with lighting.
0
I am loading an object and setting up one ambient light and three directional lights. The idea is to have one light illuminating from the right, one from the left, and one from the bottom (but again this might be a completely wrong approach, I’m just guessing here). However, I am unable to achieve the desired output.
The actual output is much darker, the chocolate is not as brown, and the green top and 1st quarted of of the strawberry is too bright
The desired output has been provided by the designer, .obj and .mtl files created and exported from Blender:
Actual output:
// Lights
const ambientLight = new THREE.AmbientLight(0xffffff, -18);
scene.add(ambientLight);
const directionalLight1 = new THREE.DirectionalLight(0xffffff, 1);
directionalLight1.position.set(-5, 1, 1);
scene.add(directionalLight1);
const directionalLight2 = new THREE.DirectionalLight(0xffffff, 40);
directionalLight2.position.set(60, -80, 10);
scene.add(directionalLight2);
const directionalLight3 = new THREE.DirectionalLight(0xffffff, 40);
directionalLight2.position.set(140, -100, 1);
scene.add(directionalLight3);
// Load model
new MTLLoader()
.setPath("./assets/")
.setMaterialOptions({
side: THREE.DoubleSide,
wrap: THREE.ClampToEdgeWrapping,
})
.load("untitled.mtl", (materials) => {
materials.preload();
new OBJLoader()
.setMaterials(materials)
.setPath("./assets/")
.load(
"untitled.obj",
(object) => {
object.position.y = 0;
object.position.z = 0;
object.traverse((child) => {
if (child.isMesh) {
// child.castShadow = true;
// child.receiveShadow = true;
child.material.shininess = 50; // Increase shininess for a glossy look
child.material.reflectivity = 1; // Increase reflectivity
}
});
scene.add(object);
},
(xhr) => {
// console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
},
(error) => {
console.log("An error happened", error);
}
);
});
