Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/milifire/sandi-ui
Based on three vue3 component library with event system, build your interactive 3D world with components
https://github.com/milifire/sandi-ui
3d components-library interactive threejs vue vue3
Last synced: about 18 hours ago
JSON representation
Based on three vue3 component library with event system, build your interactive 3D world with components
- Host: GitHub
- URL: https://github.com/milifire/sandi-ui
- Owner: MILIFIRE
- Created: 2022-04-26T12:46:32.000Z (over 2 years ago)
- Default Branch: beta
- Last Pushed: 2022-05-19T06:15:17.000Z (over 2 years ago)
- Last Synced: 2024-09-23T00:03:58.632Z (3 days ago)
- Topics: 3d, components-library, interactive, threejs, vue, vue3
- Language: JavaScript
- Homepage:
- Size: 15.4 MB
- Stars: 98
- Watchers: 3
- Forks: 7
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# sandi-ui
[中文](https://github.com/MILIFIRE/sandi-ui/blob/beta/README.md)｜[English](https://github.com/MILIFIRE/sandi-ui/blob/beta/README_EN.md)
## 简介
基于 three 编写的 带有事件系统的 vue3 组件库，用组件方式构建你的交互的 3D 世界
## 功能
### 事件系统
```html
```
你可以使用 在 Mesh 和 SDGroup 等物体组件上使用 :onclick 绑定点击事件
目前支持事件
onClick,
onPointerOver,
onPointerOut,
onPointerMove,
onPointerDown,
onPointerUp,
onWheel,
onDblClick",
onPointerMissed",
onKeyMissed,
None,
onKeyDown,
onKeyup,
onKeypress,
onContextmenu
### 接触检测
```html
```
使用 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
```js
pnpm install sandi-ui
```
yarn
```js
yarn add sandi-ui
```
npm
```js
npm install sandi-ui
```
### 使用
```js
import { createApp } from "vue";
import App from "./App.vue";
import sandiUI from "sandi-ui";
const app = createApp(App);
app.use(sandiUI);
app.mount("#app");
```
### 例子
```html
```
