javascript - 如何使用三个js创建柔光

Question

我是三个 js 的新手，我正在尝试使用 AmbientLight 和 DirectionalLight 为 gltf 模型创建柔和的照明，但颜色对比度太尖锐

我想要实现的目标

我得到了什么

我的代码

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

Answer 1

您通常可以通过使用某种环境贴图在 Three.js 中获得最佳光照。 THREE.RoomEnvironment是更简单的方法之一，或者您可以加载外部 .hdr 或 .exr 文件。启用一些色调映射(例如 ACES Filmic)也可能有所帮助，请参阅 renderer.toneMapping .