vue中利用three.js实现全景图的完整示例


Posted in Vue.js onDecember 07, 2020

粗暴一点,直接上代码:

第一步:

通过指令下载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() {
      // 调用全景图函数
      this.$nextTick(() => {
        this.init();
        this.animate();
      })
    },
    methods: {
      // 全景图配置函数---------------
      init() {
        var container = document.getElementById('container');
        // 创建渲染器
        renderer = new THREE.WebGLRenderer();
        renderer.setPixelRatio(window.devicePixelRatio);
        // 设置画布的宽高
        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);
        // 创建场景
        scene = new THREE.Scene();
        // 创建相机
        camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.1, 100);
        camera.position.set(0, 0, 0);
        var material = new THREE.MeshBasicMaterial();//材质
        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;
        // 添加鼠标事件
        container.onmousedown = function (event) {
          event.preventDefault();//取消默认事件
          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>

到此这篇关于vue中利用three.js实现全景图的文章就介绍到这了,更多相关vue用three.js实现全景图内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
vue+vant实现购物车全选和反选功能
Nov 17 Vue.js
基于vue项目设置resolves.alias: '@'路径并适配webstorm
Dec 02 Vue.js
Vue router传递参数并解决刷新页面参数丢失问题
Dec 02 Vue.js
vue 数据操作相关总结
Dec 17 Vue.js
Vite和Vue CLI的优劣
Jan 30 Vue.js
vue脚手架项目创建步骤详解
Mar 02 Vue.js
vue Element-ui表格实现树形结构表格
Jun 07 Vue.js
Vue中插槽slot的使用方法与应用场景详析
Jun 08 Vue.js
vue3中provide && inject的使用
Jul 01 Vue.js
vue实现省市区联动 element-china-area-data插件
Apr 22 Vue.js
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
Apr 24 Vue.js
vue项目如何打包之项目打包优化(让打包的js文件变小)
Apr 30 Vue.js
详解Vue中的自定义指令
Dec 07 #Vue.js
vue-router定义元信息meta操作
Dec 07 #Vue.js
Vue如何实现验证码输入交互
Dec 07 #Vue.js
Vue $attrs &amp; inheritAttr实现button禁用效果案例
Dec 07 #Vue.js
vuex Module将 store 分割成模块的操作
Dec 07 #Vue.js
浅谈Vue使用Elementui修改默认的最快方法
Dec 05 #Vue.js
vue+element_ui上传文件,并传递额外参数操作
Dec 05 #Vue.js
You might like
php网页后退不再出现过期
2007/03/08 PHP
php经典算法集锦
2015/11/14 PHP
PHP批量删除jQuery操作
2017/07/23 PHP
centos7上编译安装php7以php-fpm方式连接apache
2018/11/08 PHP
几个有趣的Javascript Hack
2010/07/24 Javascript
同时使用n个window onload加载实例介绍
2013/04/25 Javascript
jquery特效 幻灯片效果示例代码
2013/07/16 Javascript
基于JQuery的列表拖动排序实现代码
2013/10/01 Javascript
js获取对象为null的解决方法
2013/11/21 Javascript
Javascript 是你的高阶函数(高级应用)
2015/06/15 Javascript
javascript密码强度校验代码(两种方法)
2015/08/10 Javascript
JS实现颜色动态淡化效果
2017/03/06 Javascript
使用JavaScript实现在页面中显示距离2017年中秋节的天数
2017/09/26 Javascript
JS笛卡尔积算法与多重数组笛卡尔积实现方法示例
2017/12/01 Javascript
vue使用echarts图表的详细方法
2018/10/22 Javascript
提升node.js中使用redis的性能遇到的问题及解决方法
2018/10/30 Javascript
iview在vue-cli3如何按需加载的方法
2018/10/31 Javascript
JavaScript ES6箭头函数使用指南
2018/12/30 Javascript
JavaScript面向对象编程小游戏---贪吃蛇代码实例
2019/05/15 Javascript
vue把输入框的内容添加到页面的实例讲解
2019/11/11 Javascript
js+canvas绘制图形验证码
2020/09/21 Javascript
ant-design表单处理和常用方法及自定义验证操作
2020/10/27 Javascript
python中引用与复制用法实例分析
2015/06/04 Python
使用Python写CUDA程序的方法
2017/03/27 Python
浅析Python 责任链设计模式
2020/09/11 Python
css3 给背景设置渐变色的方法
2019/09/12 HTML / CSS
利用html5 canvas动态画饼状图的示例代码
2018/04/02 HTML / CSS
Nebula美国官网:便携式投影仪
2019/03/15 全球购物
初中生自我鉴定
2014/02/04 职场文书
酒店端午节促销方案
2014/02/18 职场文书
《学会待客》教学反思
2014/02/22 职场文书
个人三严三实对照检查材料
2014/09/25 职场文书
人民调解协议书范本
2014/10/11 职场文书
债务纠纷委托书范本
2014/10/14 职场文书
师德承诺书2015
2015/04/28 职场文书
Python Django搭建文件下载服务器的实现
2021/05/10 Python