three.js/panorama.html at master · rkweb/three.js · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html>
<html lang="en">
	<head>
		<title></title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<style>
			body {
				margin: 0px;
				background-color: #000000;
				overflow: hidden;
			}
		</style>
	</head>
	<body>
		<script src="http://go.163.com/2015/public/common/js/zepto.min.js"></script>
		<script type="text/javascript" src="./js/three.min.js"></script>
		<script src="./js/orienter.min.js"></script>
		<script>
			var isUserInteracting = false,lon = 0,lat = 0,phi = 0, theta = 0;
				var scene = new THREE.Scene();
				var renderer = new THREE.WebGLRenderer();
				renderer.setSize($(document).width(), $(document).height());
				var camera = new THREE.PerspectiveCamera(75, $(document).width() / $(document).height(), 1, 1100);
				camera.target = new THREE.Vector3( 0, 0, 0 );

				var geometry = new THREE.SphereGeometry( 500, 60, 40 );
				geometry.scale( - 1, 1, 1 );

				var material = new THREE.MeshBasicMaterial( {
					map: new THREE.TextureLoader().load( 'img/pano_sphere.jpg' )
				} );
				var mesh = new THREE.Mesh( geometry, material );
				scene.add( mesh );

				document.addEventListener( 'touchstart',onTouchstart, false );
				document.addEventListener( 'touchmove', onTouchsmove, false );
				document.addEventListener( 'touchend', onTouchsend, false );
				function onTouchstart( event ){
					event.preventDefault();
					isUserInteracting = true;
					onPointerDownPointerX = event.targetTouches[0].pageX;
					onPointerDownPointerY = event.targetTouches[0].pageY;
					onPointerDownLon = lon; //经度
					onPointerDownLat = lat; //纬度
				}
				function onTouchsmove( event ) {
					if ( isUserInteracting === true ) {
						lon = ( onPointerDownPointerX - event.targetTouches[0].pageX ) * 0.1 + onPointerDownLon;
						lat = ( event.targetTouches[0].pageY - onPointerDownPointerY ) * 0.1 + onPointerDownLat;
					}
				}
				function onTouchsend( event ) {
					isUserInteracting = false;
				}

				var o = new Orienter();
				var lon_orienter = 0,lat_orienter = 0,phi_orienter = 0;

				var old_lon = 0;
				var start_lon;
				// var offset = 0;
				o.handler = function (obj) {
					if(typeof start_lon == "undefined"){
						start_lon = obj.lon;
						old_lon = obj.lon;
						// lon_orienter = obj.lon;
						return;
					}
					// if(Math.abs(obj.lon - old_lon)>2){
						lon_orienter = obj.lon-start_lon;
					// }
					old_lon = obj.lon;

				    // if(Math.abs(old_lon-obj.lon)<1){
				    //     return;
				    // }
				    // if((obj.lon - old_lon)<0 || (obj.lon-old_lon)>100){
				    //     offset+=1;
				    // }else if((obj.lon - old_lon)>0 || (obj.lon-old_lon)<-100){
				    //     offset-=1;
				    // }
				    // old_lon =  obj.lon;

				    // lon_orienter =offset;
				    // lat_orienter = obj.lat;
				};
				o.init();

				var move_phi = 0;
				var move_theta = 0;
				function render(){
					lat = Math.max( - 85, Math.min( 85, (lat) ) );
				    phi = THREE.Math.degToRad( 90 - (lat));
				    theta = THREE.Math.degToRad( lon+lon_orienter );

				    move_phi += 0.1*(phi - move_phi);
				    move_theta += 0.1*(theta - move_theta);

					camera.target.x = 500 * Math.sin( phi ) * Math.cos( theta );
					camera.target.y = 500 * Math.cos( phi );
					camera.target.z = 500 * Math.sin( phi ) * Math.sin( theta );
					camera.lookAt(camera.target);
					// DeviceControls.update();
					renderer.render(scene, camera);
				}
				function animate(){
					render()
					window.requestAnimationFrame( animate );
				}

				//添加设备旋转控制 与手势不能同时使用
				document.body.appendChild(renderer.domElement);
				animate();
		</script>
	</body>
</html>