快捷導(dǎo)航

vue中利用three.js實現(xiàn)全景圖的完整示例

更新時間：2020年12月07日 10:22:08 作者：陳陳陳_

這篇文章主要給大家介紹了關(guān)于vue中利用three.js實現(xiàn)全景圖的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

粗暴一點,直接上代碼:

第一步:

通過指令下載three.js

npm install three -S

第二步:

在組件中引用

import * as THREE from 'three'

第三步:

html部分

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

js部分

<script>
  import * as THREE from 'three';
  var camera;
  var renderer;
  var scene;
  export default {
    name: 'panorama',
    data() {
      return {
        bigImg: require("../../../../../images/項目案例/001.jpg"),//全景圖圖片路徑
      }
    },
    mounted() {
      // 調(diào)用全景圖函數(shù)
      this.$nextTick(() => {
        this.init();
        this.animate();
      })
    },
    methods: {
      // 全景圖配置函數(shù)---------------
      init() {
        var container = document.getElementById('container');
        // 創(chuàng)建渲染器
        renderer = new THREE.WebGLRenderer();
        renderer.setPixelRatio(window.devicePixelRatio);
        // 設(shè)置畫布的寬高
        renderer.setSize(window.innerWidth, window.innerHeight);
        // 判斷容器中子元素的長度
        let childs = container.childNodes;
        if (container.childNodes.length > 0) {
          container.removeChild(childs[0]);
          container.appendChild(renderer.domElement);
        } else {
          container.appendChild(renderer.domElement);
        }
        //   container.appendChild(renderer.domElement);
        // 創(chuàng)建場景
        scene = new THREE.Scene();
        // 創(chuàng)建相機(jī)
        camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.1, 100);
        camera.position.set(0, 0, 0);
        var material = new THREE.MeshBasicMaterial();//材質(zhì)
        var texture = new THREE.TextureLoader().load(this.bigImg);
        material.map = texture;
        var skyBox = new THREE.Mesh(
          new THREE.SphereBufferGeometry(100, 100, 100),
          material
        );
        skyBox.geometry.scale(1, 1, -1);
        scene.add(skyBox);
        window.addEventListener('resize', this.onWindowResize, false);
        var bMouseDown = false;
        var x = -1;
        var y = -1;
        // 添加鼠標(biāo)事件
        container.onmousedown = function (event) {
          event.preventDefault();//取消默認(rèn)事件
          x = event.clientX;
          y = event.clientY;
          bMouseDown = true;
        }
        container.onmouseup = function (event) {
          event.preventDefault();
          bMouseDown = false;
        }
        container.onmousemove = function (event) {
          event.preventDefault();
          if (bMouseDown) {
            skyBox.rotation.y += -0.005 * (event.clientX - x);
            skyBox.rotation.x += -0.005 * (event.clientY - y);
            if (skyBox.rotation.x > Math.PI / 2) {
              skyBox.rotation.x = Math.PI / 2
            }
            if (skyBox.rotation.x < -Math.PI / 2) {
              skyBox.rotation.x = -Math.PI / 2
            }
            x = event.clientX;
            y = event.clientY;
          }
        }
        container.onmousewheel = function (event) {
          event.preventDefault();
          if (event.wheelDelta != 0) {
            camera.fov += event.wheelDelta > 0 ? 1 : -1;
            if (camera.fov > 150) {
              camera.fov = 150;
            }
            else if (camera.fov < 30) {
              camera.fov = 30;
            }
            camera.updateProjectionMatrix();
          }
        }
      },
      onWindowResize() {
        // 窗口縮放的時候,保證場景也跟著一起縮放
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
      },
      animate() {
        requestAnimationFrame(this.animate);
        renderer.render(scene, camera);
      }
    },
  }
</script>

到此這篇關(guān)于vue中利用three.js實現(xiàn)全景圖的文章就介紹到這了,更多相關(guān)vue用three.js實現(xiàn)全景圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: