i am new to three js, i'm trying to create soft lighting for a gltf model using AmbientLight and DirectionalLight, but the color contrast comes out too sharp
what i'm trying to achieve
What i got
my code
const main = document.querySelector('#main');let WIDTH = main.offsetWidth;let HEIGHT = main.offsetHeight;let scene = new THREE.Scene();let camera = new THREE.PerspectiveCamera(15, WIDTH / HEIGHT, 0.1, 1000);camera.position.z = 5; let renderer = new THREE.WebGLRenderer();renderer.setClearColor('rgb(99, 115, 107)');renderer.setSize(WIDTH, HEIGHT);renderer.domElement.setAttribute("id", "Church3DObj");main.insertBefore(renderer.domElement, main.firstChild);let controls = new THREE.OrbitControls(camera, renderer.domElement);const ambientLight = new THREE.AmbientLight('white', 1);const mainLight = new THREE.DirectionalLight('white', .8);mainLight.position.set(10, 10, 10);scene.add(ambientLight)scene.add(mainLight)let loader = new THREE.GLTFLoader();let obj = null;loader.load('https://raw.githubusercontent.com/aaadraniki/projects/web-pages/assets/models/fender_br/scene.gltf', function(gltf) {obj = gltf.scene;scene.add(obj);});renderer.setAnimationLoop(_ => {renderer.render(scene, camera);})Best Answer
You'll usually get the best lighting in three.js by using some kind of environment map. THREE.RoomEnvironment is one of the easier ways to do that, or you can load external .hdr or .exr files. Enabling some tone mapping (e.g. ACES Filmic) may also help, see renderer.toneMapping.