关于3d模型预览相关

playcanvas

很强大的一个引擎，原生支持加载高斯点云文件且提供强大的高斯加载能力

three.js

three加载高斯注意事项

我使用 sparkjs 官网：https://sparkjs.dev/

<style> body {margin: 0;} </style>
<script type="importmap">
  {
    "imports": {
      "three": "https://cdnjs.cloudflare.com/ajax/libs/three.js/0.178.0/three.module.js",
      "@sparkjsdev/spark": "https://sparkjs.dev/releases/spark/0.1.10/spark.module.js"
    }
  }
</script>
<script type="module">
  import * as THREE from "three";
  import { SplatMesh } from "@sparkjsdev/spark";

  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
  const renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement)

  const splatURL = "https://sparkjs.dev/assets/splats/butterfly.spz";
  const butterfly = new SplatMesh({ url: splatURL });
  butterfly.quaternion.set(1, 0, 0, 0);
  butterfly.position.set(0, 0, -3);
  scene.add(butterfly);

  renderer.setAnimationLoop(function animate(time) {
    renderer.render(scene, camera);
    butterfly.rotation.y += 0.01;
  });
</script>

1. 不要开启WebGL抗锯齿 此项对高斯模型无效且及其耗费性能

const renderer = new THREE.WebGLRenderer({ antialias: false });// 此项默认为false

2. 如果模型文件在（轻微旋转下）转动时出现类似贴图跳动的情况（实际时点云渲染排序的问题） 将排序精度提高到float32 即可大幅缓解。文档位置。 经测试性能影响不大

const viewpoint = spark.newViewpoint({
  ...
  sort32: true; 
  ...
});

3. 转动过快出现 闪动 问题与2不同 （2是轻微旋转） 可以修改渲染render时机 等待排序完成后渲染

    sparkRenderer.defaultView.setAutoUpdate(false); //取消自动排序
    async function animate(): Promise<void> {
      if (!isAnimating) return;

      controls.update();
      // 在渲染前等待高斯模型排序完成
      if (sparkRendererRef.current && sparkRendererRef.current.defaultView && prepareLocked === false) {
        prepareLocked = true;
        try {
          await sparkRendererRef.current.defaultView.prepare({
            scene: scene,
            camera: camera, 0.
            update: false,  // 不强制排序（这里一定设置为false，每次都排序性能影响很大，可以通过控制SparkViewpoint中的sortDistance控制排序灵敏度）
            forceOrigin: false,
          });
        } catch (e) {
          // 忽略排序错误，继续渲染
        } finally {
          prepareLocked = false;
        }
      }
      renderer.render(scene, camera);
      requestAnimationFrame(animate);
    }
    animate();