# icegl-three-vue-tres

**Repository Path**: feifan1943/icegl-three-vue-tres

## Basic Information

- **Project Name**: icegl-three-vue-tres
- **Description**: 🎉🎉🎊 一款让你的三维可视化项目快速落地の开源框架 🎊🎉🎉
永久开源免费商用 数字孪生 三维可视化 threejs webgl three three.js
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: http://opensource.icegl.cn
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 888
- **Created**: 2023-12-07
- **Last Updated**: 2023-12-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 🧊🧊🧊 icegl-three-vue-tres 🧊🧊🧊
## 🎉🎉🎊 三维可视化项目快速落地の开源框架 🎊🎉🎉
## 🧊🧊🧊🧊🧊🧊🧊🧊🧊🧊🧊🧊🧊🧊🧊🧊🧊🧊
<br/>
<p align="center">
    <a target="_black" href="https://space.bilibili.com/410503457">
       <img alt="bilibili" src="https://img.shields.io/badge/dynamic/json?url=https://api.bilibili.com/x/relation/stat?vmid=410503457&query=data.follower&color=282c34&label=B站&labelColor=FE7398&logo=data%3Aimage%2Fpng%3Bbase64%2CiVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAD7ElEQVR4nO2dW9WrMBCFK6ESkFAJSKiESqgEHCABCZWAhEpAAhL2ecik5dDc%2FpXLBDLfWnlqy0xmJ5BMQnq5CIIgCIIgCIIgCIIgCEIBAHQAemYfrgCunD6wAKAHsEKxALgx+bCQD8%2FS9tmgVqeDr1lLigDgZvDhXso+K9TyTBQRwRJ8AHjntl0Flh5QRAQK%2FmKxPeayWx2OXpBNBKiHvi34b7T2MC4pAvW6twR%2FRwkRKPizBN8CgEcuESj4Lwm+BwBjahEk+H8EwJRKhOaCDzW8e1JLfkUUH1NgmR3XmHffHR1l+72BSs8d7w8U+JDAnZERQMcV+CtUi7dNqFqibB4J7vtrq7xKCuAasbTMXCL4T+5aVk6+2xHUrWdhruAR6HIJcOeu2UHI8zyAe2ytWfEdWz9PVvQ8YAmIQ5dDAB9LFsMVAv8oMO2zAGrC5WNIarRiAuKR9jYEd9pY08aa6uUzIHGRdkgKd8pY0yc1WjEBAqypDYoAG0QAZkQAZkQAZkQAZk4vANQenjsSzS3I%2FwcSbXU5jQBUkRtdf4Rar90v8kSv3+I3ffCCSpk8I%2Fw+lgDkdI%2Fv2rEp2CaiWm1AsDQLlDAD+dlFXLMeAaCSeLZdaSFE5VUQNot38cKuEeBgAsSuG0flVZBmEanbXfNQAsS0fgBYIn2fIu3%2FBBMHEyBmDXlFfA8IzeHb+Ems4WAChKykrVA9ZfsQTL57jXzRg4A5wC%2FA8N4ADiZAZwm2XjW75Qh2KOTfA0p4kygPw28OJcCVgn3nDnYo2EwEYRgGH0qAMyICMCMCMCMCMCMCMCMCMCMCfP3qwHDOQ4AAUekTk8FaBRihJnZdYbvtCGC7LvmkM63GjVDINPFrQgCq5ETXfmMzI90FXzPvfqt7x4rEu%2FZaEcCUxFvgz2zO+BUn6UkoaEEAsptiMSX5e8FoRYCN7cVgb4Vq7U%2FH50Pq4JNP7Qiw8UFnJwcK+tXy+Wj6PLEvPgHSHv5UgwA1IQIwwyFAyLJin9RoxYgAzAQIkPwNmf26busC+OIx5TDqo5nDT+F%2FSS%2F9CYzwb+No49zNy2evkYv0LywGGAXUvp6eSneycqOic0w20k7CNgKE7jJunSGLACTCxF27ylmQc98T5MQUH49swd+I0HPXslLKnT0N+wnkrTKi9JZL%2FL9i1SorMmdeQ4TQQ7OFMxIMzGD45w8nUL1im7efENZLJpgPSw0pfz0cdt4U3230Td%2FTvx2R6d2FrHhEWLkq5PELOMsRPHCPnAZGv1xJteL7jbJiaW3sB2nDvPC%2FosSYvjRQz4cJ6n7KO3rYQL7M+L6nVtfDVRAEQRAEQRAEQRAEIZ5%2FSAXmdfXaoQsAAAAASUVORK5CYII%3D&cacheSeconds=3600">
    </a>
    <a target="_black" href="https://gitee.com/ice-gl/icegl-three-vue-tres">
      <img src="https://gitee.com/ice-gl/icegl-three-vue-tres/badge/star.svg?theme=dark" alt="gitee-starts" />
    </a>
</p>
<br/>

# 生态 `@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](http://opensource.icegl.cn)
![展示](./preview/数字城市1.gif)
![展示](./preview/地球2.gif)
![展示](./preview/地球3.gif)
![展示](./preview/热力图.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>
```
- 🧩 丰富的插件应用市场<br/>
插件中心包含各式各样的项目场景和功能。插件是ICE社区生态中重要的一环，在应用市场中完整应用和普通插件统一称为插件。

### 我们将会逐一把落地的项目以插件的形式加入到此开源框中...
### 敬请右上角一键三连: 关注💛 点赞⭐ fork👣

# ✅ 快速开始
```
1、git clone 或者 直接下载 本项目

2、cd 到项目根目录

3、yarn	//安装依赖

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

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

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

7、yarn build	//自己项目 下的编译打包
```
![展示](./preview/compileMode.png)

# 📖 文档
## 使用说明：[🌏docs.icegl.cn](http://docs.icegl.cn/)

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

- 问答社区: [图形学社区icegl.cn](https://www.icegl.cn/ask)
<p align = "left">   
<img src="https://icegl-1314935952.cos.ap-beijing.myqcloud.com/uploads/20230421/QQ20230421-121209.png" width="680" />
</p>

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

# ™️ 版权信息

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

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

版权所有Copyright © 2022-2025 by 🧊icegl (https://www.icegl.cn)

All rights reserved。