Vue 使用three.js实现简单全景图

72 阅读 0 评论 48 点赞

我是靠谱客的博主调皮睫毛，最近开发中收集的这篇文章主要介绍Vue 使用three.js实现简单全景图，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

Vue 使用three.js实现简单全景图

安装

cnpm install three -S

全景页面引用

import * as Three from 'three'

html模块

<template>
<div>
<div id="containerVr"></div>
</div>
</template>

js模块

<script>
// 引入THREE
import * as THREE from 'THREE'
var camera;
var renderer;
var scene;
console.log(THREE)
export default {
data() {
return {
//全景图路径
bigImg: require("../assets/img/20211108163944.jpg"),
}
},
mounted() {
/**
* @description 使用全景图函数**/
this.$nextTick(() => {
this.init();
this.animate();
})
},
methods: {
/**
* @description 全景图参数配置**/
init() {
var container = document.getElementById('container');
// 创建渲染器
renderer = new THREE.WebGLRenderer();
//antialias：抗锯齿----THREE.js创建的WebGLRenderer对象有抗锯齿选项的支持，这个选项默认是关闭的，所以需要显式开启一下。
renderer.antialias = true
// setPixelRatio：设置像素比率
renderer.setPixelRatio(window.devicePixelRatio);
// setSize：画布宽高
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);
}
// THREE.Scen：创建全景场景
scene = new THREE.Scene();
/**
* @description PerspectiveCamera: 创建相机
* PerspectiveCamera( fov : Number , aspect : Number , near : Number , far : Number )
* fov - 相机平截头体垂直视野。
* aspect - 相机平截头体纵横比。
* near - 平面附近的相机平截头体。
* far — 相机平截头体远平面。
* **/
camera = new THREE.PerspectiveCamera(120, window.innerWidth / window.innerHeight, 1, 100);
// position.set( <X> , <Y> , <Z> ) ：设置相机位置,<X>和<Z>是 2D 坐标 并且<Y>是 高度
camera.position.set(0, 0, 0);
// up：相机以哪个方向为上方
camera.up.set(0, 0, 1);
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
);
/*
Mesh( geometry : BufferGeometry, material : Material )
geometry —— （可选）BufferGeometry的实例，默认值是一个新的BufferGeometry。
material —— （可选）一个Material，或是一个包含有Material的数组，默认是一个新的MeshBasicMaterial。
*/
// .scale ( x : Float, y : Float, z : Float )缩放几何体。该操作一般在一次处理中完成，不会循环处理。典型的用法是通过调用 Object3D.scale 实时旋转几何体。
skyBox.geometry.scale(1, 1, -1);
scene.add(skyBox);
// 监听窗口缩放事件
window.addEventListener('resize', this.onWindowResize, false);
// 用于判断鼠标是按下还是松开，通过鼠标预览全景图
var bMouseDown = false;
// x,y：全景图的坐标位置
var x = -1;
var y = -1;
// 添加鼠标点击事件
container.onmousedown = function (event) {
event.preventDefault(); //取消默认事件
// console.log(event)
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();
console.log(camera)
console.log(event.wheelDelta)
if (event.wheelDelta != 0) {
/**
* @description
* camera.fov： 相机平截头体垂直视野
* event.wheelDelta：前后缩放的方向：前(120)，后(-12)
* **/
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;
// updateProjectionMatrix()：用来手动更新相机的投影矩阵的
camera.updateProjectionMatrix();
// 重置画布宽高
renderer.setSize(window.innerWidth, window.innerHeight);
},
/**
* @description **/
animate() {
requestAnimationFrame(this.animate);
renderer.render(scene, camera);
}
},
}
</script>