# uni_threejs_h5_vr

**Repository Path**: chp0314/uni_threejs_h5_vr

## Basic Information

- **Project Name**: uni_threejs_h5_vr
- **Description**: Three.js VR全景展示
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 13
- **Created**: 2024-09-11
- **Last Updated**: 2024-09-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


###	介绍 
1. 全景展示使用 THREE.js 
2. 热点位置大小可编辑，配置加载
3. 示例项目中 pages/editor/editor 为编辑页面 [点击预览](https://unithreevr.pages.dev/#/pages/editor/editor)
4. 示例项目中 pages/index/index 为展示页面 (与编辑页相比的话就是去除了编辑功能) [点击预览](https://unithreevr.pages.dev/#/)
5. 项目部分代码及素材参考 [大帅老猿](https://juejin.cn/post/6973865268426571784)

###	tips
1. 使用了renderjs目前支持 App端与H5端，renderjs不支持小程序，（编辑页没有使用renderjs所以无法在App中使用）
2. 页面加载根据页面同级的config.js文件渲染
3. 全景图切图工具[下载链接](https://wws.lanzoui.com/iWYzGqf2pib)
4. 热点图配置中点击上下按钮切换
5. 生成的数据在控制台会打印出来，直接将打印数据拷贝至`index/config.js`后访问pages/index/index路由即可
6. 若需继续进行编辑之前的模板将需调整的`config.js`拷贝至`editor/config.js`
7. 若开发为H5端可以使用本地资源，若想兼容APP则需使用外链
8. 编辑时请使用localhost:xxxx 访问否则会导致生成JSON不正确

### 依赖安装

1. 安装之前请移除下载后自带的package.json
2. 使用npm init -y重新生成package.json
3. 注意项目名称不能含有空格以及中文否则无法npm init -y
4. 运行下方命令安装依赖

```
npm i three@0.129.0 three-orbit-controls@82.1.0
```

### 贡献者
[陈木杉](https://gitee.com/ChenMuShan)

[码云](https://gitee.com/ChenMuShan/uni_threejs_h5_vr)