# mxreality.js

**Repository Path**: locdee/mxreality.js

## Basic Information

- **Project Name**: mxreality.js
- **Description**: [Put world in a box] webvr,webar,网页混合现实实现，全景视频和全景图片播放器
- **Primary Language**: JavaScript
- **License**: GPL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2022-06-11
- **Last Updated**: 2022-06-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### mix reality 混合现实网页版  

[在线文档](https://github.com/guoguicheng/mxreality.js/tree/master/docs/index.md)  

        优点：
        
        1、全景图支持全景模式和VR模式
        
        2、支持网页端全景图补天功能，有效去除顶部和底部拼接留下的痕迹、做出真正完美的产品
        
        3、全景VR图是全景VR视频支持小行星效果，还提供控制效果测试，可以根据自己需要控制快慢，方向等。
        
        4、全景图支持自定义切片数量、有效保护全景图资源和版权问题
        
        5、支持场景内标注热点，让场景多更多的交互，更具实用性
        
        6、全景视频播放器支持全景模式和VR模式
        
        7、全景场景功能支持在720°查看场景且支持VR模式查看场景
        
        8、播放器没有默认的播放器logo，不存在为删除全景图和全景视频播放器logo而烦恼
        
        9、完善的API文档和高度可扩展性，任意定制播放器功能和效果
        
        10、完美结合THREE.JS ，可以在threejs创建的场景中使用mxreality.js播放场景（支持全景和VR和AR模式）
        
        11、AR功能，实现混合现实效果
        
        12、自适应所有PC、平板、移动设备浏览器，真正做到写一套代码多个设备使用
        
        12、永久免费

### 播放器功能结构图
![结构图](https://github.com/guoguicheng/mxreality.js/raw/master/docs/mxreality.js.png)

* 展示中的全景图片和视频资源来自网络 

#### 全景图小行星视角
![小行星视角](https://github.com/guoguicheng/mxreality.js/raw/master/docs/1.png)
![小行星视角](https://github.com/guoguicheng/mxreality.js/raw/master/docs/2.png)
![小行星视角](https://github.com/guoguicheng/mxreality.js/raw/master/docs/3.png)
![小行星视角](https://github.com/guoguicheng/mxreality.js/raw/master/docs/4.png)
![小行星视角](https://github.com/guoguicheng/mxreality.js/raw/master/docs/5.jpg)
![小行星视角](https://github.com/guoguicheng/mxreality.js/raw/master/docs/14.png)

#### 移动设备全景图
![移动设备全景图](https://github.com/guoguicheng/mxreality.js/raw/master/docs/6.jpg)

#### 移动设备VR视角

![VR](https://github.com/guoguicheng/mxreality.js/raw/master/docs/7.jpg)
![VR](https://github.com/guoguicheng/mxreality.js/raw/master/docs/8.jpg)

#### 全景视频播放器

![全景视频播放器](https://github.com/guoguicheng/mxreality.js/raw/master/docs/9.png)
![全景视频播放器](https://github.com/guoguicheng/mxreality.js/raw/master/docs/10.png)
![全景视频播放器](https://github.com/guoguicheng/mxreality.js/raw/master/docs/11.png)


#### 移动设备全景视频
![移动设备全景视频](https://github.com/guoguicheng/mxreality.js/raw/master/docs/12.jpg)
![全景视频播放器](https://github.com/guoguicheng/mxreality.js/raw/master/docs/23.jpg)
![全景视频播放器](https://github.com/guoguicheng/mxreality.js/raw/master/docs/24.jpg)

#### 移动设备全景视频VR
![移动设备全景视频VR](https://github.com/guoguicheng/mxreality.js/raw/master/docs/13.jpg)
![移动设备全景视频VR](https://github.com/guoguicheng/mxreality.js/raw/master/docs/25.jpg)
![移动设备全景视频VR](https://github.com/guoguicheng/mxreality.js/raw/master/docs/26.jpg)

#### 全景场景
![全景场景](https://github.com/guoguicheng/mxreality.js/raw/master/docs/15.jpg)
![全景场景](https://github.com/guoguicheng/mxreality.js/raw/master/docs/18.png)

#### 全景场景VR
![全景场景VR](https://github.com/guoguicheng/mxreality.js/raw/master/docs/16.jpg)
![全景场景VR](https://github.com/guoguicheng/mxreality.js/raw/master/docs/17.jpg)

#### 全景图补天功能对比
![没有补天](https://github.com/guoguicheng/mxreality.js/raw/master/docs/19.png)
![已补天](https://github.com/guoguicheng/mxreality.js/raw/master/docs/20.png)

#### 热点功能实现
![热点功能实现](https://github.com/guoguicheng/mxreality.js/raw/master/docs/21.png)

#### 全景图切片技术实现
![全景图切片技术实现](https://github.com/guoguicheng/mxreality.js/raw/master/docs/22.png)

### AR 测试例子
![AR](https://github.com/guoguicheng/mxreality.js/raw/master/docs/30.jpg)
![AR](https://github.com/guoguicheng/mxreality.js/raw/master/docs/31.png)