-
Notifications
You must be signed in to change notification settings - Fork 24
/
CameraAnimation.html
107 lines (84 loc) · 4.08 KB
/
CameraAnimation.html
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CameraAnimationSample</title>
<script src="https://resource.mapray.com/mapray-js/v0.9.5/mapray.min.js"></script>
<link rel="stylesheet" href="https://resource.mapray.com/styles/v1/mapray.css">
<style>
html, body {
height: 100%;
margin: 0;
}
div#mapray-container {
display: flex;
position: relative;
height: 100%;
}
</style>
</head>
<body>
<div id="mapray-container"></div>
</body>
</html>
<script>
// サブクラスのコンストラクタ定義
function CameraAnimation() {
mapray.RenderCallback.call(this);
// Access Tokenを設定
var accessToken = "<your access token here>";
// Viewerを作成する
new mapray.Viewer("mapray-container", {
render_callback: this,
image_provider: new mapray.StandardImageProvider( { url: "https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/", format: "jpg", min_level: 2, max_level: 18 } ),
dem_provider: new mapray.CloudDemProvider(accessToken)
});
this.longitude = 138.730647; // 富士山の経度
this.latitude = 35.362773; // 富士山の緯度
this.height = 3776.24; // 富士山の高度
this.distance = 10000.0; // 富士山からの距離
this.pitch_angle = -30.0; // 仰俯角
this.angular_velocity = 5.0; // 毎フレームの回転角度
this.turn_angle = 0; // ターン角
}
// CameraAnimationにmapray.RenderCallbackを継承させる
CameraAnimation.prototype = Object.create(mapray.RenderCallback.prototype);
// 毎フレームの処理を定義
CameraAnimation.prototype.onUpdateFrame = function(delta_time) {
// 毎フレームの処理
var camera = this.viewer.camera;
// 基準座標系から GOCS への変換行列を生成
var base_geoPoint = new mapray.GeoPoint( this.longitude, this.latitude, this.height );
var base_to_gocs = base_geoPoint.getMlocsToGocsMatrix( mapray.GeoMath.createMatrix() );
// カメラの相対位置を計算し、姿勢を決める
var d = this.distance;
var camera_Mat = mapray.GeoMath.createMatrix();
var camera_pos_mat = mapray.GeoMath.createMatrix();
mapray.GeoMath.setIdentity(camera_pos_mat);
// カメラの位置をY軸方向に距離分移動させる
camera_pos_mat[13] = -d;
// z軸でturn_angle分回転させる回転行列を求める
var turn_Mat = mapray.GeoMath.rotation_matrix([0, 0, 1], this.turn_angle, mapray.GeoMath.createMatrix());
// x軸でpitch_angle分回転させる回転行列を求める
var pitch_Mat = mapray.GeoMath.rotation_matrix([1, 0, 0], this.pitch_angle, mapray.GeoMath.createMatrix());
// カメラの位置にX軸の回転行列をかける
mapray.GeoMath.mul_AA(pitch_Mat, camera_pos_mat, camera_pos_mat);
// カメラの位置にZ軸の回転行列をかける
mapray.GeoMath.mul_AA(turn_Mat, camera_pos_mat, camera_pos_mat);
// 視線方向を定義
var cam_pos = mapray.GeoMath.createVector3([camera_pos_mat[12], camera_pos_mat[13], camera_pos_mat[14]]);
var cam_end_pos = mapray.GeoMath.createVector3([0, 0, 0]);
var cam_up = mapray.GeoMath.createVector3([0, 0, 1]);
// ビュー変換行列を作成
mapray.GeoMath.lookat_matrix(cam_pos, cam_end_pos, cam_up, camera_Mat);
// カメラに変換行列を設定
mapray.GeoMath.mul_AA(base_to_gocs, camera_Mat, camera.view_to_gocs);
// カメラに近接遠方平面を設定
camera.near = this.distance / 2;
camera.far = camera.near * 1000;
// 次のターン角度
this.turn_angle += this.angular_velocity * delta_time;
}
// CameraAnimationのインスタンス作成
var cam_Animation = new CameraAnimation();
</script>