web Javascript360°全景实现
360 全景浏览是一种性价比很高的虚拟现实解决方案,给人一种全新的浏览体验,让你足不出户就能身临其境地感受到现场的环境。该技术被广泛地应用在房产、酒店、家居等领域。
下面我们使用三种方法讨论一个 360 全景的实现。
一、CSS3
- 利用 CSS 中的变换、旋转等属性就可以实现一个 360 全景。实现的基本思路如下:
- 利用 CSS3 做出一个 3D 立方体。
- 在立方体的 6 个面设置目标图片(利用全景工具导出的图片,一共有 6 张)。
- 使用 perspective、translateZ、transform-style: preserve-3d 等属性改变视图的大小。
- 添加触摸事件改变 translateX、translateY 的角度数即可实现一个基本的全景图效果。
- 通过调整容器样式的 perspective 属性值,将视角放置在立方体中。将每个面的尺寸放大,添加上全景图切出的 6 面图,添加上鼠标事件,便可实现 360 全景效果。
- https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/404b79d0218c4144bf17375cff666cfe~tplv-k3u1fbpfcp-zoom-1.image
- https://www.cnblogs.com/yanggeng/p/11285856.html
二、WebGL3D引擎
3D引擎先搭一个基本的3D场景,下面的演示使用three.js,同类的3D引擎还有babylon.js,playcanvas
var scene, camera, renderer;
function initThree(){
//场景
scene = new THREE.Scene();
//镜头
camera = new THREE.PerspectiveCamera(90, document.body.clientWidth / document.body.clientHeight, 0.1, 100);
camera.position.set(0, 0, 0.01);
//渲染器
renderer = new THREE.WebGLRenderer();
renderer.setSize(document.body.clientWidth, document.body.clientHeight);
document.getElementById("container").appendChild(renderer.domElement);
//镜头控制器
var controls = new THREE.OrbitControls(camera, renderer.domElement);
//一会儿在这里添加3D物体
loop();
}
//帧同步重绘
function loop() {
requestAnimationFrame(loop);
renderer.render(scene, camera);
}
window.onload = initThree;
三、CSS3D
css3d-engine 轻量引擎
window.onload=initCSS3D;
function initCSS3D(){
var s = new C3D.Stage();
s.size(window.innerWidth, window.innerHeight).update();
document.getElementById('container').appendChild(s.el);
var box = new C3D.Skybox();
box.size(954).position(0, 0, 0).material({
front: {image: "images/scene_front.jpeg"},
back: {image: "images/scene_back.jpeg"},
left: {image: "images/scene_right.jpeg"},
right: {image: "images/scene_left.jpeg"},
up: {image: "images/scene_top.jpeg"},
down: {image: "images/scene_bottom.jpeg"},
}).update();
s.addChild(box);
function loop() {
angleX += (curMouseX - lastMouseX + lastAngleX - angleX) * 0.3;
angleY += (curMouseY - lastMouseY + lastAngleY - angleY) * 0.3;
s.camera.rotation(angleY, -angleX, 0).updateT();
requestAnimationFrame(loop);
}
loop();
var lastMouseX = 0;
var lastMouseY = 0;
var curMouseX = 0;
var curMouseY = 0;
var lastAngleX = 0;
var lastAngleY = 0;
var angleX = 0;
var angleY = 0;
document.addEventListener("mousedown", mouseDownHandler);
document.addEventListener("mouseup", mouseUpHandler);
function mouseDownHandler(evt) {
lastMouseX = curMouseX = evt.pageX;
lastMouseY = curMouseY = evt.pageY;
lastAngleX = angleX;
lastAngleY = angleY;
document.addEventListener("mousemove", mouseMoveHandler);
}
function mouseMoveHandler(evt) {
curMouseX = evt.pageX;
curMouseY = evt.pageY;
}
function mouseUpHandler(evt) {
curMouseX = evt.pageX;
curMouseY = evt.pageY;
document.removeEventListener("mousemove", mouseMoveHandler);
}
}
web Javascript360°全景实现的更多相关文章
- 深入分析Java Web技术内幕(修订版)
阿里巴巴集团技术丛书 深入分析Java Web技术内幕(修订版)(阿里巴巴集团技术丛书.技术大牛范禹.玉伯.毕玄联合力荐!大型互联网公司开发应用实践!) 许令波 著 ISBN 978-7-121- ...
- Three.js 实现3D全景侦探小游戏🕵️
背景 你是嘿嘿嘿侦探社实习侦探️,接到上级指派任务,到甄开心小镇调查市民甄不戳宝石失窃案,根据线人流浪汉老石提供的线索,小偷就躲在小镇,快把他找出来,帮甄不戳寻回失窃的宝石吧! 本文使用 Three ...
- 硬核看房利器——Web 全景的实现
作者:凹凸曼 - EC 疫情期间,打破社交距离限制的交互模式被推向前台,为不少行业的传统交易提供了想象的空间. 疫情时期,房地产租售业受到的冲击无疑是巨大的,由于人口流动的限制,需求量大幅减少,无法现 ...
- 现在做 Web 全景合适吗?
Web 全景在以前带宽有限的条件下常常用来作为街景和 360° 全景图片的查看.它可以给用户一种 self-immersive 的体验,通过简单的操作,自由的查看周围的物体.随着一些运营商推出大王卡等 ...
- Web 前端开发精华文章推荐(jQuery、HTML5、CSS3)【系列十二】
2012年12月12日,[<Web 前端开发人员和设计师必读文章>系列十二]和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HT ...
- Web高级征程:《大型网站技术架构》读书笔记系列
一.此书到底何方神圣? <大型网站技术架构:核心原理与案例分析>通过梳理大型网站技术发展历程,剖析大型网站技术架构模式,深入讲述大型互联网架构设计的核心原理,并通过一组典型网站技术架构设计 ...
- 新作《ASP.NET Web API 2框架揭秘》正式出版
我觉得大部分人都是“眼球动物“,他们关注的往往都是目光所及的东西.对于很多软件从业者来说,他们对看得见(具有UI界面)的应用抱有极大的热忱,但是对背后支撑整个应用的服务却显得较为冷漠.如果我们将整个“ ...
- .Net全景视图
http://www.oneapm.com/ai/dotnet.html OneOneAPM 助您轻松锁定 .NET 应用性能瓶颈,通过强大的 Trace 记录逐层分析,直至锁定行级问题代码.以用户角 ...
- Unity VR全景漫游
一.前言: 最近VR如火如茶,再不学习就落伍啦.有空闲时间,跟Rodolfo一起研究下相关知识. 本文介绍了两种方法来制作VR场景: 方法一:通过6张小图搭建的VR场景 方法二:通过一张全景图来搭建V ...
随机推荐
- ELK 日志分析系统概述及部署
ELK 日志分析系统概述及部署 1.ELK概述: ELK简介 : ELK平台是一套完整的日志集中处理解决方案,将 ElasticSearch.Logstash 和 Kiabana 三个开源工具配合使用 ...
- postman项目接口文档和登录步骤原理
培训内容 实训项目:非常果岭-发现模块接口测试,单接口.流程脚本编写: 使用工具:postman 培训方式 1)postman使用说明 2)项目接口文档和登录步骤原理 一.首先了解postman使 ...
- Linux目录结构详细
今日内容 解析映射文件 在 window 和 Linux 系统中都有解析文件,一般名为 host,存放在配置目录 etc 中 在本地机访问网络输入域名时,首先会解析 host 文件,如果域名有对应的i ...
- 从.net开发做到云原生运维(零)——序
1. 为什么要写这个系列的文章 大家看到标题的时候肯定会感觉到困惑,这个标题里的两件事物好像并不是很搭.说到.net开发大家一般都会想到asp.net做网站,或者是wpf和winform这类桌面开发, ...
- 性能测试:k8s集群监控环境搭建(kube-prometheus)
选择kube-prometheus版本 k8s集群版本是1.22.x 5个节点 说明:如果你电脑配置低,也可以1个master节点,2个node节点 3个节点 Kube-Prometheus地址:ht ...
- FireWall、UTM、GAP、抗DDOS防火墙
1.信息安全产品分类 1)美国标准分类(NIST-SP800-36) NIST SP800系列标准 SP800是美国NIST(National Institute of Standards and T ...
- web安全之快速反弹 POST 请求
在 CTF Web 的基础题中,经常出现一类题型:在 HTTP 响应头获取了一段有效期很短的 key 值后,需要将经过处理后的 key 值快速 POST 给服务器,若 key 值还在有效期内,则服务器 ...
- 如何制作报表?报表教程:适合你的热销车TOP25
移动端看报表已成主流,Smartbi今天不是要告诉大家这是为什么,而是要实实在在的教大家,移动端报表应该怎么做,下面以Smartbi云报表的DEMO库中的"适合你的热销车TOP25" ...
- 【C#基础知识】C#控制台程序入口函数 Main(string[] args) 参数详解
测试环境vs2019+.net5.0 请看 :https://cloud.tencent.com/developer/article/1507934 本测试环境vs2022+.net6.0 +wind ...
- C#委托Action、Action<T>、Func<T>、Predicate<T>系统自带的委托
C#委托Action.Action<T>.Func<T>.Predicate<T> CLR环境中给我们内置了几个常用委托Action. Action<T& ...