Three.JS - GLTF 模型加载缓慢。如何加快加载时间？

Question

我将 GLTF 模型（9mb）加载到 ThreeJS 中。加载速度肯定很慢。在我的 PC 上加载大约需要 4-5 秒，在 iPhone 上加载大约需要 11 秒。如何加快渲染时间？我的 PC 和 iPhone 从 ThreeJS 网站加载示例的速度比我的项目更快。我的项目只加载了一个对象，所以我觉得它应该比 ThreeJS 网站上的示例加载得更快。

我的示例项目位于此处@http: //flowolfsworld.com/

代码

var ourObj;
var ourObj2;

// Instantiate a loader
var loader = new THREE.GLTFLoader();

// Optional: Provide a DRACOLoader instance to decode compressed mesh data
var dracoLoader = new THREE.DRACOLoader();
dracoLoader.setDecoderPath( '/js/draco/' );
loader.setDRACOLoader( dracoLoader );



let scene, camera, renderer, stars, starGeo;

function init() {

  scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000)
  camera.position.z = 25;

  //renderer = new THREE.WebGLRenderer();
 renderer = new THREE.WebGLRenderer();
  renderer.setClearColor("#000000");
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  starGeo = new THREE.Geometry();
  for(let i=0;i<6000;i++) {
    star = new THREE.Vector3(
      Math.random() * 600 - 300,
      Math.random() * 600 - 300,
      Math.random() * 600 - 300
    );
    star.velocity = 0;
    star.acceleration = 0.02;
    starGeo.vertices.push(star);
  }

  let sprite = new THREE.TextureLoader().load( 'star.png' );
  let starMaterial = new THREE.PointsMaterial({
    color: 0xaaaaaa,
    size: 0.7,
    map: sprite
  });

  stars = new THREE.Points(starGeo,starMaterial);
  scene.add(stars);

 // window.addEventListener("resize", onWindowResize, false);
  var hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
  hemiLight.position.set( 0, 300, 0 );
  scene.add( hemiLight );
  
  var dirLight = new THREE.DirectionalLight( 0xffffff );
  dirLight.position.set( 75, 300, -75 );
  scene.add( dirLight );



  loader.load(
    // resource URL
    'objs/dracowolf.gltf',
    // called when the resource is loaded
    function ( gltf ) {
  
      scene.add( gltf.scene );
      ourObj = gltf.scene;
      animate();
  
    },
    // called while loading is progressing
    function ( xhr ) {
  
      console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
  
    },
    // called when loading has errors
    function ( error ) {
  
      console.log( 'An error happened' );
  
    }
  );

  
}



function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
  }


  
function animate() {


  requestAnimationFrame(animate);
  renderer.render(scene, camera);

  if(ourObj){
        ourObj.rotation.y -= .01;
    }
  starGeo.vertices.forEach(p => {
    p.velocity += p.acceleration
    p.y -= p.velocity;
    
    if (p.y < -200) {
      p.y = 200;
      p.velocity = 0;
    }
  });
  starGeo.verticesNeedUpdate = true;
  stars.rotation.y +=0.002;

}
init();

Answer 1

关于这个特定模型的一些建议：

1. 使用.glb，不使用.gltf。glTF 的二进制形式将比.gltf嵌入二进制数据的小 25-30%，并且不必从数据 URI 进行解码。.gltf与单独的二进制文件一起使用.bin也是一种选择。使用 glTF-Pipeline 进行这些更改。
2. dracoLoader.preload()在模型开始加载之前调用来预加载 Draco 解码器。在我对您的页面的测试中，这将节省模型下载后获取解码器所花费的 500 毫秒。
3. 考虑使用https://github.com/zeux/meshoptimizer#installing-gltfpack来简化模型，或者至少对其进行量化，然后对其进行 gzip。这是 Draco 的替代方案，可能无法很好地压缩文件，但有时可以减少总体加载时间。