Vue.js Three.js: 为什么加载的 OBJ 模型模糊？

<template>
  <div ref="canvas"></div>
</template>
<script>
import * as THREE from 'three';
import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader';
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

export default {
  mounted() {
    // 创建场景、相机和渲染器
    const scene = new THREE.Scene();
    scene.background = new THREE.Color(0x040b1a);
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.set(0, 0, 100);
    // 调整相机位置
    camera.lookAt(0, 0, 0);
    camera.near = 1;
    // 调整近裁剪面
    camera.far = 10000;
    // 调整远裁剪面
    camera.updateProjectionMatrix();
    // 更新相机投影矩阵
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    this.$refs.canvas.appendChild(renderer.domElement);

    let ambientLight = new THREE.AmbientLight(0xffffff, 2, 0);
    ambientLight.position.set(0, 0, 0);
    scene.add(ambientLight);

    const controls = new OrbitControls(camera, renderer.domElement);
    controls.enableDamping = true;

    const out = new THREE.Object3D();
    const mtlLoader = new MTLLoader();
    const objLoader = new OBJLoader();

    mtlLoader.load('./obj/船体.mtl', (materials) => {
      materials.preload();
      objLoader.load('./obj/船体.obj', (object) => {
        object.position.set(0, 0, 0);
        object.traverse((child) => {
          if (child instanceof THREE.Mesh) {
            // 计算模型的中心点位置
            let center = new THREE.Vector3();
            child.geometry.computeBoundingBox();
            child.geometry.boundingBox.getCenter(center);
            child.geometry.translate(-center.x, -center.y, -center.z);
          }
        });
        out.add(object);
        scene.add(out);
      });
    });

    // 开始渲染循环
    function animate() {
      requestAnimationFrame(animate);
      // 渲染到屏幕上
      renderer.render(scene, camera);
    }
    animate();
  }
}
</script>
<style scoped>
</style>
<p>在 Vue.js 项目中使用 Three.js 加载 OBJ 模型时，模型出现模糊可能是由多种原因导致的，以下是一些常见的解决方法：</p>
<ol>
<li><strong>材质加载：</strong> 确保正确加载了 OBJ 模型对应的 MTL 材质文件，并将其应用到模型上。代码中使用了 <code>MTLLoader</code> 加载 MTL 文件，并使用 <code>preload()</code> 方法预加载材质。</li>
<li><strong>模型居中：</strong> 模型在加载后需要进行居中处理，使其位于场景中心。代码中使用 <code>computeBoundingBox()</code> 和 <code>getCenter()</code> 方法计算模型的中心点位置，并将其平移到场景中心。</li>
<li><strong>渲染器设置：</strong> 检查渲染器的设置，确保其分辨率与页面大小匹配，并设置正确的抗锯齿选项。代码中使用 <code>renderer.setSize()</code> 设置渲染器大小，但没有设置抗锯齿选项，可以考虑使用 <code>renderer.setPixelRatio()</code> 设置像素比，并启用抗锯齿选项 <code>renderer.antialias = true;</code>。</li>
<li><strong>相机设置：</strong> 调整相机的视场角、位置和裁剪面，使其能够正确显示模型。代码中设置了相机的视场角、位置和裁剪面，可以根据需要进行调整。</li>
<li><strong>模型本身：</strong> 确保模型文件本身的质量足够高，避免使用低分辨率或压缩后的模型文件。</li>
<li><strong>环境光：</strong> 添加环境光可以改善模型的亮度和视觉效果，代码中已经添加了环境光。</li>
</ol>
<p>如果以上方法都无法解决问题，请提供更详细的代码和问题描述，以便进一步排查原因。</p>