vue实现vr看360°全景效果

2021-05-26 11:29:56 阅读：443 来源： 互联网

标签：vue container THREE vr camera Math false event 360

1：首先创建一个vue的基础项目
vue create demo
2：启动并打开项目
3：在生成的public文件夹下找到Index.html，然后在script标签中引入three.js

<script src="https://cdn.jsdelivr.net/npm/three@0.93.0/build/three.min.js"></script>

4：在template模块中创建一个div，并绑定一个id

<div ref="container" id="container" style="width: 100%; height: 100%"></div>

其次，需要给html，body，默认的容器#app这三类元素设定宽高（必须）
5：在data中定义全局变量

data() {
    return {
      sceneUrl: '', // 需要预览的图片绝对路径
      camera: null,
      scene: null,
      renderer: null,
      isUserInteracting: false,
      onPointerDownPointerX: 0,
      onPointerDownPointerY: 0,
      lon: 0,
      onPointerDownLon: 0,
      lat: 0,
      onPointerDownLat: 0,
      phi: 0,
      theta: 0,
      target: new THREE.Vector3()
    }
  }

6：在methods中写入方法

 methods: {
    init() {
      let textureLoader = new THREE.TextureLoader();

      textureLoader.load(this.sceneUrl, (texture) => {
        texture.mapping = THREE.UVMapping;

        this.initImg(texture);
        this.render();
      });
    },
    initImg(texture) {
      let container, mesh;
      // 容器宽度、高度
      let containerWidth = this.$refs.container.offsetWidth;
      let containerHeight = this.$refs.container.offsetHeight;
      container = document.getElementById('container');
      this.renderer = new THREE.WebGLRenderer({ antialias: true });
      this.renderer.setPixelRatio(window.devicePixelRatio);
      // this.renderer.setSize(window.innerWidth, window.innerHeight);
      this.renderer.setSize(containerWidth, containerHeight);
      let childs = container.childNodes;
      if (container.childNodes.length > 0) {
        container.removeChild(childs[0]);
        container.appendChild(this.renderer.domElement);
      } else {
        container.appendChild(this.renderer.domElement);
      }

      this.scene = new THREE.Scene();
      this.camera = new THREE.PerspectiveCamera(60, containerWidth  / containerHeight , 1, 1000);
      mesh = new THREE.Mesh(new THREE.SphereBufferGeometry(500, 32, 16), new THREE.MeshBasicMaterial({ map: texture }));
      mesh.geometry.scale(-1, 1, 1);
      this.scene.add(mesh);

      container.addEventListener('mousedown', this.onDocumentMouseDown, false);
      container.addEventListener('mousemove', this.onDocumentMouseMove, false);
      container.addEventListener('mouseup', this.onDocumentMouseUp, false);
      container.addEventListener('mousewheel', this.onDocumentMouseWheel, false);

      container.addEventListener('touchstart', this.onDocumentTouchStart, false);
      container.addEventListener('touchmove', this.onDocumentTouchMove, false);
    },
    onDocumentMouseDown(event) {
      event.preventDefault();

      this.isUserInteracting = true;

      this.onPointerDownPointerX = event.clientX;
      this.onPointerDownPointerY = event.clientY;

      this.onPointerDownLon = this.lon;
      this.onPointerDownLat = this.lat;
    },

    onDocumentMouseMove(event) {
      if (this.isUserInteracting) {
        this.lon = (this.onPointerDownPointerX - event.clientX) * 0.1 + this.onPointerDownLon;
        this.lat = (event.clientY - this.onPointerDownPointerY) * 0.1 + this.onPointerDownLat;
        this.render();
      }
    },

    onDocumentMouseUp(event) {
      this.isUserInteracting = false;
      this.render();
    },

    onDocumentMouseWheel(event) {
      this.camera.fov -= event.wheelDeltaY * 0.05;
      this.camera.updateProjectionMatrix();
      event = event || window.event;
      if (event.stopPropagation) { // 这是取消冒泡
        event.stopPropagation();
      } else {
        event.cancelBubble = true;
      };
      if (event.preventDefault) { // 这是取消默认行为
        event.preventDefault();
      } else {
        event.returnValue = false;
      };
      this.render();
    },

    onDocumentTouchStart(event) {
      if (event.touches.length == 1) {
        event.preventDefault();

        this.onPointerDownPointerX = event.touches[0].pageX;
        this.onPointerDownPointerY = event.touches[0].pageY;

        this.onPointerDownLon = this.lon;
        this.onPointerDownLat = this.lat;
      }
    },

    onDocumentTouchMove(event) {
      if (event.touches.length == 1) {
        event.preventDefault();

        this.lon = (this.onPointerDownPointerX - event.touches[0].pageX) * 0.1 + this.onPointerDownLon;
        this.lat = (event.touches[0].pageY - this.onPointerDownPointerY) * 0.1 + this.onPointerDownLat;

        this.render();
      }
    },
    render() {
      this.lon += 0.15;

      this.lat = Math.max(-85, Math.min(85, this.lat));
      this.phi = THREE.Math.degToRad(90 - this.lat);
      this.theta = THREE.Math.degToRad(this.lon);
      this.camera.position.x = 100 * Math.sin(this.phi) * Math.cos(this.theta);
      this.camera.position.y = 100 * Math.cos(this.phi);
      this.camera.position.z = 100 * Math.sin(this.phi) * Math.sin(this.theta);

      this.camera.lookAt(this.scene.position);
      this.renderer.render(this.scene, this.camera);
    }
  }

7：在mounted初始化中调用init方法

mounted() {
  	this.init()
}

8：最重要的一点，不要忘记在data中找到sceneUrl这个全局变量，它的值就是需要展示的图片路径。如果不引入就没有图片哦。

PS:当时做这个项目的时候也是第一次，借鉴了这位大佬的文章
https://blog.csdn.net/Thurmanwang/article/details/105495000

大家写完的时候可以多看看three.js和这个思路，挺不错的~

标签：vue,container,THREE,vr,camera,Math,false,event,360
来源： https://blog.csdn.net/weixin_43968782/article/details/117284963

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue实现vr看360°全景效果