vue项目如何使用three.js实现vr360度全景图片预览_Javascript

使用three.js实现vr360度全景图片预览

当前demo使用的three.js为0.115.0版本

项目中安装three

npm install three

安装完成再组件如下导入

import * as three from 'three'

html文件中写入如下代码图片预览容器

代码如下：

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

script脚本中如下代码

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()
    }
  },
  mounted() {
  	this.init()
  },
  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);
    }
  }