Write the Code. Change the World.

3月 21

发表于 • 606 views • 没有评论!

web3,web3d,前端

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

继续阅读

3月 13

发表于 • 709 views • 没有评论!

前端

LogicFlow 默认有一些节点。但有时候，默认的节点完成不了项目需求。这个就需要自定义节点，刚好LogicFlow 支持自定义节点。

https://07.logic-flow.cn/guide/advance/customNode.html

如上图，现在需要一个输入口，n 个输出口，这个 n 是大于 0 的整数。一般也就最多 10 以下的整数吧。默认的节点就不支持，这里就需要自定义了。

要解决以下问题。

  • 节点支持 resize （继承 RectResize，就可以实现）
  • 根据输出口的数字动态生成锚点（1 个默认输入锚点， n 个输出锚点）
  • 在锚点旁边加入数字进行标识（大于 1 个的时候，需要和数据一一对应，所以需要标识）

继续阅读

3月 06

发表于 • 447 views • 没有评论!

前端

daisyui 的 Dropdown 组件，点击展开对象时，怎么自动关闭展开对象呢？daisyui 默认没提供这个功能。只需要在点击对象时，触发 blur 方法即可。

if (document.activeElement instanceof HTMLElement) {
    document.activeElement.blur()
}