Gltf 模型在 three.js 中看起来不正确

Question

我从 sketchfab 下载了以下模型并导入到我的场景中，但模型看起来不正确，尤其是玻璃模糊。

这是我的代码

import "./sass/main.scss";

import { Scene, PerspectiveCamera, WebGLRenderer, DirectionalLight, ACESFilmicToneMapping, sRGBEncoding, Object3D, Mesh, MeshStandardMaterial, ReinhardToneMapping, AmbientLight, EquirectangularReflectionMapping,
} from "three";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

const scene = new Scene();
const camera = new PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new WebGLRenderer({
    canvas: document.querySelector("canvas#webgl"),
    antialias: true
});
renderer.toneMapping = ACESFilmicToneMapping;
renderer.outputEncoding = sRGBEncoding;
renderer.physicallyCorrectLights = true;
renderer.toneMappingExposure = 1
renderer.shadowMap.enabled = true;

const controls = new OrbitControls(camera, renderer.domElement);
camera.rotation.reorder("YXZ")
camera.position.set(2, 1.5, 3.5);
camera.rotation.set(-0.25, Math.PI * 0.25, 0);
renderer.setSize(window.innerWidth, window.innerHeight)

const gltfLoader = new GLTFLoader();
const rgbeLoader = new RGBELoader();

const environmentMap = await rgbeLoader.loadAsync("./assets/environment/puresky.hdr")
environmentMap.mapping = EquirectangularReflectionMapping;
scene.environment = environmentMap;

await gltfLoader.loadAsync("./assets/models/scene.gltf").then(gltf => {
    scene.add(gltf.scene);
});

mapAllElements();

function render() {

    renderer.render(scene, camera);

    requestAnimationFrame(render);
}

render();

function mapAllElements() {
    scene.traverse((child) => {
        if (child instanceof Mesh && child.material instanceof MeshStandardMaterial) {
            child.material.envMap = environmentMap;
            child.material.envMapIntensity = 1;
            child.material.needsUpdate = true;
        }
    })
}

我在互联网上搜索了我的问题，但找不到任何有用的东西，我也尝试了 sketchfab 的其他 gltf 模型，但其他模型也看起来不正确。

我的代码使用了顶级等待功能，我从 webpack.config.js 启用了

Answer 1

模型的外观与加载它的查看器相关联。如果您想重新创建效果，您可以使用 THREE.MeshPhysicalMaterial 类创建新材质，这是一种基于物理的材质，可以模拟逼真的光照和材质。

准系统示例如下：

scene.traverse((child) => {
    if (child instanceof Mesh && child.material instanceof MeshStandardMaterial) {
      if (child.name.includes("glass")) {
        // Create a new MeshPhysicalMaterial for the glass object
        const glassMaterial = new THREE.MeshPhysicalMaterial({
          color: 0xffffff,
          metalness: 0,
          roughness: 0.1,
          transparent: true,
          transmission: 0.9,
          opacity: 0.7,
          envMap: environmentMap,
          envMapIntensity: 1,
          side: THREE.DoubleSide,
        });
        // Replace the existing material with the new glass material
        child.material = glassMaterial;
      } else {
        // For non-glass objects, just add the environment map
        child.material.envMap = environmentMap;
        child.material.envMapIntensity = 1;
      }
      child.material.needsUpdate = true;
    }
  });
}

如果你不想重新发明轮子，你也可以看看 WebGi，在那里你可以通过一个可访问的插件系统进行更精细的控制。