GLTF模型网页渲染边缘异常，在线查看器显示正常求助

我用Blender创建的模型在网页通过Three.js展示时，渲染质量不佳，尤其是边缘显示异常；但在GLTF在线查看器中，模型边缘却平滑正常。以下是我使用的代码：

<html lang="en">
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <meta charset="utf-8">
    <title>My first three.js app Yeah Yeah</title>
    <style>
        body {
            margin: 0;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>

<script src="three.js"></script>
<script type="module" src="GLTFLoader.js"></script>
<script type="module">
    import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
    import { GLTFLoader } from './GLTFLoader.js';

    let scene = new THREE.Scene();
    let camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.01, 1000);
    let renderer = new THREE.WebGLRenderer();

    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    var controls = new OrbitControls(camera, renderer.domElement);
    let loader = new GLTFLoader();

    let obj;
    loader.load("schrankd.gltf", function (gltf) {
        obj = gltf.scene;
        scene.add(gltf.scene);
    });
    scene.background = new THREE.Color(0xffffff);
    let light = new THREE.HemisphereLight(0xffffff, 0x000000, 3);
    scene.add(light);
    camera.position.set(0, 10, 5);

    function animate() {
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
    }

    animate();
</script>

</body>
</html>

核心问题分析 #

你的代码里有几个关键问题导致边缘锯齿和渲染质量差：

1. 重复引入Three.js导致版本冲突
2. 未开启抗锯齿
3. 模型未处理平滑着色/法线数据
4. 光照强度过高、相机位置不合理

具体修复步骤 #

1. 清理重复的Three.js引入 #

删掉本地的<script src="three.js"></script>，只保留CDN的r128版本引入，避免版本冲突。

2. 开启抗锯齿 #

初始化WebGLRenderer时添加antialias: true参数，这是解决边缘锯齿最直接的办法：

let renderer = new THREE.WebGLRenderer({ antialias: true });

3. 处理模型平滑着色 #

加载模型后遍历所有网格，确保法线数据存在并开启平滑着色：

loader.load("schrankd.gltf", function (gltf) {
    obj = gltf.scene;
    obj.traverse(function(child) {
        if (child instanceof THREE.Mesh) {
            child.geometry.computeVertexNormals(); // 自动生成法线
            child.material.flatShading = false; // 关闭平面着色，启用平滑
        }
    });
    scene.add(gltf.scene);
});

4. 优化光照与相机 #

• 降低半球光强度，避免过曝丢失细节：let light = new THREE.HemisphereLight(0xffffff, 0x444444, 1.5);
• 调整相机位置，让模型在视野内显示比例更合理：camera.position.set(0, 5, 10);
• 动画循环里记得更新OrbitControls：controls.update();

5. 修正GLTFLoader引入路径 #

用CDN对应版本的GLTFLoader，避免本地文件路径问题：

import { GLTFLoader } from 'https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/loaders/GLTFLoader.js';

<html lang="en">
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <meta charset="utf-8">
    <title>My first three.js app Yeah Yeah</title>
    <style>
        body {
            margin: 0;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>

<script type="module">
    import { OrbitControls } from 'https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/controls/OrbitControls.js';
    import { GLTFLoader } from 'https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/loaders/GLTFLoader.js';

    let scene = new THREE.Scene();
    let camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.01, 1000);
    let renderer = new THREE.WebGLRenderer({ antialias: true });

    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    var controls = new OrbitControls(camera, renderer.domElement);
    let loader = new GLTFLoader();

    let obj;
    loader.load("schrankd.gltf", function (gltf) {
        obj = gltf.scene;
        obj.traverse(function(child) {
            if (child instanceof THREE.Mesh) {
                child.geometry.computeVertexNormals();
                child.material.flatShading = false;
            }
        });
        scene.add(gltf.scene);
    });
    scene.background = new THREE.Color(0xffffff);
    let light = new THREE.HemisphereLight(0xffffff, 0x444444, 1.5);
    scene.add(light);
    camera.position.set(0, 5, 10);

    function animate() {
        requestAnimationFrame(animate);
        controls.update();
        renderer.render(scene, camera);
    }

    animate();
</script>

</body>
</html>

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