How to create a soft light using three js

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