vue实现vr看360°全景效果

1：首先创建一个vue的基础项目
vue create demo
2：启动并打开项目
3：在生成的public文件夹下找到Index.html，然后在script标签中引入three.js

<script src="https://cdn.jsdelivr.net/npm/three@0.93.0/build/three.min.js"></script>

4：在template模块中创建一个div，并绑定一个id

<div ref="container" id="container" style="width: 100%; height: 100%"></div>

其次，需要给html，body，默认的容器#app这三类元素设定宽高（必须）
5：在data中定义全局变量

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()}}

6：在methods中写入方法

 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);}}

7：在mounted初始化中调用init方法

mounted() {this.init()
}

8：最重要的一点，不要忘记在data中找到sceneUrl这个全局变量，它的值就是需要展示的图片路径。如果不引入就没有图片哦。

PS:当时做这个项目的时候也是第一次，借鉴了这位大佬的文章
https://blog.csdn.net/Thurmanwang/article/details/105495000

大家写完的时候可以多看看three.js和这个思路，挺不错的~

vue实现vr看360°全景效果相关推荐

Vue实现vr看房效果
1.下载依赖: VS code终端执行两个命令 npm install three --save-devnpm install photo-sphere-viewer 2.<template&g ...
android显示全景图片素材,【行业应用】360°全景-如何制作一个360度全景图
第一步:拍摄全景图原始素材由专业的摄影师使用专业相机.鱼眼镜头以及三脚架拍摄汽车.房间或者其他需要360全景展示的对象照片我们来看下备用的三张原始素材第二步:使用"PTGui Pro& ...
微信公众平台开发之360全景
微信公众平台开发之360全景功能是商家推广自己的产品的非常有效的方法之一.现在大多数的人买东西都不喜欢去看繁杂的文字描述,而更喜欢看实物图.所有之前我们做过微信相册用于展示我们的产品,但是光靠相册的 ...
原生JS实现VR看图特效
现在很多看车或是看房的网站都有VR看图的效果,看起来比较高端,类似于下面这样的效果: 那么这种效果是如何实现的呢?其实原理很简单,就是连续拍摄了多个角度的图片, 然后根据用户的操作加载不同角度的图片. ...
Vue使用photo-sphere-viewer360°×180°全景插件模拟VR看房、房间切换和自定义标注
Vue使用photo-sphere-viewer360°×180°全景插件模拟VR看房.房间切换和自定义标注 photo-sphere-viewer 下载插件使用常用参数 Markers插件使用 ...
Three.js杂记（十二）—— VR全景效果制作·中
文章目录序正文开始引入threeJs 材料收集实现原理实现步骤基础的全景完成完整Vue代码总结序在web的前端发展过程中,对于视觉化的要求已经越来越高有关于VR全景的效果也同样可 ...
微信小程序---实现VR看房效果
1.前言客户需求需要实现VR看房功能.使用技术为微信小程序+spring boot. 2.工具 ① 下载PtGui绘制全景图工具:https://www.jb51.net/softs/743790. ...
接触webGl(three.js)之全景(VR)看房的实现旅程总结
文章目录前言实现全景(VR)看房的方式一.纯Three.js方式 1.安装包 2.实现的业务代码 3.实现演示二. 使用photo-sphere-viewer 1.安装包 2.实现的业务代码 ...
html蒙尘效果,vr看车.html
VR看车 $axure.utils.getTransparentGifPath = function() { return 'resources/images/transparent.gif'; ...

vue实现vr看360°全景效果

vue实现vr看360°全景效果相关推荐

最新文章

热门文章