CSS3 动画之 css3d-engine 实现全景图

前言

其实，不用 Threejs也可以实现全景图，本文将以一个小例子，简单讲解一下 css3d-engine 的基本使用

基础知识

css3D-engine 是一个非常优秀的 css3d 库，上手简单，主要掌握以下几个元素

三维场景(Stage)：我们放置的位置
平面(Plane): 构建平面时使用
相机(Camera): 3D场景必备，将相机理解为我们的眼睛
立方体(Box): 构建立方体使用
全景盒子(Skybox): 构建全景背景时使用

构成3D效果的三要素：场景、物体、视角。把握住这三要素，理解3D就容易的多：

效果演示

分析

将图片切成6个面，然后扣在一起，就是一个立方体

代码

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>全景</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
	</style>
</head>

<body>
	<div id="main" style="width:500px;height:500px;"></div>
	<script type="text/javascript" src="./js/css3d.js"></script>
	<script>
		//创建场景
		var s = new C3D.Stage();
		s.size(window.innerWidth, window.innerHeight).material({
			color: '#ccc'
		}).update();
		document.getElementById("main").appendChild(s.el);

		//创建一个立方体放入场景中；(天空盒子，适合用来制作全景背景，指定材质时可以添加6面的图片定义。)
		var c = new C3D.Skybox();
		c.size(1024).position(0, 0, 0).material({
			front: { image: 'images/0.jpg' },
			back: { image: 'images/2.jpg' },
			left: { image: 'images/3.jpg' },
			right: { image: 'images/1.jpg' },
			up: { image: 'images/4.jpg' },
			down: { image: 'images/5.jpg' }
		}).update();
		s.addChild(c);

		//响应屏幕调整尺寸
		window.onresize = function () {
			s.size(window.innerWidth, window.innerHeight).update();
		};
		//刷新场景
		var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame ||
			function (callback) {
				setTimeout(callback, 1000 / 60);
			};

		document.onmousedown = mouseDown_handler;
		document.onmouseup = mouseEnd_handler;

		//设置初始化值
		var LastMouseX = 0;
		var LastMouseY = 0;
		var LastAngelX = 0;
		var LastAngelY = 0;
		var anglerX = 0;
		var anglerY = 0;
		var CurMouseX = 0;
		var CurMouseY = 0;


		//鼠标按下的封装函数
		function mouseDown_handler(ev) {
			LastMouseX = ev.pageX;
			LastMouseY = ev.pageY;
			CurMouseX = ev.pageX;
			CurMouseY = ev.pageY;
			LastAngelX = anglerX;
			LastAngelY = anglerY;
			document.addEventListener("mousemove", mouseMove_handler);
		}
		//鼠标移动的封装函数
		function mouseMove_handler(ev) {
			CurMouseX = ev.pageX;
			CurMouseY = ev.pageY;
		}
		//鼠标抬起的封装函数
		function mouseEnd_handler(ev) {
			CurMouseX = ev.pageX;
			CurMouseY = ev.pageY;
			document.removeEventListener("mousemove", mouseMove_handler);
		}

		function go() {

			//计算x轴的旋转角度
			//anglerX = (CurMouseY - LastMouseY) / 1000 + (LastAngelX - anglerX);

			//计算y轴的旋转角度
			anglerY = (CurMouseX - LastMouseX) / 1000 + (LastAngelY - anglerY);

			s.camera.rotate(0, anglerY, 0).updateT();

			requestAnimationFrame(go);
		}
		requestAnimationFrame(go);
	</script>
</body>