|
|
@@ -0,0 +1,344 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+
|
|
|
+<head>
|
|
|
+ <title>3D全景之</title>
|
|
|
+ <meta charset="utf-8" />
|
|
|
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
|
|
+ <meta id="jdouview" name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
|
|
|
+ <meta name="format-detection" content="telephone=no">
|
|
|
+ <style>
|
|
|
+ body {
|
|
|
+ background-color: #000000;
|
|
|
+ margin: 0;
|
|
|
+ cursor: move;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bg_section {
|
|
|
+ width: 1026px;
|
|
|
+ height: 1026px;
|
|
|
+ background-size: cover;
|
|
|
+ position: absolute;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bg_section .bg {
|
|
|
+ position: absolute;
|
|
|
+ width: 1026px;
|
|
|
+ height: 1026px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn1 {
|
|
|
+ position: absolute;
|
|
|
+ width: 74px;
|
|
|
+ height: 96px;
|
|
|
+ top: 20%;
|
|
|
+ left: 40%;
|
|
|
+ -webkit-transform: perspective(600px);
|
|
|
+ background: url("images/btn1.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn2 {
|
|
|
+ position: absolute;
|
|
|
+ width: 71px;
|
|
|
+ height: 91px;
|
|
|
+ top: 30%;
|
|
|
+ left: 50%;
|
|
|
+ -webkit-transform: perspective(600px);
|
|
|
+ background: url("images/btn2.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .controlBtn {
|
|
|
+ width: 60px;
|
|
|
+ height: 60px;
|
|
|
+ position: fixed;
|
|
|
+ z-index: 99999;
|
|
|
+ left: 8%;
|
|
|
+ top: 5%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .controlIcon {
|
|
|
+ background: url("images/controlIcon.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .controlIconae {
|
|
|
+ background: url("images/controlIconae.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ @-webkit-keyframes bounceant1 {
|
|
|
+ 0% {
|
|
|
+ -webkit-transform: translateY(0)
|
|
|
+ }
|
|
|
+
|
|
|
+ 50% {
|
|
|
+ -webkit-transform: translateY(-12px)
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ -webkit-transform: translateY(0px)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes bounceant1 {
|
|
|
+ 0% {
|
|
|
+ transform: translateY(0)
|
|
|
+ }
|
|
|
+
|
|
|
+ 50% {
|
|
|
+ transform: translateY(-12px)
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ transform: translateY(0px)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .bounceant1 {
|
|
|
+ -webkit-animation: bounceant1 3s infinite;
|
|
|
+ animation: bounceant1 3s infinite
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+
|
|
|
+<body>
|
|
|
+
|
|
|
+
|
|
|
+ <!-- <div id="controlBtn" class="controlBtn controlIconae"></div> -->
|
|
|
+ <!-- 陀螺仪开启按钮 -->
|
|
|
+ <div id="pano">
|
|
|
+ <!-- 正方体的六个面 -->
|
|
|
+ <div id="bg_section_0" class="bg_section bg_section_4 scale_test">
|
|
|
+ <img class="bg" src="images/pic.right.jpg">
|
|
|
+ <!-- <div class="btn1 bounceant1"></div> -->
|
|
|
+ <!-- 可点击按钮1 -->
|
|
|
+ </div>
|
|
|
+ <div id="bg_section_1" class="bg_section bg_section_5 scale_test">
|
|
|
+ <img class="bg" src="images/pic.left.jpg">
|
|
|
+ </div>
|
|
|
+ <div id="bg_section_2" class="bg_section bg_section_2 scale_test">
|
|
|
+ <img class="bg" src="images/pic.top.jpg">
|
|
|
+ </div>
|
|
|
+ <div id="bg_section_3" class="bg_section bg_section_3 scale_test">
|
|
|
+ <img class="bg" src="images/pic.bottom.jpg">
|
|
|
+ </div>
|
|
|
+ <div id="bg_section_4" class="bg_section bg_section_1 scale_test">
|
|
|
+ <img class="bg" src="images/pic.front.jpg">
|
|
|
+ <!-- <div class="btn2 bounceant1"></div> -->
|
|
|
+ <!-- 可点击按钮2 -->
|
|
|
+ </div>
|
|
|
+ <div id="bg_section_5" class="bg_section bg_section_0 scale_test">
|
|
|
+ <img class="bg" src="images/pic.back.jpg">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <script src="js/zepto.min.js"></script>
|
|
|
+ <script src="js/three.min.js"></script>
|
|
|
+ <script src="js/CSS3DRenderer.min.js"></script>
|
|
|
+ <script src="js/DeviceOrientationControls.js"></script>
|
|
|
+ <script>
|
|
|
+
|
|
|
+ var camera, scene, renderer;
|
|
|
+ var geometry, material, mesh;
|
|
|
+ var target = new THREE.Vector3();
|
|
|
+
|
|
|
+ var lon = 90, lat = 0;
|
|
|
+ var phi = 0, theta = 0;
|
|
|
+
|
|
|
+ var touchX, touchY;
|
|
|
+
|
|
|
+ init();
|
|
|
+ animate();
|
|
|
+
|
|
|
+ function init() {
|
|
|
+ /**
|
|
|
+ * 添加相机
|
|
|
+ * @type {THREE.PerspectiveCamera}
|
|
|
+ */
|
|
|
+ camera = new THREE.PerspectiveCamera(
|
|
|
+ 75, // 相机视角的夹角
|
|
|
+ window.innerWidth / window.innerHeight, // 相机画幅比
|
|
|
+ 1, // 最近焦距
|
|
|
+ 1000 // 最远焦距
|
|
|
+ );
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 创建场景
|
|
|
+ * @type {THREE.Scene}
|
|
|
+ */
|
|
|
+ scene = new THREE.Scene();
|
|
|
+
|
|
|
+ /**
|
|
|
+ *正方体的6个面的资源及相关（坐标、旋转等）设置
|
|
|
+ */
|
|
|
+ var flipAngle = Math.PI, // 180度
|
|
|
+ rightAngle = flipAngle / 2, // 90度
|
|
|
+ tileWidth = 512;
|
|
|
+ var sides = [{
|
|
|
+ url: "images/panorama.right.jpg",
|
|
|
+ position: [-tileWidth, 0, 0],
|
|
|
+ rotation: [0, rightAngle, 0]
|
|
|
+ }, {
|
|
|
+ url: "images/panorama.left.jpg",
|
|
|
+ position: [tileWidth, 0, 0],
|
|
|
+ rotation: [0, -rightAngle, 0]
|
|
|
+ }, {
|
|
|
+ url: "images/panorama.top.jpg",
|
|
|
+ position: [0, tileWidth, 0],
|
|
|
+ rotation: [rightAngle, 0, Math.PI]
|
|
|
+ }, {
|
|
|
+ url: "images/panorama.bottom.jpg",
|
|
|
+ position: [0, -tileWidth, 0],
|
|
|
+ rotation: [-rightAngle, 0, Math.PI]
|
|
|
+ }, {
|
|
|
+ url: "images/panorama.front.jpg",
|
|
|
+ position: [0, 0, tileWidth],
|
|
|
+ rotation: [0, Math.PI, 0]
|
|
|
+ }, {
|
|
|
+ url: "images/panorama.back.jpg",
|
|
|
+ position: [0, 0, -tileWidth],
|
|
|
+ rotation: [0, 0, 0]
|
|
|
+ }];
|
|
|
+
|
|
|
+ for (var i = 0; i < sides.length; i++) {
|
|
|
+ var side = sides[i];
|
|
|
+ var element = document.getElementById("bg_section_" + i);
|
|
|
+ element.width = 1026;
|
|
|
+ element.height = 1026; // 2 pixels extra to close the gap.
|
|
|
+ // 添加一个渲染器
|
|
|
+ var object = new THREE.CSS3DObject(element);
|
|
|
+ object.position.fromArray(side.position);
|
|
|
+ object.rotation.fromArray(side.rotation);
|
|
|
+ scene.add(object);
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ renderer = new THREE.CSS3DRenderer(); // 定义渲染器
|
|
|
+ renderer.setSize(window.innerWidth, window.innerHeight); // 定义尺寸
|
|
|
+ document.body.appendChild(renderer.domElement); // 将场景到加入页面中
|
|
|
+
|
|
|
+ initDevices();
|
|
|
+ initMouseControl();
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ // 初始化控制器
|
|
|
+ function initMouseControl() {
|
|
|
+ // mouseControl = new THREE.OrbitControls(camera);
|
|
|
+ document.addEventListener('mousedown', onDocumentMouseDown, false);
|
|
|
+ document.addEventListener('wheel', onDocumentMouseWheel, false);
|
|
|
+ document.addEventListener('touchstart', onDocumentTouchStart, false);
|
|
|
+ document.addEventListener('touchmove', onDocumentTouchMove, false);
|
|
|
+ window.addEventListener('resize', onWindowResize, false);
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ var controlsBtn = document.getElementById("controlBtn"); // 控制陀螺仪开关的按钮
|
|
|
+ var isDeviceing = false; // 陀螺仪状态
|
|
|
+ controlsBtn.addEventListener("touchend", controlDevice, true);
|
|
|
+ isDeviceing == true ? $("#controlBtn").addClass("controlIconae") : $("#controlBtn").addClass("controlIcon");
|
|
|
+ // 初始化陀螺仪
|
|
|
+ function initDevices() {
|
|
|
+ deviceControl = new THREE.DeviceOrientationControls(camera);
|
|
|
+ }
|
|
|
+ /* 控制陀螺仪 */
|
|
|
+ function controlDevice(event) {
|
|
|
+ if (isDeviceing == true) {
|
|
|
+ isDeviceing = false;
|
|
|
+ //关闭陀螺仪
|
|
|
+ $("#controlBtn").removeClass("controlIcon").addClass("controlIconae");
|
|
|
+ } else {
|
|
|
+ isDeviceing = true;
|
|
|
+ //开启陀螺仪
|
|
|
+ $("#controlBtn").removeClass("controlIconae").addClass("controlIcon");
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 窗体大小改变
|
|
|
+ */
|
|
|
+ function onWindowResize() {
|
|
|
+ camera.aspect = window.innerWidth / window.innerHeight;
|
|
|
+ camera.updateProjectionMatrix();
|
|
|
+ renderer.setSize(window.innerWidth, window.innerHeight);
|
|
|
+ }
|
|
|
+
|
|
|
+ /*
|
|
|
+ 相机焦点跟着鼠标或手指的操作移动
|
|
|
+ */
|
|
|
+ function onDocumentMouseDown(event) {
|
|
|
+ event.preventDefault();
|
|
|
+ document.addEventListener('mousemove', onDocumentMouseMove, false);
|
|
|
+ document.addEventListener('mouseup', onDocumentMouseUp, false);
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ function onDocumentMouseMove(event) {
|
|
|
+ var movementX = event.movementX || event.mozMovementX || event.webkitMovementX || 0;
|
|
|
+ var movementY = event.movementY || event.mozMovementY || event.webkitMovementY || 0;
|
|
|
+ lon -= movementX * 0.1;
|
|
|
+ lat += movementY * 0.1;
|
|
|
+ }
|
|
|
+
|
|
|
+ function onDocumentMouseUp(event) {
|
|
|
+ document.removeEventListener('mousemove', onDocumentMouseMove);
|
|
|
+ document.removeEventListener('mouseup', onDocumentMouseUp);
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 鼠标滚轮改变相机焦距
|
|
|
+ */
|
|
|
+ function onDocumentMouseWheel(event) {
|
|
|
+ camera.fov += event.deltaY * 0.05;
|
|
|
+ camera.updateProjectionMatrix();
|
|
|
+ }
|
|
|
+
|
|
|
+ function onDocumentTouchStart(event) {
|
|
|
+ event.preventDefault();
|
|
|
+ var touch = event.touches[0];
|
|
|
+ touchX = touch.screenX;
|
|
|
+ touchY = touch.screenY;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ function onDocumentTouchMove(event) {
|
|
|
+ event.preventDefault();
|
|
|
+ var touch = event.touches[0];
|
|
|
+ lon -= (touch.screenX - touchX) * 0.1;
|
|
|
+ lat += (touch.screenY - touchY) * 0.1;
|
|
|
+ touchX = touch.screenX;
|
|
|
+ touchY = touch.screenY;
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 实时渲染函数
|
|
|
+ */
|
|
|
+ function animate() {
|
|
|
+ requestAnimationFrame(animate);
|
|
|
+ // lon = Math.max(-180, Math.min(180, lon));//限制固定角度内旋转
|
|
|
+ // lon += 0.1;//自动旋转
|
|
|
+ lat = Math.max(-85, Math.min(85, lat)); //限制固定角度内旋转
|
|
|
+ phi = THREE.Math.degToRad(85 - lat);
|
|
|
+ theta = THREE.Math.degToRad(lon + 180);
|
|
|
+ target.x = Math.sin(phi) * Math.cos(theta);
|
|
|
+ target.y = Math.cos(phi);
|
|
|
+ target.z = Math.sin(phi) * Math.sin(theta);
|
|
|
+ camera.lookAt(target);
|
|
|
+ camera.updateProjectionMatrix();
|
|
|
+ isDeviceing == false ? initMouseControl() : deviceControl.update();
|
|
|
+ renderer.render(scene, camera);
|
|
|
+ }
|
|
|
+
|
|
|
+ $('.btn1').on('click', function () {
|
|
|
+ alert('第一个按钮被点击了');
|
|
|
+ });
|
|
|
+ $('.btn2').on('click', function () {
|
|
|
+ alert('第二个按钮被点击了');
|
|
|
+ });
|
|
|
+
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+
|
|
|
+</html>
|
