3D 对象在 GLTF 文件在线查看器中的渲染效果并不差，但效果非常好

Question

我想显示在 Blender () 中创建的模型并将其展示在网页上。然而，渲染质量似乎很差，特别是边缘渲染不正确（）。相反，在在线查看器中查看模型时，边缘显得平滑且渲染正确 ()。

这是我正在使用的代码：

<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>

Answer 1

尝试在

true

上设置抗锯齿：

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

和像素比

renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))

3D 对象在 GLTF 文件在线查看器中的渲染效果并不差，但效果非常好

问题描述投票：0回答：1

1个回答

最新问题

3D 对象在 GLTF 文件在线查看器中的渲染效果并不差，但效果非常好

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1