KFQuatLinearCurve
KFQuatLinearCurve は、キーフレーム間の四元数を線形補間する Curve クラスです。
このクラスを利用することで、四元数を使って 3D モデルの回転や向きを変化させるアニメーションを行うことができます。
主なメソッド
| メソッド名 |
関数値型 |
説明 |
| setKeyFrames |
vector4 |
キーフレームを設定します |
キーフレームは2つ以上必要で、アニメーション時刻は昇順、アニメーションパラメータは vector4 型を指定します。
この例では、以下のように設定しており、その中間の時間で値は球面線形補間されます。
- 時刻 \(0[s]\) 時点で \([ -0.183013, 0.183013, 0.683013, 0.683013 ]\)
- 時刻 \(3[s]\) の時に \([ -0.183013, -0.183013, -0.683013, 0.683012 ]\)
この場合 時刻 \(1.5[s]\) 時点での値は \([ 0.000000, 0.258819, 0.965926, 0.000000 ]\) となります。
| const curve = new mapray.animation.KFQuatLinearCurve();
curve.setKeyFrames([
mapray.animation.Time.fromNumber( 0 ), [ -0.183013, 0.183013, 0.683013, 0.683013 ],
mapray.animation.Time.fromNumber( 3 ), [ -0.183013, -0.183013, -0.683013, 0.683012 ],
]);
|
その他メソッドや詳細は リファレンスマニュアル を参照してください。
サンプルコード
四元数を使って 3D モデルを回転させるアニメーションの例を示します。
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 | <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://resource.mapray.com/mapray-js/v0.9.6/mapray.min.js"></script>
<script src="https://resource.mapray.com/ui/v0.9.6/maprayui.min.js"></script>
<link rel="stylesheet" href="https://resource.mapray.com/styles/v1/mapray.css">
<style>
html, body, div#mapray-container { margin: 0; padding: 0; height: 100%; }
</style>
</head>
<body>
<div id="mapray-container"></div>
</body>
</html>
<script>
class CustomViewer extends maprayui.StandardUIViewer {
constructor( container, apikey) {
super( container, apikey);
// Create updater.
this.totalTime = 0;
this.isAnimationStart = false;
this.updater = new mapray.animation.Updater();
}
/** @override */
onUpdateFrame( delta_time ) {
super.onUpdateFrame( delta_time );
if ( this.isAnimationStart ) {
this.totalTime += delta_time;
this.updater.update( mapray.animation.Time.fromNumber( this.totalTime ) );
}
}
/** @override */
onMouseDown( point, event ) {
super.onMouseDown( point, event );
this.totalTime = 0;
}
startAnimation() {
this.totalTime = 0;
this.isAnimationStart = true;
console.log( "start animation" );
}
}
async function main() {
// Set up your API Key, which can be created in Mapray Cloud.
const apikey = "<YOUR_MAPRAY_API_KEY>";
const uiviewer = new CustomViewer( "mapray-container", apikey);
const resource = new mapray.URLResource( "https://resource.mapray.com/assets/www/model/mapray-box-with-texture/scene.json" );
const loader = new mapray.SceneLoader( uiviewer.viewer.scene, resource );
await loader.load();
const modelEntity = uiviewer.viewer.scene.getEntity( 0 );
modelEntity.setPosition( new mapray.GeoPoint( 139.699985, 35.690777, 300 ) );
modelEntity.setScale( [ 2.0, 2.0, 2.0 ] );
// Create quaternion linear curve.
const curve = new mapray.animation.KFQuatLinearCurve();
curve.setKeyFrames([
mapray.animation.Time.fromNumber( 0 ), [ -0.183013, 0.183013, 0.683013, 0.683013 ],
mapray.animation.Time.fromNumber( 3 ), [ -0.183013, -0.183013, -0.683013, 0.683012 ],
]);
// Bind "orientation" param to updater and curve.
modelEntity.animation.bind( "orientation", uiviewer.updater, curve );
uiviewer.setCameraPosition({
longitude: 139.694425,
latitude: 35.668241,
height: 1322
});
uiviewer.setLookAtPosition({
longitude: 139.701612,
latitude: 35.694998,
height: 35
});
uiviewer.startAnimation();
}
main();
</script>
|