vue 项目中使用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);}}

vue 项目中使用three.js实现vr360度全景图片预览相关推荐

html实现360展示图片,js html5 360度全景图片预览效果
特效描述:js html5 360度全景图片预览效果.html5实现360度全景,html5 720度全景图,html5全景图,html5全景图源代码,html5 3d全景,360度全景图,3d36 ...
详解如何在vue项目中使用lodop打印插件,以及样式打印预览缺失的问题（底部）
C-Lodop是一个免费云服务程序,可接受来自其它平台浏览器的JavaScrip语句实现远程打印. 目前是各家软件公司进行手机或微信远程打印的流行解决方案. 和其它"云打印"概念相 ...
Vue项目中利用pdf.js实现pdf内容滑选文字展示与搜索功能
Vue项目中利用pdf.js实现pdf内容滑选文字展示与搜索功能需求:在pdf中鼠标滑动选中一段文字,将选中文字展示到input框中(pdf在iframe中) 完成效果: 关于pdf的引用:我是直接 ...
关于Java项目中，word和Excel类型文件的预览功能实现
关于Java项目中,word和Excel类型文件的预览功能实现背景 Aspose说明 Aspose.Words Aspose.Cells pom依赖引入引入license.xml(授权文件) 创建 ...
html5图片自动翻转,纯js实现360度旋转预览图片特效
这是一款纯js实现360度旋转预览图片特效.该js特效仅使用120行代码,即可实现通过滑块.或鼠标手动360度旋转图片,以及自动360度旋转图片的效果. 使用方法 HTML结构 import Roll ...
VUE 项目中引入外部js文件（CND引入）
以VUE项目中引入echarts文件为例: 第一步在VUE项目中找到index.html文件引入 :<script src="https://cdnjs.cloudflare.com ...
vue项目中使用flv.js实时播放断流重连关闭断流开发心得
第一次碰这个东西肯定会碰壁的,问百度人都问傻了(关键还骗人),其中心酸不必多描述,只为成长后来项目更新采用的是EasyPlayer插件文章地址: VUE项目中优雅使用EasyPlayer 后端是流 ...
js产品360度旋转预览图片插件
下载地址纯js实现的产品360度旋转预览图片插件.该js特效仅使用120行代码,即可实现通过滑块.或鼠标手动360度旋转图片,以及自动360度旋转图片的效果. dd:
jsencrypt vue使用_在Vue项目中使用jsencrypt.js对数据进行加密传输
项目需求中需要对用户登录时的密码进行加密,在网上查询些许文章后,最终与后端协商使用jsencrypt.js. 使用yarn安装至Vue项目 yarn add jsencrypt --dev 或者使用n ...

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

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

vue 项目中使用three.js实现vr360度全景图片预览相关推荐

最新文章

热门文章