非你网

网页简易实现 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>

继续阅读

小白一枚，从前端开始，开发区块链项目。

需要知道的事情

1. chrome 浏览器，先要安装 metaMask 插件。
2. 代码中，检测 metaMask 插件是否已经安装，并是可行的状态。

   
   # 不需要任何引入，就是这样直接判断
   if (window.ethereum != null)  {

}