README.md · 暴力狂舞/icegl-three-vue-tres

# 🧊🧊🧊 icegl-three-vue-tres 🧊🧊🧊

## 🎉🎉🎊 三维可视化项目快速落地の开源框架 🎊🎉🎉

## 🧊🧊🧊🧊🧊🧊🧊🧊🧊🧊🧊🧊🧊🧊🧊🧊🧊🧊🧊🧊

```shell
如果对您有帮助，您可以点右上角 “Star⭐” 收藏一下 ，您的star就是我开发的动力，感谢！
```

> B 站上对此项目的视频说明点击下方 👇🏻 跳转

# 生态 `@ThreeJS-@Vue3.x-@TresJS`

> icegl 出品，永久开源且免费商用，持续更新 ing，请点击右上角 start⭐ 关注

本项目融合于三大生态系统中：

-   🎲 ThreeJS \* [点击详情](https://threejs.org)
    <a href="https://www.npmjs.com/package/three">
    <img src="https://img.shields.io/npm/v/three?label=three">
    </a>
    ThreeJS 大名鼎鼎的基于浏览器渲染，JavaScript 语言的 3D 库。<br/><br/>

-   🍀 Vue3.x \* [点击详情](https://cn.vuejs.org)
    <a href="https://www.npmjs.com/package/vue">
    <img src="https://img.shields.io/npm/v/vue?label=vue&color=%2342b883">
    </a>
    易学易用，性能出色，适用场景丰富的 Web 前端框架。<br/><br/>

-   ⚡ TresJS \* [点击详情](https://tresjs.org)
<a href="https://www.npmjs.com/package/@tresjs/core">
<img src="https://img.shields.io/npm/v/@tresjs/core?color=%2382DBCA&label=%40tresjs%2Fcore&logo=data:image/svg%2bxml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTExLjY4NTQgMy40MjkxNkMxMi4wNzM4IDIuNzgxODIgMTMuMDEyIDIuNzgxODIgMTMuNDAwNCAzLjQyOTE1TDE5LjE3NzEgMTMuMDU2OUMxOS41NzcgMTMuNzIzNSAxOS4wOTY5IDE0LjU3MTQgMTguMzE5NiAxNC41NzE0SDYuNzY2MjRDNS45ODg5NCAxNC41NzE0IDUuNTA4ODMgMTMuNzIzNSA1LjkwODc1IDEzLjA1NjlMMTEuNjg1NCAzLjQyOTE2WiIgZmlsbD0iIzgyREJDNSIvPgo8cGF0aCBkPSJNMTUuNjg1NyAxMC41NDI5QzE1LjY4NTcgOS45OTA1OSAxNi4xMzM0IDkuNTQyODggMTYuNjg1NyA5LjU0Mjg4SDI2QzI2LjU1MjIgOS41NDI4OCAyNyA5Ljk5MDU5IDI3IDEwLjU0MjlWMTkuODU3MkMyNyAyMC40MDk0IDI2LjU1MjIgMjAuODU3MiAyNiAyMC44NTcySDE2LjY4NTdDMTYuMTMzNCAyMC44NTcyIDE1LjY4NTcgMjAuNDA5NCAxNS42ODU3IDE5Ljg1NzJWMTAuNTQyOVoiIGZpbGw9IiM0RjRGNEYiLz4KPGNpcmNsZSBjeD0iMTYiIGN5PSIyMiIgcj0iNiIgZmlsbD0iI0VGQUMzNSIvPgo8L3N2Zz4K" alt="npm package">
</a>
使用 Vue3.x 组件实现声明式的 ThreeJS，做属于前端的三维项目。<br/><br/>

## 🏕 点击预览：[🌏opensource.icegl.cn](https://opensource.icegl.cn)

-   如果访问太慢，请访问镜像站点：[🌏 http://myhome.217dan.com:8899](http://myhome.217dan.com:8899/)
-   如果有条件翻墙，也可直接访问 github 的镜像站:[🌏 https://hawk86104.github.io](https://hawk86104.github.io/)

```shell
因项目经常更新编译，如发现访问错误，请清空浏览器缓存。
```

![展示](./public/plugins/simpleGIS/preview/mapBuildings.gif)
![展示](./preview/数字城市3.gif)
![展示](./preview/models.gif)
![展示](./preview/incar.gif)
![展示](./preview/工业2.gif)
![展示](./preview/艺术效果.gif)
![展示](./preview/shadertoyMaterial.gif)
![展示](./preview/specialEffects2408.gif)

更多演示请进入预览页面

# 优势

-   🌈 前端の基本素养 \* FesJS [点击详情](https://fesjs.mumblefe.cn)
    <a href="https://www.npmjs.com/package/@fesjs/fes">
    <img src="https://img.shields.io/npm/v/%40fesjs%2Ffes?label=%40fesjs%2Ffes">
    </a>
    集成封装项目落地的常用库：图标、多语言、API 接口调用、Vuex/Pinia、model 数据封装、页面 layout/权限 access、路由管理等。<br/>

-   🌠 像写 Vue3.x 一样写三维可视化项目[点击详情](https://tresjs.org/guide)

![npm](https://img.shields.io/npm/v/%40tresjs%2Fcientos?label=%40tresjs%2Fcientos)全功能版本追溯保持 threeJS 最新版本 \* TresJS
最新 Vue3.x 的语法糖写法，TS/JS 通吃，让你以最新最爽快的方式构建三维可视化项目

```html
<template>
    <TresCanvas window-size>
        <TresPerspectiveCamera />
        <TresMesh>
            <TresTorusGeometry :args="[1, 0.5, 16, 32]" />
            <TresMeshBasicMaterial color="orange" />
        </TresMesh>
    </TresCanvas>
</template>
<script setup lang="ts">
    import { useRenderLoop, useTexture } from '@tresjs/core'
    //读取材质
    const pTexture = await useTexture(['./**.jpg', './**.png'])
    const { onLoop } = useRenderLoop()
    onLoop(({ delta }) => {
        //循环render
    })
</script>
```

### 敬请右上角一键三连: 关注 💛 点赞 ⭐ fork👣

# ✅ 快速开始

```
1、git clone 或者 直接下载 本项目

2、cd 到项目根目录

3、yarn	//安装依赖

4、yarn pre.dev	// 预览 下的调试模式

5、yarn dev // 自己项目 下的调试模式

6、yarn pre.build	//预览 下的编译打包

7、yarn build	//自己项目 下的编译打包

8、yarn both  //同时启动 dev 和 pre.dev 可以边调试自己得项目，边对照移植样例和插件
```

![展示](./preview/compileMode.png)

# 📖 文档

## 使用说明：[🌏docs.icegl.cn](https://docs.icegl.cn/)

## 三维编辑器：[📊 原生编辑器＋插件生成器](https://docs.icegl.cn/docs/three-vue-tres/editor/threeeditor.html)

## UI 编辑器：[📊 GoView 导出＋配置导入组件](https://docs.icegl.cn/docs/three-vue-tres/editor/goview.html)

# 🧩 丰富的[插件应用市场🌏tvtstore](https://www.icegl.cn/tvtstore)
### 插件中心 [🌏www.icegl.cn/tvtstore](https://www.icegl.cn/tvtstore) 包含各式各样的项目场景和功能。插件是 ICE 社区生态中重要的一环，在应用市场中完整应用和普通插件统一称为插件。<br/>
<a href="https://www.icegl.cn/tvtstore">
<img src="https://icegl-1314935952.cos.ap-beijing.myqcloud.com/uploads/20240814/5b370fdeb9e9817c4b78cd919da74d8a.png" style="width:800px;max-width:100%;" alt="tvt.js插件市场"></a>

### 我们将会逐一把落地的项目以插件的形式加入到此开源框中...
<a href="https://www.icegl.cn/p/tvtdeveloper.html">
<img src="https://icegl-1314935952.cos.ap-beijing.myqcloud.com/uploads/20240712/bd350b8cb5bc46d4b7a05b903cf787b4.png" style="width:800px;max-width:100%;" alt="tvt.js插件市场"></a>

# ❓ 问题反馈

在使用中有任何问题，请使用以下联系方式联系我们

-   问答社区: [图形学社区 icegl.cn](https://www.icegl.cn/ask)

-   欢迎大家也加入微信群，已有几个群已满，一起学习讨论 webgl。加微信我拉进群
<p align = "left">    
<img src="https://icegl-1314935952.cos.ap-beijing.myqcloud.com/uploads/20230731/17d59bab46815cce1f4f1e09dcbb6ccc.png" width="300" />
</p>

# ⭐ 点星历史

[![Star History Chart](https://api.star-history.com/svg?repos=hawk86104/icegl-three-vue-tres,hawk86104/vue3-ts-cesium-map-show&type=Date)](https://star-history.com/#hawk86104/icegl-three-vue-tres&hawk86104/vue3-ts-cesium-map-show&Date)

# ™️ 版权信息

本项目遵循 Apache2 开源协议发布，并提供永久免费使用以及商用。

> 如果您将此项目用于商业用途，请遵守 Apache2.0 协议并保留作者技术支持声明。

-   二次开发如用于商业性质或开源竞品请不要删除和修改 TvT.js 源码头部的版权与作者声明及出处
-   允许进行商用，但是不允许二次开源出来并进行收费

本项目包含的第三方源码和二进制文件之版权信息另行标注。

关注我们的公众号获得最新讯息
<p align = "left">    
<img src="https://icegl-1314935952.cos.ap-beijing.myqcloud.com/uploads/20240619/de51c5e66dd5a8647100cc3b61171223.jpg" width="300" />
</p>

暴力狂舞/icegl-three-vue-tres

简介

发行版

贡献者

近期动态

暴力狂舞/icegl-three-vue-tres .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

暴力狂舞/icegl-three-vue-tres