Three.js模型质量很差

debugcn 发表于 Dev

杰里米·加雄

我使用three.js创建了一个有角度的项目，但是当我加载3D模型时，它们的质量很差。

当我在以下网站上加载相同的模型时：https：//gltf-viewer.donmccurdy.com/，它们是完美的，而且质量很高。我不明白为什么。我试图复制此网站的一些开源代码，但这并没有改变任何内容：

我试图在gltf中加载：

const loader = new GLTFLoader().setCrossOrigin('anonymous')
  .setDRACOLoader(new DRACOLoader().setDecoderPath('./wasm/'));
loader.load(
  'assets/Newblend3.glb',
  (gltf) => {
    gltf.scene.scale.set(200, 200, 200);
    this.scene.add(gltf.scene);
  },
  (xhr) => {
    console.log((xhr.loaded / xhr.total * 100) + '% loaded');
  },
  (error) => {
    console.log('An error happened');
  }
);

在obj + mtl中：

this.mtlLoader.load(await item?.mtl?.toUrl(), (materials) => {
  materials.preload();
  objLoader.setMaterials(materials);
  objLoader.load(item.objFile.url, (object) => {
    const mesh = object;
    this.scene.add(mesh);
  });
}, (i) => {
  console.log('Progress : ', i);
}, (e) => {
  console.log('Error : ', e);
});

但是第一种方法和第二种方法都不如我所愿：

在gltf-viewer.donmccurdy.com上：

在我的角度应用程序上：

不只是灯光，三个人在gltf-viewer.donmccurdy.com版本上确实更漂亮。

我也有404错误：

提前致谢。

杰里米

man

链接到的查看器会添加灯光，而您为自己的查看器发布的代码不会

这是查看器中的代码

https://github.com/donmccurdy/three-gltf-viewer/blob/master/src/viewer.js#L412

我的许可

  addLights () {
    const state = this.state;

    if (this.options.preset === Preset.ASSET_GENERATOR) {
      const hemiLight = new HemisphereLight();
      hemiLight.name = 'hemi_light';
      this.scene.add(hemiLight);
      this.lights.push(hemiLight);
      return;
    }

    const light1  = new AmbientLight(state.ambientColor, state.ambientIntensity);
    light1.name = 'ambient_light';
    this.defaultCamera.add( light1 );

    const light2  = new DirectionalLight(state.directColor, state.directIntensity);
    light2.position.set(0.5, 0, 0.866); // ~60º
    light2.name = 'main_light';
    this.defaultCamera.add( light2 );

    this.lights.push(light1, light2);
  }

其中最重要的是DirectionalLight。有了它，就不会有阴影。

例：

html, body, canvas { width: 100%; height: 100%; margin: 0; display: block; }
#info { position: absolute; left: 5px; top: 5px; color: white; }

<canvas id="c"></canvas>
<div id="info"></div>
<script type="module">
import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r122/build/three.module.js';
import {OrbitControls} from 'https://threejsfundamentals.org/threejs/resources/threejs/r122/examples/jsm/controls/OrbitControls.js';
import {GLTFLoader} from 'https://threejsfundamentals.org/threejs/resources/threejs/r122/examples/jsm/loaders/GLTFLoader.js';

function main() {
  const canvas = document.querySelector('#c');
  const renderer = new THREE.WebGLRenderer({canvas});

  const fov = 45;
  const aspect = 2;  // the canvas default
  const near = 0.1;
  const far = 100;
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
  camera.position.set(5, 10, 10);

  const controls = new OrbitControls(camera, canvas);
  controls.target.set(0, 2, 0);
  controls.update();

  const scene = new THREE.Scene();

  const lights = [];
  
  {
    const light = new THREE.DirectionalLight(0xFFFFFF, 0.8 * Math.PI);
    light.position.set(50, 100, 20);
    scene.add(light.target);
    lights.push({name: 'DirectionalLight', light});
  }

  {
    const light = new THREE.AmbientLight(0xFFFFFF, 1);
    lights.push({name: 'AmbientLight', light});
  }

  {
    const light = new THREE.HemisphereLight(0xffffbb, 0x080820, 1);
    lights.push({name: 'HemisphereLight', light});
  }

  {
    const gltfLoader = new GLTFLoader();
    gltfLoader.load('https://threejsfundamentals.org/threejs/resources/models/animals/Pig.gltf', (gltf) => {
      const root = gltf.scene;
      scene.add(root);
    });
  }

  function resizeRendererToDisplaySize(renderer) {
    const canvas = renderer.domElement;
    const width = canvas.clientWidth;
    const height = canvas.clientHeight;
    const needResize = canvas.width !== width || canvas.height !== height;
    if (needResize) {
      renderer.setSize(width, height, false);
    }
    return needResize;
  }
  
  const infoElem = document.querySelector('#info');

  function render(time) {
    time *= 0.001;

    if (resizeRendererToDisplaySize(renderer)) {
      const canvas = renderer.domElement;
      camera.aspect = canvas.clientWidth / canvas.clientHeight;
      camera.updateProjectionMatrix();
    }
    
    const ndx = time % 3 | 0;
    lights.forEach(({name, light}, i) => {
      if (i == ndx) {
        if (!light.parent) { scene.add(light); infoElem.textContent = name; }
      } else {
        if (light.parent) { scene.remove(light); }
      }
    });

    renderer.render(scene, camera);

    requestAnimationFrame(render);
  }

  requestAnimationFrame(render);
}

main();
</script>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。