非你网

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

https://endoc.cnbabylon.com/extensions/the_babylon_viewer

https://www.npmjs.com/package/babylonjs-viewer

https://sandbox.babylonjs.com/

开始

# 安装
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>

继续阅读