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在图片上传的时候压缩图片
Nov 18 Vue.js
vue添加自定义右键菜单的完整实例
Dec 08 Vue.js
Vue组件简易模拟实现购物车
Dec 21 Vue.js
Vue中ref和$refs的介绍以及使用方法示例
Jan 11 Vue.js
如何在vue中使用video.js播放m3u8格式的视频
Feb 01 Vue.js
Vue如何实现变量表达式选择器
Feb 18 Vue.js
vue脚手架项目创建步骤详解
Mar 02 Vue.js
vue实现倒计时功能
Mar 24 Vue.js
关于Vue中的options选项
Mar 22 Vue.js
vue如何使用模拟的json数据查看效果
Mar 31 Vue.js
vue使用refs获取嵌套组件中的值过程
Mar 31 Vue.js
vue项目打包后路由错误的解决方法
Apr 13 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
ThinkPHP利用PHPMailer实现邮件发送实现代码
2013/09/26 PHP
php 启动报错如何解决
2014/01/17 PHP
Extjs中使用extend(js继承) 的代码
2012/03/15 Javascript
jQuery表单域属性过滤器用法分析
2015/02/10 Javascript
jquery实现从数组移除指定的值
2015/06/24 Javascript
JS获取数组最大值、最小值及长度的方法
2015/11/24 Javascript
jQuery基于muipicker实现仿ios时间选择
2016/02/22 Javascript
利用JS判断字符串是否含有数字与特殊字符的方法小结
2016/11/25 Javascript
Javascript下拉刷新的简单实现
2017/02/14 Javascript
基于JS实现bookstore静态页面的实例代码
2017/02/22 Javascript
深入浅析AngularJS中的一次性数据绑定 (bindonce)
2017/05/11 Javascript
vue :src 文件路径错误问题的解决方法
2018/05/15 Javascript
vue仿element实现分页器效果
2018/09/13 Javascript
Vue在 Nuxt.js 中重定向 404 页面的方法
2019/04/23 Javascript
javascript原型链学习记录之继承实现方式分析
2019/05/01 Javascript
js回调函数仿360开机
2019/12/26 Javascript
Openlayers绘制地图标注
2020/09/28 Javascript
原生js实现九宫格拖拽换位
2021/01/26 Javascript
python实现给数组按片赋值的方法
2015/07/28 Python
举例讲解Python中的迭代器、生成器与列表解析用法
2016/03/20 Python
Python实现从SQL型数据库读写dataframe型数据的方法【基于pandas】
2019/03/18 Python
python批量爬取下载抖音视频
2019/06/17 Python
Python循环实现n的全排列功能
2019/09/16 Python
Jupyter notebook如何修改平台字体
2020/05/13 Python
python实现学生管理系统开发
2020/07/24 Python
澳大利亚领先的孕妇服装品牌:Mamaway
2018/08/14 全球购物
农村婚礼证婚词
2014/01/10 职场文书
高中军训广播稿
2014/01/14 职场文书
考试没考好检讨书
2014/01/31 职场文书
护士实习求职信
2014/06/22 职场文书
2015年招商引资工作总结
2015/04/25 职场文书
2015年依法行政工作总结
2015/04/29 职场文书
政审证明材料
2015/06/19 职场文书
消防演习感想
2015/08/10 职场文书
创业计划书之餐饮
2019/09/02 职场文书
《天使的翅膀》读后感3篇
2019/12/20 职场文书