ComboVectorCurve
ComboVectorCurve は、複数の Curve を組み合わせて、ベクトル (vector2, vector3, vector4) を生成する Curve クラスです。
これにより、ベクトルの各成分に異なる Curve を設定するような、複合的なアニメーションを簡単に扱うことができます。
主なメソッド
| メソッド名 |
説明 |
| setChild |
指定したインデックスの子関数を設定します |
| setChildren |
すべての子関数を一括で設定します |
組み合わせる数値関数のことを子関数と呼びます。子関数は必ず number 型を返す Curve です。
setChild
setChild は、指定のインデックスの子関数を設定します。これにより、ベクトルの特定の成分のみを変更できます。
| const number = mapray.animation.Type.find( "number" );
const curve = new mapray.animation.ComboVectorCurve( mapray.animation.Type.find( "vector2" ) );
curve.setChild( 1, new mapray.animation.ConstantCurve( number, 10 ) ); // Y component
curve.setChild( 0, new mapray.animation.ConstantCurve( number, 20 ) ); // X component
|
setChildren
setChildren は、ベクトルの全ての成分に対する子関数を一括で設定します。
| const number = mapray.animation.Type.find( "number" );
const curve = new mapray.animation.ComboVectorCurve( mapray.animation.Type.find( "vector3" ) );
curve.setChildren([
new mapray.animation.ConstantCurve( number, 10 ), // X component
new mapray.animation.ConstantCurve( number, 20 ), // Y component
new mapray.animation.ConstantCurve( number, 30 ), // Z component
]);
|
その他メソッドや詳細は リファレンスマニュアル を参照してください。
ConstantCurve
ConstantCurve はすべての時刻で同じ値を返す関数です。コンストラクタまたは setConstantValue で値を設定します。
サンプルコード
ComboVectorCurve を使って、位置座標の各成分に異なる curve を設定する例を示します。
longitude は ConstantCurve を設定し、latitude は KFLinearCurve 、altitude は KFStepCurve を設定して時間経過に応じて変化させます。
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 | <!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, accessToken, options ) {
super( container, accessToken, options );
const geoPos = new mapray.GeoPoint( 139.699985, 35.690777, 40 );
const pinEntity = new mapray.PinEntity( this.viewer.scene );
pinEntity.addPin( geoPos, { id: "pin", size: 40, bg_color: [1, 0, 0] });
this.viewer.scene.addEntity( pinEntity );
const pinEntry = pinEntity.getEntry( "pin" );
// Create combo vector curve.
const curve = new mapray.animation.ComboVectorCurve( mapray.animation.Type.find( "vector3" ) );
const lonCurve = new mapray.animation.ConstantCurve( mapray.animation.Type.find( "number" ) );
const latCurve = new mapray.animation.KFLinearCurve( mapray.animation.Type.find( "number" ) );
const altCurve = new mapray.animation.KFStepCurve( mapray.animation.Type.find( "number" ) );
lonCurve.setConstantValue( geoPos.longitude );
latCurve.setKeyFrames([
mapray.animation.Time.fromNumber( 0.0 ), geoPos.latitude - 0.003,
mapray.animation.Time.fromNumber( 1.0 ), geoPos.latitude - 0.003,
mapray.animation.Time.fromNumber( 5.0 ), geoPos.latitude + 0.003
]);
altCurve.setKeyFrames([
mapray.animation.Time.fromNumber( 0.0 ), geoPos.altitude + 50.0,
mapray.animation.Time.fromNumber( 1.0 ), geoPos.altitude,
mapray.animation.Time.fromNumber( 5.0 ), geoPos.altitude,
mapray.animation.Time.fromNumber( 5.5 ), geoPos.altitude + 50.0
]);
curve.setChildren( [ lonCurve, latCurve, altCurve ] );
// Create updater.
this.totalTime = 0;
this.isAnimationStart = false;
this.updater = new mapray.animation.Updater();
// Bind "position" param to updater and curve.
pinEntry.animation.bind( "position", this.updater, curve );
}
/** @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" );
}
}
// Set up your Organization Token, which can be created in Mapray Cloud.
const accessToken = "<YOUR_MAPRAY_ACCESS_TOKEN>";
const uiviewer = new CustomViewer( "mapray-container", accessToken, {
dem_provider: new mapray.StandardDemProvider( {
prefix: "https://tiles.mapray.com/dem/",
headers: { Authorization: "Bearer " + accessToken }
} )
} );
uiviewer.setCameraPosition({
longitude: 139.697475,
latitude: 35.682494,
height: 420
});
uiviewer.setLookAtPosition({
longitude: 139.699985,
latitude: 35.690777,
height: 35
});
uiviewer.startAnimation();
</script>
|