web|web Javascript360°全景实现 webJavascript360°全景实现

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引擎 【web|web Javascript360°全景实现】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); } }