{"id":15044717,"url":"https://github.com/milifire/sandi-ui","last_synced_at":"2025-10-24T09:30:46.807Z","repository":{"id":40544054,"uuid":"485782623","full_name":"MILIFIRE/sandi-ui","owner":"MILIFIRE","description":" Based on three vue3 component library with event system, build your interactive 3D world with components","archived":false,"fork":false,"pushed_at":"2022-05-19T06:15:17.000Z","size":16133,"stargazers_count":99,"open_issues_count":1,"forks_count":7,"subscribers_count":3,"default_branch":"beta","last_synced_at":"2025-01-31T00:34:37.894Z","etag":null,"topics":["3d","components-library","interactive","threejs","vue","vue3"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MILIFIRE.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-04-26T12:46:32.000Z","updated_at":"2024-11-26T01:58:12.000Z","dependencies_parsed_at":"2022-07-27T09:02:50.551Z","dependency_job_id":null,"html_url":"https://github.com/MILIFIRE/sandi-ui","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MILIFIRE%2Fsandi-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MILIFIRE%2Fsandi-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MILIFIRE%2Fsandi-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MILIFIRE%2Fsandi-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MILIFIRE","download_url":"https://codeload.github.com/MILIFIRE/sandi-ui/tar.gz/refs/heads/beta","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":237944085,"owners_count":19391588,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["3d","components-library","interactive","threejs","vue","vue3"],"created_at":"2024-09-24T20:50:56.868Z","updated_at":"2025-10-24T09:30:39.911Z","avatar_url":"https://github.com/MILIFIRE.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# sandi-ui\n\n[中文](https://github.com/MILIFIRE/sandi-ui/blob/beta/README.md)｜[English](https://github.com/MILIFIRE/sandi-ui/blob/beta/README_EN.md)\n\n## 简介\n\n基于 three 编写的 带有事件系统的 vue3 组件库，用组件方式构建你的交互的 3D 世界\n\n## 功能\n\n### 事件系统\n\n```html\n\u003cSDGroup :onClick=\"() =\u003e { v1 += 0.5 }\"\u003e\u003c/SDGroup\u003e\n```\n\n你可以使用 在 Mesh 和 SDGroup 等物体组件上使用 :onclick 绑定点击事件\n目前支持事件\nonClick,\nonPointerOver,\nonPointerOut,\nonPointerMove,\nonPointerDown,\nonPointerUp,\nonWheel,\nonDblClick\",\nonPointerMissed\",\nonKeyMissed,\nNone,\nonKeyDown,\nonKeyup,\nonKeypress,\nonContextmenu\n\n### 接触检测\n\n```html\n\u003cSDRaycaster\n  :lockDirection=\"true\"\n  :helper=\"true\"\n  :direction=\"[1,0,0]\"\n  :raycasterCallback=\"consoleRay\"\n  :far=\"4\"\n  :offset=\"[0,0,0]\"\n/\u003e\n```\n\n使用 SDRaycaster 组件检测是否有物体接触，你可以做出很有意思的交互 demo\n\n### CSS2D 支持\n\n可以结合其他组件库等好玩的交互啊\n\n### CSS3D 支持\n\n可以结合其他组件库立体效果，做出更好玩的交互\n\n### 高级组件\n\nSDLight、 SDMaterial、 SDMesh、SDGeometry 等组件可以支 threejs 实例注入\n\n### 动画系统\n\nSDAnimationAction SDAnimationMixer 组件 控制 FBX GLTF 文件的动画播放\n\n### 控制器\n\nSDOrbitControls、SDTransformControls、SDPointerLockControls 等 快速提供 360 度观察，移动缩放控制，第一人称控制\n\n### 资源自动回收\n\nvue 生命周期，当组件卸载时，会自动回收资源\n\n## 文档地址\n\nhttps://milifire.github.io/sandi-ui/\n\n\n逐渐完善中， 里面有的例子，供你参考\n\n## 快速开始\n\n### 安装\n\npnpm\n\n```js\npnpm install sandi-ui\n```\n\nyarn\n\n```js\nyarn add sandi-ui\n```\n\nnpm\n\n```js\nnpm install sandi-ui\n```\n\n### 使用\n\n```js\nimport { createApp } from \"vue\";\nimport App from \"./App.vue\";\nimport sandiUI from \"sandi-ui\";\nconst app = createApp(App);\napp.use(sandiUI);\napp.mount(\"#app\");\n```\n\n### 例子\n\n```html\n\u003ctemplate\u003e\n  \u003cSDWebglRenderer :width=\"800\" :height=\"400\"\u003e\n    \u003cSDScene\u003e\n      \u003cSDPerspectiveCamera :positionZ=\"20\" :positionY=\"6\" /\u003e\n      \u003cSDFBXLoader url=\"/fbx/Rumba Dancing.fbx\"\u003e\n        \u003cSDMeshBasicMaterial meshName=\"body1\"\u003e\n          \u003cSDTextureLoader url=\"img/zhangfei.jpg\" type=\"map\" /\u003e\n        \u003c/SDMeshBasicMaterial\u003e\n        \u003cSDMeshBasicMaterial meshName=\"face\"\u003e\n          \u003cSDTextureLoader url=\"img/face.png\" type=\"map\" /\u003e\n        \u003c/SDMeshBasicMaterial\u003e\n        \u003cSDAnimationMixer\u003e\n          \u003cSDAnimationAction /\u003e\n        \u003c/SDAnimationMixer\u003e\n      \u003c/SDFBXLoader\u003e\n    \u003c/SDScene\u003e\n  \u003c/SDWebglRenderer\u003e\n\u003c/template\u003e\n```\n\n![Image text](https://raw.githubusercontent.com/MILIFIRE/sandi-ui/beta/public/sandi.gif)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmilifire%2Fsandi-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmilifire%2Fsandi-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmilifire%2Fsandi-ui/lists"}