vue实现vr看360°全景效果 |
您所在的位置：网站首页 › 360全景图片查看器APP › vue实现vr看360°全景效果 |
|
1：首先创建一个vue的基础项目 vue create demo 2：启动并打开项目 3：在生成的public文件夹下找到Index.html，然后在script标签中引入three.js 4：在template模块中创建一个div，并绑定一个id 其次，需要给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和这个思路，挺不错的~ |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |