# three-uniApp

**Repository Path**: deng_da_chao/three---uni-app

## Basic Information

- **Project Name**: three-uniApp
- **Description**: 基于three 渲染gltf模型、fbx模型 ，如：NFT项目使用
- **Primary Language**: JavaScript
- **License**: EPL-1.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 14
- **Forks**: 7
- **Created**: 2022-07-11
- **Last Updated**: 2025-02-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Threejs

## README

<!--
 * @Author: deng da chao
 * @Date: 2022-07-11 15:06:03
 * @LastEditTime: 2022-09-19 10:43:48
 * @Description: 
-->
# three - uni-app

#### 介绍
基于three 编写demo H5

#### 软件架构
"node" : v16.14.2
"three": "^0.141.0"
"yarn" : '1.22.18'

#### 安装教程

1.  yarn install 安装依赖


#### 使用说明

1.  yarn serve 运行项目


#### 特技

1.  three呈现3D商品展示台
2.  three渲染矩形展示3D图片
3.  three渲染gltf模型
4.  three渲染fbx模型
5.  手势控制模型


#### 项目演示

![demo1](https://gitee.com/deng_da_chao/three---uni-app/raw/master/src/static/chezhan.png)

![demo2](https://gitee.com/deng_da_chao/three---uni-app/raw/master/src/static/jiangtai.png)

![demo3](https://gitee.com/deng_da_chao/three---uni-app/raw/master/src/static/dome3.png)

##### 3D照片画板
  画板支持多图切换展示；
  画板主图可随意更换图片，图片如果是横向的画框自动切换成横向展示；
  背后的logo可自由替换商标logo；
  ![dome4](https://gitee.com/deng_da_chao/three---uni-app/raw/master/src/static/dome4.png)

##### 抽卡banner （原生js+css3动画）
  通过用户随意手动拖动banner 在松开手指的时候banner自由掉落进行切换翻页，动作效果页面全局可用；
  ![dome5](https://gitee.com/deng_da_chao/three---uni-app/raw/master/src/static/dome5.png)

##### 卡槽拖动物品（原生js+css3动画）
  用户拖动建筑到地图松开手指时刻寻找最近的卡槽并放入；
  ![dome6](https://gitee.com/deng_da_chao/three---uni-app/raw/master/src/static/dome6.png)