h5 3D glb 模型预览

网页简易实现 3d glb 等模型预览。常见的插件有 threejs 和 babylonjs。

开始

# 安装
pnpm add babylonjs-viewer

# 使用
<template>
    <div id="babylon-view-con"></div>
</template>

<script setup lang="ts">
import { ref, nextTick } from 'vue'
import * as BabylonViewer from 'babylonjs-viewer';

function playByBabylon(url: string | null) {
  nextTick(() => {
    if (!url) {
      url = 'https://playground.babylonjs.com/scenes/Rabbit.babylon'
    }

    let domElement: HTMLElement | null = document.getElementById('babylon-view-con');
    if (domElement) {
      new BabylonViewer.DefaultViewer(domElement, {
        scene: {
          debug: false
        },
        camera: {
          behaviors: {
            autoRotate: 0
          }
        },
        model: {
          url: url
        }
      })
    }
  })
}
</script>

配置加载 loading，错误页面等

默认加载 loading 使用的是 babylonjs 的头像作为 loading。现在把这个配置成自己项目的。

文档地址
https://endoc.cnbabylon.com/extensions/configuring_the_viewer#extending-and-changing-the-default-configurations

 new BabylonViewer.DefaultViewer(domElement, {
        scene: {
          debug: false
        },
        …
        templates: {
          main: {
          },
          loadingScreen: {
            params: {
              backgroundColor: "#797979",
              staticLoadingImage: "",
              loadingImage: "data:image/png;base64,…"
            },
          },
          error: {
            html: "<div>error</div>"
          }
        }
      })

使用 templates 节点进行配置。它的 main 节点是必须的，但里边的内容可以空着。loadingScreen 节点就是用来控制加载 loading 的。里边有 staticLoadingImage 和 loadingImage 这两个 img，使用 base64 图片数据。不想要其中的，就给空的字符串。定义 error，如果有错误就会显示 error 节点。