Three.js渲染的3D模型尺寸过小、亮度过高如何调整？

调整模型大小 #

你可以任选以下一种方法实现：

• 直接缩放模型：在GLTF加载回调中添加缩放逻辑，数值按需调整，示例如下：

loader.load("scene.gltf", function (gltf) {
  obj = gltf.scene;
  // 新增缩放代码，三个参数分别对应x/y/z轴的缩放比例，数值越大模型越大
  obj.scale.set(3, 3, 3);
  scene.add(gltf.scene);
});

• 调整相机距离：把相机向模型方向移动，当前你设置的相机z轴坐标是20，数值越小离模型越近，模型视觉上越大，示例如下：

// 原代码camera.position.set(0, 10, 20); 把z轴参数调小即可，比如改成10
camera.position.set(0, 10, 10);

降低物体亮度 #

你当前设置的半球光强度为10，远高于常规默认值1，直接调低第三个参数即可，示例如下：

// 原代码var light = new THREE.HemisphereLight(0xffffff, 0x000000, 10);
// 把最后一个参数（光源强度）调低，比如改为1，可根据实际效果调整
var light = new THREE.HemisphereLight(0xffffff, 0x000000, 1);

如果调整后仍然觉得亮度过高，还可以给渲染器添加曝光度控制：

renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 0.8; // 数值越小画面越暗

内容的提问来源于stack exchange，提问作者user17354812