<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <title>Three.js Test</title> <!-- css --> <style> body { margin:0px; padding:0px; } .canvas_box { margin:0px; padding:0px; width:100%; height:100%; overflow:hidden; background-color:#000; position:relative; } #canvas_main { margin:0px; padding:0px; width:100%; height:100%; } #canvas_loader { margin:auto; position:absolute; top:0; left:0; right:0; bottom:0; pointer-events:none; } .canvas_loader, .canvas_loader:after { border-radius: 50%; width: 10em; height: 10em; } .canvas_loader { margin: 60px auto; font-size: 10px; position: relative; text-indent: -9999em; border-top: 1.1em solid rgba(255,0,255, 0.2); border-right: 1.1em solid rgba(255,0,255, 0.2); border-bottom: 1.1em solid rgba(255,0,255, 0.2); border-left: 1.1em solid #ff00ff; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); -webkit-animation: load8 1.1s infinite linear; animation: load8 1.1s infinite linear; } @-webkit-keyframes load8 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes load8 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } </style> <!-- js --> <script src="js/jquery-1.11.2.min.js"></script> <script src="js/three/three.min.js"></script> <script src="js/three/DeviceOrientationControls.js"></script> <script src="js/three/OrbitControls.js"></script> <script src="js/three/Detector.js"></script> <script src="js/panoramaViewer.js"></script> <script> jQuery(function(){ $(window).on("load",function(){ var rand=Math.floor(Math.random()*10000); $("#canvas_main").panoramaViewer({ src : "./src/texture.jpg?"+rand, src_pre : "./src/texture_s.jpg?"+rand, rotationY : -50, camera : { fov : 60, } }); }); }); </script> </head> <body> <div class="canvas_box"> <canvas id="canvas_main"></canvas> <div class="canvas_loader" id="canvas_loader"></div> </div> </body> </html>