3Dインタラクションを可能にしたり、カメラや照明などを調整できるようにするには、klar.landの管理メニューのステージにあるJSONテキストフィールドを使って個々の設定オプションを作成する。 この仕組みについては、こちらで詳しく説明している。
glbファイルをアップロードした後、”Generate defaultjson “ボタンを押すことにより、最小限のJSONコードを生成することができる（glbファイルには “Defaultcam “という名前のカメラが少なくとも1つ含まれていなければならない）。
最小限のJSONコードは次のようになる（1つのステージはすでにこれで動いている）。 このコードは、以下のドキュメントを使用して自由に拡張することができる。
{
"Stage3dData" :[
{
"threedfile" : "Dateiname.glb",
"outlinelevel" : 0,
"lightsetup": 0,
"spritescale": 1,
"defaultqualitylevel": 0,
"scenetype": "_3d"
}
]
}
(!) 重要な注意：以下のJSONコード・スニペットでは、括弧が欠けていたり、パラメータが[number] のような一般的な形式でしか指定されていない場合がある。 したがって、ステージの動作中のJSONからのみコードをコピーまたは適応することを推奨する。
データ要件
Stage3dDataを指定しなければならない：
構造だ：
"Stage3dData" :[
{
"threedfile" : "szenenname.glb",
"outlinelevel" : [number],
"perspectives":[
{
"name":"Standard Kamera",
"camera":"Defaultcam"
}
],
"lightsetup": [number],
"spritescale": [number],
"defaultqualitylevel": [number],
"scenetype": [string]
},
],
"AOMaps" : [
{
"mesh":"Meshname",
"aomap":"Texturname.jpg"
}
],
説明しよう：
“threedfile” : “szenenname.glb” シーンのファイル名（現在はglbsのみサポート）。
“outlinelevel“：シーンをロードするときに、オブジェクトがすでにアウトライン（クリック可能なオブジェクトを強調する青い枠）を受け取っている場合は0、オブジェクトがボタンをクリックした後にのみアウトラインを受け取る場合は1。
「perspectives” : オプション、メニューに表示するカメラのリスト。
“lightsetup“：0はHDRのみ、1はHDR＋Point＋Arealightを使用（現在は実装されていない）
“spritescale” : 1 ボタンのテクスチャのスケーリング、
“defaultqualitylevel” : 0 = renderpass + outlinepass + fxaapass (パフォーマンスと見た目の妥協), 1 = ssaapass + outlinepass (アンチエイリアスが良くなり、パフォーマンスが悪くなる)
「scenetype” : “3d” または “360
"useCases" :[
{
"name":"Usecasename",
"group":"Usecasegroup",
"animationlayer": [number],
"state":[number],
"trigger_objects":["triggerobject"],
"cam":
{
"name": "camname",
"position": [0, 0, 0],
"rotation":[0, 0, 0],
"lookatTarget": "lookatobject"
},
"animations":
[
{
"name":"Objektname Anim01",
"tc":0,
"loop":"true"
},
{
"name":"Objektname Anim02",
"tc":0
}
]
},
“camname“はcamで終わらなければならない
「lookatTarget” : “lookatobject” (指定がない場合、クリックされたオブジェクトがlookattargetとして使用される)
“name” : “[Objektname Anim01]” （JSONと同様に、glbのアニメーションオブジェクトで始まり、スペースが続き、ユニークなアニメーション名が続く必要がある） // 例：’flap_up_armature open’、アニメーション名にスペースを入れることがソフトウェア上不可能な場合（例：3dsMax）、%文字を使用することもできる。
“tc“:[number] （秒単位のタイムコード、アニメーションは指定された時間後に再生される。）
“loop” : true（指定され、かつtrueの場合、アニメーションはループとして再生される。）
“autoplay” : true – アニメーションを最初から自動的に再生する。
アニメーションのレイヤー／ステートの説明
アニメーションレイヤーは、主にオブジェクトのハイライトや、どのオブジェクトをクリックするとハイライトされ、選択可能になるかの割り当てに使われる。
Stateは、オブジェクトが複数のステートを持ち、ステートに応じて異なるアニメーションを再生する場合に使われる。
z.B.:
アニメーション・レイヤー0：ハイライトされず、ボタン、つまりインタラクションなしでカメラがジャンプするときに使われる。
アニメーションレイヤー1：アニメーションレイヤー0のオブジェクト（ボタン）がクリックされるとハイライトされる。
アニメーションレイヤー2：グループのアニメーションレイヤー0のオブジェクトがクリックされると同時に、アニメーションレイヤー2に移動する。
例を挙げよう：
アニメーションレイヤー0：引き出し3にジャンプする
アニメーションレイヤー1：引き出し3を開ける
アニメーションレイヤー2：クリックしたナイフのアニメーション、引き出しの中のものを再生する。
ステート0/1は現在、アニメーションのトグリングに使用されている：
だからだ：
デフォルトでは状態0のオブジェクトがクリックされると、状態1のアニメーションがあるかどうかがチェックされる。 この場合、アニメーションが再生され、オブジェクトは状態1になる。
再びクリックされると、ステート1のアニメーションが再生され、オブジェクトはステート0に戻る。
例を挙げよう：
状態0：シリアルの戸棚の扉が開く
状態1：シリアルの戸棚の扉が閉まる（編集済み）
現在、0と1よりも多くの状態、およびこれらの問い合わせが計画／進行中である。
さらに詳しい情報を：
アニメーション配列は、アニメーション配列にアニメーションとして挿入することができる。 このアニメーション・シーケンスはループさせることができる。
背景色
背景色を設定する：
{
"Stage3dData": [
{
"backgroundColor": "rgb(81, 87, 99)",
.....
背景色はrgbの他に、以下のように指定することもできる：
「rgb(255, 0, 0)”
「rgb(100%, 0%, 0%)”
X11カラー名 – 140のカラー名すべてに対応している。
スカイブルー
//HSL 文字列
「hsl(0, 100%, 50%)”
Hdr環境光
オプションだ。
指定がない場合、デフォルトのスタジオhdrが使用される：/files/stages/hdr/studio_01.hdr。
hdr」-「name」で、このステージのHdrファイルのファイル名を指定するオプションがある。 これはサーバー上の”/files/stages/hdr “の下になければならない。 klar.landのアカウント・マネージャーにファイルを送れば、そこで利用できるようになる。
我々は現在、以下の標準HDRIを提供している：
- アダムズ_プレース_ブリッヂ_1k.hdr
- オートショップ_01_1k.hdr
- comfy_cafe_1k.hdr
- グラデーション_01.hdr
- hotel_room_1k.hdr
- 上海_bund_1k.hdr
- スカイライト_ガレージ_1k.hdr
- スタジオ_01.hdr
- スタジオ_01_ヘラー.hdr
- studio_small_06_1k.hdr
- studio_small_08_1k.hdr
- ベニス_サンセット_1k.hdr
- white.hdr
“intensity“：光の強さ – 何度かテストする必要があるかもしれない。
例 – JSON：
"Stage3dData" :[
{
"threedfile" : "muellmaschiene.glb",
"outlinelevel" : 0,
"lightsetup": 0,
"hdr":{
"name":"venice_sunset_1k.hdr",
"intensity": 3
},
"spritescale": 1,
"defaultqualitylevel": 0,
"scenetype": "3d",
オブジェクトクリックでHTMLドキュメントを呼び出す
これは、ユースケース内のドキュメントエリアに作成することができる：
例 – JSON：
{
"cam": {
"name": "rauchmelder01cam",
"position": [
0,
0,
0
],
"rotation": [
0,
0,
0
],
"lookattarget": "rauchmelder01"
},
"name": "rm",
"group": "rm",
"state": 0,
"documents": [
{
"name": "rauchmelder.html",
"type": "html",
"uuid": "d90701d8-0769-4ba6-b23e-327ca0637df1",
"playonclick": true
}
],
"animationlayer": 0,
"trigger_objects": [
"rauchmeldergruppe01"
]
},
オブジェクトクリックでハイパーリンクを呼び出す
この目的のために、ユースケースでは
“gotourl” : “URL “を入力しなければならない
(新しいタブで開く）
例 – 使用例：
{
"name":"zb out",
"group":"zb",
"animationlayer": 0,
"state":0,
"gotourl":"https://www.klar.land",
"trigger_objects":["zbgroup"],
"cam":
{
"name": "zbcam",
"position": [0, 0, 0],
"rotation":[0, 0, 0]
},
"animations":
[
{
"name":"zbgroup%out",
"tc":0
}
]
}
マテリアル – アニメーション
基本的に、どのユースケースでもmaterialAnimations Arrayオブジェクトを作成できる：
“materialAnimations“: [{}] これには以下のパラメータを入力できる：
name: 名前が一意であり、jsonの中で2回目に登場しないこと以外は、ここで考慮する必要はない。
action：ここで、どのようなマテリアル・アニメーションを実行するかを指定する。
可能な値は以下の通りである：
変更マテリアル値
アドマテリアルバリュー・トゥイーン
テクスチャの位置値を変更する
テクスチャ位置値を追加する
変更テクスチャ回転角度の値
テクスチャ回転度値を追加する。
ストップマテリアルアニメーション
説明しよう：
addとchangeの違いは、addの場合、希望する値が古い材料値に追加され、changeの場合、現在の値が指定された値に変更されることである。
これは特にループに関係する。
たとえば、テクスチャをx軸上で右に移動させる場合、changeTexturePositionValueを使用することができる。 しかし、ループが2回目に実行されると、テクスチャーはx=2に移動され、すでにこの位置にあるため、テクスチャーは移動しなくなる。
ループ実行ごとに値を1ずつ増やしたい場合は、適切な「add」アクションを使うべきである。 これにより、マテリアル値の調整だけでなく、テクスチャの回転や移動も可能になる。 stopMaterialAnimationで、実行中のマテリアルアニメーションを停止できる。 これは例えば、無限ループに陥っているアニメーションを停止させる場合などに関係する。
ループだ：
これはオプションのパラメータである。
設定されていない場合、materialAnimationは一度だけ実行される。
このパラメータが設定され、値が0またはtrueの場合、無限にループする。
ここに数値を入力すると、その回数だけアニメーションがループする。
loop = 12は、素材アニメーションを正確に12回繰り返す。
を開始する：
end_tc：
ここでは、アニメーションの開始時間と終了時間を秒単位で定義する（小数点以下も可能）。
start_tcは、UseCaseが実行された後、いつ素材アニメーションを開始するかを示す。
start_tc = 2の場合、アニメーションは2秒遅れて開始され、start_tc = 0の場合、アニメーションはすぐに開始される。
end_tcは、アニメーションを停止するタイミングを示す。
両方の値の組み合わせによって、アニメーションの実行速度が決まる。 start_tcとend_tcが近ければ近いほど、アニメーションは速く再生される。
materialName:アニメーションさせる素材の名前をここに指定する。
materialproperty：どのマテリアル・プロパティ／テクスチャに影響を与えるかを決定する。
可能なmaterialPropertiesである：
不透明性
発光強度
放射性
aoMapIntensity
バンプスケール
カラー
変位スケール
envMapIntensity
ライトマップ強度
きんぞくせい
凹凸
可能なテクスチャーだ：
地図
アルファマップ
エミッシブマップ
アオマップ
バンプマップ
環境マップ
変位マップ
ライトマップ
メタルネス・マップ
ノーマルマップ
影響を受けた：
addTexturePositionValueまたはchangeTexturePositionValueアクションが指定されている場合にのみ指定する必要があるオプションのパラメータである。
現在、xまたはyをここで指定することができる。
テクスチャーが水平方向に動く場合はx、垂直方向に動く場合はyをここに入力する。
例えば「affectedvalue”: “x”、
トゥイーン値
選択されたプロパティを設定する数値。
テクスチャー回転アクションが選択されている場合、希望する回転を度単位で指定する必要がある。
例えば、テクスチャーを180度回転させる：
「tweenValue」：180、
jsonの例：
{
"useCases": [
{
"name": "Start Opacity Animation",
"group": "Material",
"state": 0,
"animationlayer": 0,
"trigger_objects": [
"Cube0"
],
"materialAnimations": [
{
"loop": true,
"name": "changeOpacity",
"action": "changeMaterialValue",
"end_tc": 10,
"start_tc": 0,
"tweenValue": 0,
"materialName": "Material0",
"materialproperty": "opacity"
}
]
},
{
"name": "Start Diffuse Map Animation",
"group": "Material",
"state": 0,
"animationlayer": 0,
"trigger_objects": [
"Cube1"
],
"materialAnimations": [
{
"loop": 0,
"name": "add diffuse pos",
"action": "addTexturePositionValue",
"end_tc": 2,
"start_tc": 0,
"tweenValue": 2,
"materialName": "Material1",
"affectedvalue": "x",
"materialproperty": "map"
}
]
},
{
"name": "Start AlphaMap Animation",
"group": "Material",
"state": 0,
"animationlayer": 0,
"trigger_objects": [
"Cube5"
],
"materialAnimations": [
{
"name": "add diffuse pos",
"action": "addTexturePositionValue",
"end_tc": 8,
"start_tc": 0,
"tweenValue": 2,
"materialName": "Material5",
"affectedvalue": "x",
"materialproperty": "map"
}
]
},
{
"name": "Start Diffuse Map Animation",
"group": "Material",
"state": 0,
"animationlayer": 0,
"trigger_objects": [
"Cube2"
],
"materialAnimations": [
{
"loop": 2,
"name": "change diffuse pos",
"action": "changeTexturePositionValue",
"end_tc": 10,
"start_tc": 0,
"tweenValue": 2,
"materialName": "Material2",
"affectedvalue": "y",
"materialproperty": "map"
}
]
},
{
"name": "Start Diffuse Map Rotation Animation",
"group": "Material",
"state": 0,
"animationlayer": 0,
"trigger_objects": [
"Cube3"
],
"materialAnimations": [
{
"loop": 1,
"name": "add diffuse rotation",
"action": "addTextureRotationDegreeValue",
"end_tc": 10,
"start_tc": 0,
"tweenValue": 180,
"materialName": "Material3",
"materialproperty": "map"
}
]
},
{
"name": "trigger lod1 anim",
"group": "Cube6",
"state": 0,
"animations": [
{
"tc": 0,
"name": "Cube6_lod1 Action"
}
],
"animationlayer": 0,
"trigger_objects": [
"Cube6_lod1"
]
},
{
"name": "Stop Opacity Animation",
"group": "Material",
"state": 0,
"animationlayer": 0,
"trigger_objects": [
"Cube4"
],
"materialAnimations": [
{
"name": "changeOpacity",
"action": "stopMaterialAnimation",
"start_tc": 0
}
]
}
],
"Stage3dData": [
{
"controls": {
"maxZoom": 100000,
"minZoom": 1,
"zoomMode": 1,
"maxDistance": 100000,
"minDistance": 1
},
"scenetype": "_3d",
"lightsetup": 0,
"threedfile": "cube6.glb",
"loddistance": 5,
"spritescale": 1,
"outlinelevel": 0,
"defaultqualitylevel": 0
}
]
}
メディアを呼び出す（PDF/ビデオ/…）
オブジェクトやボタンをクリックすると、1つまたは複数のドキュメント（video/mp4、pdf、jpg、png）を取得することが可能で、取得したドキュメントは「メディア」タブに表示される。
メディアは、各ステージのdocsフォルダ（/files/stages/[uuid]/docs）にあるサーバーにアップロードされなければならない。 (データをklar.landのアカウント・マネージャーに送り、アカウント・マネージャーがあなたのためにデータを保存する）。
「trigger_objects” トリガーとなるオブジェクトまたはボタン
「cam” – ここでは特に、関連するカメラの名前とカメラのターゲットが指定される。
「documents” – 検索する1つまたは複数のドキュメント。
“タイプ” – ビデオ｜画像｜PDF
「uuid” –https://www.uuidgenerator.net/でオンラインで生成し、コピー＋ペーストする。
“playonclick” : true | false – ドキュメントを直接表示する場合
例 – JSON：
"useCases" : [
{
"name":"klick_dl_pdf",
"group":"01",
"animationlayer": 0,
"poi_uuid": "0f7fa12e-dd7c-11eb-ba80-0242ac130004",
"state":0,
"trigger_objects":["button_vorne_rechts"],
"cam":
{
"name": "Pdfcam",
"position": [0, 0, 0],
"rotation":[0, 0, 0],
"lookatTarget":"button_vorne_rechts"
},"documents":
[
{
"name":"01/Freund_Demovideo.mp4",
"type":"video",
"uuid":"ac848c20-e879-11eb-9a03-0242ac130003",
"playonclick":true
},{
"name":"01/Freunde_DemoPDF.pdf",
"type":"pdf",
"uuid":"1bd675a6-dd7c-11eb-ba80-0242ac130004"
},{
"name":"01/klardenker_Unternehmenspräsentation_DE.pdf",
"type":"pdf",
"uuid":"cb5473d6-e879-11eb-9a03-0242ac130003"
},{
"name":"01/netzwerken-web.jpg",
"type":"image",
"uuid":"fe743ad0-e879-11eb-9a03-0242ac130003"
},{
"name":"01/Showroom_Demo.mp4",
"type":"video",
"uuid":"139e7574-e87a-11eb-9a03-0242ac130003"
},{
"name":"01/Vorwort_DemoPDF.pdf",
"type":"pdf",
"uuid":"2ef28950-e87a-11eb-9a03-0242ac130003"
}
]
ドキュメント」からメディアを呼び出す-多言語にとって重要なこと
まず、目的のスペースに文書を作成する。 これは次のように行う：
目的のスペースに移動する。
My Computer -> Docsを選択する。
そして、例えば「stages」という自分のフォルダを作る。もちろん、ここでは自分の好みに合わせて自由に名前を決めることができる。
クリック／フォルダを開く。
次に「＋」で文書を作成する。
新しく作成されたドキュメントのフィールドを見つけ、「ブラウザー」でコンピューターから目的のファイルを検索し、アップロードする。 そして「保存」をクリックする。
他の言語でファイルを提供したい場合は、希望する他の言語を選択し、「ファイルブラウザ」から対応する言語で希望するファイルを選択する。 保存」をもう一度クリックすると、文書は新しく追加された言語で利用できるようになる。
次に、ドキュメントのUUIDをコピーする。 これはステージのjsonに挿入するために必要で、上記の他のケースと同様にそこで行われる。
このスクリプトは、UUIDが存在すれば、それに一致するデータベース・エントリーが存在するかどうかをチェックするように動作する。 この場合、文書が読み込まれ、表示される。 そうでない場合は、名前とパスが取得され、対応するファイルがロードされる。 つまり、既存のステージが撃ち抜かれることはない。
新しいステージの場合は、UUIDとタイプを入力すれば十分である。
Doc UUIDを介してファイルリンクされたjsonエントリーの例：
"useCases" : [
"name": "klick_dl_pdf_03",
"group": "03",
"state": 0,
"poi_uuid": "5cdbbbbc-e883-11eb-9a03-0242ac130003",
"documents": [
{
"name": "03/klardenker_Unternehmenspräsentation_DE.pdf",
"type": "pdf",
"uuid": "8107123e-e883-11eb-9a03-0242ac130003"
},
{
"name": "03/Meditation_DemoVideo.mp4",
"type": "video",
"uuid": "3e7da4a1-6122-483b-9749-2c11caa87fd4",
"playonclick": true
},
{
"name": "03/Sein1_DemoPDF.pdf",
"type": "pdf",
"uuid": "a4ad3ec0-e883-11eb-9a03-0242ac130003"
},
{
"name": "03/Sein2_DemoPDF.pdf",
"type": "pdf",
"uuid": "b2d9a1c8-e883-11eb-9a03-0242ac130003"
},
{
"name": "03/Seminar-web.jpg",
"type": "image",
"uuid": "c1f88a5c-e883-11eb-9a03-0242ac130003"
}
],
"animationlayer": 0,
"trigger_objects": [
"button_03"
]
},
]
スプライトシート（擬似アプリ）（ボタン用）
apngsで使われるスプライトシートは、“buttons“グループで定義される。
スプライトシートを含むpngファイルはサーバー上の「/files/stages/sprites」ディレクトリに保存される。 (もし個々のスプライトシートを使いたい場合は、klar.landのアカウント・マネージャーに提供してほしい。）
「buttonObjectName“は、シーン内の3Dオブジェクトの名前である。 名前には “button “という文字列が含まれていなければならない。 これにより、オブジェクトはボタンのように動作する。 つまり、常にカメラの方を向き、クリックするとボタンが消える。
「spritename“は”/files/stages/sprites “にあるpngファイルの名前である。
「tilesHoriz” : 水平タイルの数
「tilesVert” : 垂直タイルの数
「numTiles” : 通常は前の2つの値の積となる。 しかし例外的に、これは別の値になることもある（例えば、最後に空のタイルがある場合など）。
“tileDispDuration” : タイルを表示するミリ秒数。
「invisibleOnClick” : true または false、任意。 ボタンがクリック後に不可視になるかどうかを示す（=false）。 デフォルトはtrueである。
例 – JSON：
"Stage3dData" :[
{
"threedfile" : "01.glb",
"outlinelevel" : 0,
"lightsetup": 0,
"spritescale": 1,
"defaultqualitylevel": 0,
"scenetype": "3d",
"buttons":[
{
"buttonObjectName":"button_vorne_rechts",
"spritename":"floorbutton_spritesheet.png",
"tilesHoriz":25,
"tilesVert":1,
"numTiles":25,
"tileDispDuration":55,
"invisibleOnClick":"false"
}
],
トーンマッピング
トーンマッピング（ポストレンダー効果）により、ステージのルックを5つのモードから選択できる。
そのため、それぞれのステージに最適なルックを実現するために、Hdrと光量を組み合わせて何度かテストする必要があるかもしれない。
何も指定しない場合、デフォルトでTHREE.ACESFilmicToneMappingが使用される。
例 – JSON：
{
"Stage3dData": [
{
"tonemapping": 2,
....
トーンマッピングは、0、1、2、3、4、5のいずれかの値をとる。
0 = THREE.NoToneMapping
1 = THREE.LinearToneMapping
2 = THREE.ReinhardToneMapping
3 = THREE.CineonToneMapping
4 = THREE.ACESFilmicToneMapping
5 = THREE.CustomToneMapping
ビデオテクスチャー
ビデオテクスチャの場合は、ビデオテクスチャが表示される3Dオブジェクト（“videoObject“）のそれぞれの名前と、サーバー上のビデオファイル（“videoFile“）への相対パスが指定される。
ビデオは、各ステージのdocsフォルダのサーバーにアップロードされなければならない：/files/stages/[uuid]/docs
(データの保管はklar.landのアカウントマネージャーと調整する）。
例 – JSON：
"Stage3dData" :[
{
"threedfile" : "01.glb",
"outlinelevel" : 0,
"lightsetup": 100,
"spritescale": 1,
"defaultqualitylevel": 0,
"scenetype": "3d",
"videotextures":[
{
"videoObject":"_videoplane",
"videoFile":"01/Freund_Demovideo.mp4"
}
]
}
]
「controls」オプション
カメラのズームや距離、ステージのマウスボタン割り当てを設定する各種パラメータ。
例 – JSON：
{
"Stage3dData": [
{
"hdr": {
"name": "autoshop_01_1k.hdr",
"intensity": 2
},
"controls": {
"maxZoom": 5,
"minZoom": 1,
"zoomMode": 2,
"maxDistance": 5,
"minDistance": 1
},
{
"Stage3dData": [
{
"controls": {
"zoomMode": 3,
"leftMouseMode":5,
"middleMouseMode":1,
"rightMouseMode": 1,
},
......
「zoomMode “は1/2/3の値をとる。 これらの意味は次のとおりである。
1 = ドリー（標準）
2 = ズーム
3 = なし
すなわち、3はズームを解除する。
“leftMouseMode”、”middleMouseMode”、”rightMouseMode “は、それぞれ1/2/3/4/5/6の値を取ることができる。 これらの意味は次のとおりである。
1 = 回転
2 = トラック
3 = オフセット
4 = DOLLY
5 = ズーム
6 = なし
JSONコードに何も指定されていない場合、デフォルト値は以下のようになる。
ズームモード = ドリー
leftMouseMode = ROTATE
rightMouseMode = TRUCK
middleMouseMode = DOLLY
360°ステージ
(ドキュメントは後述する）
"spaces" : [ (werden nur in 360° Szenen verwendet)
{
"id" : [number] Stageid,
"name": [string] Stagename,
"ClickSpots":
[
{
"name":"Gehe in Flur",
"position": [8.67872, 15.1609, -12.1186],
"type":"spaceChangeSpot",
"gotoSpace": [number]
},{
"name":"Zeige Lampeninfo",
"position": [-15.4345, 6.06061, 0],
"type":"infoSpot"
}
]
},
コメントを残す