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