<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:#cff; } #canvas_main { margin:0px; padding:0px; width:100%; height:100%; } </style> <!-- js --> <script src="js/jquery-1.11.2.min.js"></script> <script src="js/three/three.min.js"></script> <script src="js/three/OrbitControls.js"></script> <script src="js/test003.js"></script> <script> jQuery(function(){ $(window).on("load",function(){ $("#canvas_main").panoramaViewer({ autoRotate : true, autoRotateSpeed : 0.1, enableRotate : true, camera : { fov : 60, } }); }); }); </script> </head> <body> <div id="canvas_box"> <canvas id="canvas_main"></canvas> </div> </body> </html>