html 全景图three,vue中利用three.js实现全景图的完整示例
粗暴一点,直接上代码:
第一步:
通过指令下载three.js
npm install three -S
第二步:
在组件中引用
import * as THREE from 'three'
第三步:
html部分
js部分
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);
}
},
}
到此这篇关于vue中利用three.js实现全景图的文章就介绍到这了,更多相关vue用three.js实现全景图内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!
html 全景图three,vue中利用three.js实现全景图的完整示例相关推荐
- vue中利用gif.js实现GIF动图下载
前言 gif.js可以将帧图或者canvas拼成新的gif,gif.js没有npm install的库,引用方式如下: 1. 下载资源 首先从官方仓库上下载代码,worker不能跨域,所以资源必然是放 ...
- Vue中利用moment.js(时间格式化插件)做一个倒计时组件
moment.js 文档:https://momentjs.com/docs/#/-project-status/ 1.使用npm安装moment npm install moment --save ...
- Vue项目中利用pdf.js实现pdf内容滑选文字展示与搜索功能
Vue项目中利用pdf.js实现pdf内容滑选文字展示与搜索功能 需求:在pdf中鼠标滑动选中一段文字,将选中文字展示到input框中(pdf在iframe中) 完成效果: 关于pdf的引用:我是直接 ...
- vue树形结构html,怎么在vue中利用递归组件实现一个树形控件
怎么在vue中利用递归组件实现一个树形控件 发布时间:2021-06-11 17:26:48 来源:亿速云 阅读:81 作者:Leah 本篇文章为大家展示了怎么在vue中利用递归组件实现一个树形控件, ...
- Vue 中利用 template标签遍历多维数组
Vue 中利用 template标签遍历多维数组 1. 需求 2. 二维数组内容 3. 列表渲染指令 v-for 4. template 标签 5. 正确的做法 作者:高玉涵 时间:2022.7.20 ...
- php 输出图片给js,如何在php中利用croppic.js对图片进行剪切并上传
如何在php中利用croppic.js对图片进行剪切并上传 发布时间:2021-01-30 16:41:02 来源:亿速云 阅读:92 作者:Leah 这篇文章将为大家详细讲解有关如何在php中利用c ...
- 「后端小伙伴来学前端了」Vue中利用全局事件总线实现组件之间通信
月亮啊月亮 你能照见南边,也能照见北边 照见她,你跟她说一声,就说我想她了. 前言 前一篇文章写了 vue 中利用 Props 实现组件之间的通信,那种方式是最简单也是最基础的组件之间的通信方式.父组 ...
- vue js 定义对象_JS标准内置对象Proxy及Vue中的proxy.js文件
昔登铜井望法华,葱茏螺黛浮蒹葭.今登法华望铜井,湖水迷茫烟色瞑.-- <登法华寺山顶> Proxy是什么 Proxy是JS标准内置对象中的一个对象.用于创建一个对象的代理.从而实现对对象操 ...
- vue中config/index.js:配置的详细理解
当我们需要和后台分离部署的时候,必须配置config/index.js: 用vue-cli 自动构建的目录里面 (环境变量及其基本变量的配置) 1 2 3 4 5 6 7 8 9 10 11 12 ...
最新文章
- java 的23种设计模式 单例模式
- Machine Learning week 7 quiz: programming assignment-Support Vector Machines
- linux如何把mysql表名换成小写_让 MySQL 在 Linux 下表名不区分大小写(实为表名全小写)...
- c语言学习与应用 北京邮电大学出版社,《C语言程序设计与应用》低价购书_计算机与互联网_孔网...
- mysql免安装如何改密码_mysql免安装版配置与修改密码的教程
- 你在寻觅冬季唯美的海报设计素材么?
- 支付宝ios SDK官方下载页面
- java 高效的 httpclient_使用httpclient下载zip的有效方法
- LCD(六)显示控制器、framebuffer驱动、s3c-fb.c中probe函数分析
- 【C语言】Linux 文件读写
- CentOS加入Windows域
- 安全设置 不允许 html,当前安全设置不允许该文件,教您当前安全设置不允许该文件怎么解决...
- 考研小作文真题、范文及讲解
- 【视频行为识别4】I3D:Two-Stream Inflated 3D ConvNets —CVPR2017
- java打印长方形、平行四边形、三角形、菱形
- android 手机超频降频秘籍
- GlobalSign的泛域名SSL证书
- 利用requestxpath爬取网站图片以及图片信息
- 《从一到无穷大:科学中的事实和臆测》小记
- 面试题:请你说说P2P贷款app的业务流程是怎样的?
热门文章
- 牛客网比赛-Wannafly挑战赛27
- 联想服务器硬盘灯全部闪烁,服务器故障处理 X3650M4主板故障 硬盘黄灯 内存错误 联想(IBM)服务器配件...
- 年薪100w+的阿里p7专家,顶尖的技术人才,只因做到了这几点
- 如何使VM虚拟机和VB虚拟机中的电脑连通并处在同一网段,桥接和NAT的区别浅析
- 计算机硬件安装实验报告,[转载]计算机硬件系统及组装【大一计算机实验报告】...
- vue slot 使用
- 三星s换机助手电脑复原不了,急!!
- Excel 计算重复项中的唯一值的方法
- ue4网页端_ue4学习之嵌入H5网页(web Brower)
- Python运行助手安装