milifire/sandi-ui

Based on three vue3 component library with event system, build your interactive 3D world with components

sandi-ui

中文｜English

简介

基于 three 编写的 带有事件系统的 vue3 组件库，用组件方式构建你的交互的 3D 世界

功能

事件系统

<SDGroup :onClick="() => { v1 += 0.5 }"></SDGroup>

你可以使用 在 Mesh 和 SDGroup 等物体组件上使用 :onclick 绑定点击事件 目前支持事件 onClick, onPointerOver, onPointerOut, onPointerMove, onPointerDown, onPointerUp, onWheel, onDblClick", onPointerMissed", onKeyMissed, None, onKeyDown, onKeyup, onKeypress, onContextmenu

接触检测

<SDRaycaster
  :lockDirection="true"
  :helper="true"
  :direction="[1,0,0]"
  :raycasterCallback="consoleRay"
  :far="4"
  :offset="[0,0,0]"
/>

使用 SDRaycaster 组件检测是否有物体接触，你可以做出很有意思的交互 demo

CSS2D 支持

可以结合其他组件库等好玩的交互啊

CSS3D 支持

可以结合其他组件库立体效果，做出更好玩的交互

高级组件

SDLight、 SDMaterial、 SDMesh、SDGeometry 等组件可以支 threejs 实例注入

动画系统

SDAnimationAction SDAnimationMixer 组件 控制 FBX GLTF 文件的动画播放

控制器

SDOrbitControls、SDTransformControls、SDPointerLockControls 等 快速提供 360 度观察，移动缩放控制，第一人称控制

资源自动回收

vue 生命周期，当组件卸载时，会自动回收资源

文档地址

https://milifire.github.io/sandi-ui/

逐渐完善中， 里面有的例子，供你参考

快速开始

安装

pnpm

pnpm install sandi-ui

yarn

yarn add sandi-ui

npm

npm install sandi-ui

使用

import { createApp } from "vue";
import App from "./App.vue";
import sandiUI from "sandi-ui";
const app = createApp(App);
app.use(sandiUI);
app.mount("#app");

例子

<template>
  <SDWebglRenderer :width="800" :height="400">
    <SDScene>
      <SDPerspectiveCamera :positionZ="20" :positionY="6" />
      <SDFBXLoader url="/fbx/Rumba Dancing.fbx">
        <SDMeshBasicMaterial meshName="body1">
          <SDTextureLoader url="img/zhangfei.jpg" type="map" />
        </SDMeshBasicMaterial>
        <SDMeshBasicMaterial meshName="face">
          <SDTextureLoader url="img/face.png" type="map" />
        </SDMeshBasicMaterial>
        <SDAnimationMixer>
          <SDAnimationAction />
        </SDAnimationMixer>
      </SDFBXLoader>
    </SDScene>
  </SDWebglRenderer>
</template>

sandi-ui's Issues

文档错误太多 啦,,,, 还是看代码清楚哈哈

自定义SDMaterial 的材质对象可否考虑支持数组形式？

大神你好，首先感谢开源这个UI库。我最近在学习相关知识，有一点点小需求就是要实现一个六面体每个面不同的材质。
网上 threejs 的例子
let cubeMaterial = [
new THREE.MeshBasicMaterial({ color: 'blue' }), // right
new THREE.MeshBasicMaterial({ color: 'yellow' }), // left
new THREE.MeshBasicMaterial({ map: new THREE.CanvasTexture(getTextCanvas('Leo Test Label')) }), // top
new THREE.MeshBasicMaterial({ color: 'black' }), // bottom
new THREE.MeshBasicMaterial({ color: 'green' }), // back
new THREE.MeshBasicMaterial({ color: 'red' }) // front
];
放在sandi-ui里面渲染没问题，但是关闭画面的时候，会报错，说这个 material.dispose() 不是个方法。

threejs 对 材质的支持是可以传array 的

请作者看看，这个自定义材质是否可以支持数组形式的传递。

或者有其他方案实现，我这个小需求，不胜感激。