接触webGl(three.js)之全景(VR)看房的实现旅程总结

文章目录

前言

实现全景(VR)看房的方式

一、纯Three.js方式

1.安装包

2.实现的业务代码

3.实现演示

二、 使用photo-sphere-viewer

1.安装包

2.实现的业务代码

3.实现演示

三、pano2vr实现

1.下载软件

2.安装软件

3.实现演示

四、krpano方式

五、其他方式

总结

---

前言

这几天可能是机缘巧合吧，我朋友让我帮他弄一下全景(VR)看房功能（类似贝壳看房不过最后做不出来....），这时候我默认大家都了解了什么是OpenGL，什么是WebGL，以及Three.js。不过不了解也关系，我是从萌新角度去介绍如何开发的（引导开发式）。

---

实现全景(VR)看房的方式

让我介绍一下我这几天自己琢磨的方式吧，虽然很一般都是对第一次接触的人还是有很大的帮助。

一、纯Three.js方式

1.安装包

npm install three

// 过渡动画
npm install tween

2.实现的业务代码

代码（vue+three）简单实现了全景看房，以及点击获取3维坐标位置并把相机移动过去。

<template>
  <div>
      <div id="container" ref="container"></div>
  </div>
</template>

<script>
  import * as THREE from 'three';
  import TWEEN from '@tweenjs/tween.js'
  import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
  export default {
    data () {
        return {
            bigImg: require("../../assets/1.png"), // 图片路径
            container: null, // 页面容器
            camera: null, // 相机
            renderer: null, // 渲染器
            scene: null, // 场景
            material: null,  // 添加材质
            texture: null,// 创建纹理贴图
            skyBox: null, // 网格
            controls: null, // 轨道控制
            clock: null, // 轨道更新时间
            // 鼠标属性
            bMouseDown: false,
            x: -1,
            y: -1,
            isClickCamera: false, // 是否点运动相机
            raycaster: null,
            mouse: null
        }
    },
    mounted () {
        this.$nextTick(() => {
            this.init();
            this.animate();
        })
    },
    created () {
    },
    methods: {
        // 初始化轨道控制
        initControls() {
            this.controls = new OrbitControls(this.camera, this.renderer.domElement);
            this.controls.target = new THREE.Vector3(0, 0, 0);
            this.controls.minDistance = 18; // 相机最近
            this.controls.maxDistance = 500; // 相机最远
            this.controls.autoRotate = false; // 图片自动旋转
            this.controls.enableDamping = true; // 使动画循环使用时阻尼或自转 意思是否有惯性
            this.controls.enablePan = false; // 是否开启右键拖拽
            this.controls.autoRotateSpeed = 0.5; // 阻尼系数
        },
        init() {
            // 页面容器
            this.container = document.getElementById('container');

            // 创建渲染器
            this.renderer = new THREE.WebGLRenderer();
            this.renderer.setPixelRatio(window.devicePixelRatio);

            // 设置画布的宽高
            this.renderer.setSize(window.innerWidth, window.innerHeight);

            // 判断容器中子元素的长度
            let childs = this.container.childNodes;
            if (this.container.childNodes.length > 0) {
                this.container.removeChild(childs[0]);
                this.container.appendChild(this.renderer.domElement);