我使用threejs GLTFLoader加载GLTF 3d模型，但是为什么这么丑

Question

我是前端菜鸟，不了解OpenGL。我使用three.js GLTFLoader加载3D模型，但它是如此丑陋，我根本不喜欢模型网站上的预览。如何更新代码，使其看起来更像示例输出，如下图所示？

  <script>
    const vm = new Vue({
      el: '#root',
      data(){
        return {
          x: 100,
          y: 100,
          z: 100
        }
      },
      mounted(){
        this.initWorld();
        let material = new THREE.LineBasicMaterial({ color: 0x0000ff });
        Vue.prototype.loader = new THREE.GLTFLoader();
        this.loader.load(
          './scene.gltf',
          this.onLoadend,
          this.onLoading,
          this.onError
        )
      },
      methods: {
        initWorld(){
          const { innerWidth: w, innerHeight: h } = window;
          const render = new THREE.WebGLRenderer({
            alpha: false,
            antialias: true,
          });
          render.setSize(w, h);
          document.querySelector('#root').appendChild(render.domElement);
          const camera = new THREE.PerspectiveCamera(45, w/h, 1, 500);
          camera.position.set(this.x, this.y, this.z);
          camera.lookAt(0, 0, 0);
          const scene = new THREE.Scene();
          Vue.prototype.camera = camera;
          Vue.prototype.scene = scene;
          Vue.prototype.render = render;
        },
        refreshRender(){
          this.render.render(this.scene, this.camera);
        },
        changeCameraPosition(x, y, z){
          this.camera.position.set(x, y, z);
          this.refreshRender();
        },
        onLoadend(gltf){
          this.scene.add(gltf.scene);
          console.log(gltf);
          this.scene = gltf.scene;
          this.refreshRender();
        },
        onLoading(xhr){
          console.log((xhr.loaded / xhr.total * 100) + '% loaded');
        },
        onError(err){
          console.log(`An error happened: ${err}`);
          throw err;
        }
      }
    })
  </script>

我希望它看起来像 但是我现在得到这个

Answer 1

我也不是Three.js的专家，但这对我有用 1）使用以下查看器检查您导出的glTF文件是否正确加载？ https://gltf-viewer.donmccurdy.com/（如果是）并且仍显示为

我建议您在场景中使用glTF金属粗糙度和glTF镜面光泽度，以获得所需的输出。