preface

In fact, you can also achieve a panorama without Threejs. This article will use a small example to briefly explain the basic use of CSS3D-Engine

Basic knowledge of

Css3d-engine is a very good css3D library, easy to get started, mainly master the following elements

  • Stage: The position we place
  • Plane: Used when building a Plane
  • Camera: Necessary for 3D scenes, think of the Camera as our eyes
  • Cube (Box): Build cubes to use
  • Skybox: Used when building panoramic backgrounds

There are three elements that make up a 3D effect: scene, object and perspective. It’s much easier to understand 3D when you have these three elements:

Results demonstrate

Analysis of the

  • Cut the picture into 6 sides and tie them together to make a cube

code

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

<head>
	<meta charset="UTF-8">
	<title>A panoramic view</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>
		// Create a scene
		var s = new C3D.Stage();
		s.size(window.innerWidth, window.innerHeight).material({
			color: '#ccc'
		}).update();
		document.getElementById("main").appendChild(s.el);

		// Create a cube to place in the scene; (Sky box, suitable for making panoramic background, can add 6 sides of image definition when specifying material.)
		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);

		// Respond to screen resizing
		window.onresize = function () {
			s.size(window.innerWidth, window.innerHeight).update();
		};
		// Refresh the scene
		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;

		// Set the initialization value
		var LastMouseX = 0;
		var LastMouseY = 0;
		var LastAngelX = 0;
		var LastAngelY = 0;
		var anglerX = 0;
		var anglerY = 0;
		var CurMouseX = 0;
		var CurMouseY = 0;


		// Encapsulate the function with the mouse down
		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);
		}
		// Encapsulate the mouse movement function
		function mouseMove_handler(ev) {
			CurMouseX = ev.pageX;
			CurMouseY = ev.pageY;
		}
		// Mouse lift encapsulation function
		function mouseEnd_handler(ev) {
			CurMouseX = ev.pageX;
			CurMouseY = ev.pageY;
			document.removeEventListener("mousemove", mouseMove_handler);
		}

		function go() {

			// Calculate the rotation Angle of the x axis
			//anglerX = (CurMouseY - LastMouseY) / 1000 + (LastAngelX - anglerX);

			// Calculate the rotation Angle of the y axis
			anglerY = (CurMouseX - LastMouseX) / 1000 + (LastAngelY - anglerY);

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

			requestAnimationFrame(go);
		}
		requestAnimationFrame(go);
	</script>
</body>
Copy the code