序文
都市の拡大に伴い、従来の方法は、完全に都市の全体像を表示することは困難であるが、3D技術の応用で、3D都市集積の方法の出現は、動的かつインタラクティブに街の絵を提示します。市の管理者は、よりタイムリーな交通状況、市の火災、電源管理および他の態様の動作を理解することができますので、インテリジェントな都市システム、Web経由で視覚的な方法で、取引をします。
ウェブ製品の軽量HTML5 / WebGLのモデリングプログラムは、そのようなAutodeskのRevitのか、ベントレー、これをできるだけ頻繁にBIM（ビルディングインフォメーションモデリングビルディングインフォメーションモデリング）ソフトウェアを使用して、セキュリティ/インテリジェンスの公園を構築/ /ビルディングオートメーションを構築する伝統的な知恵のためのHTを使用してこのデモクラスの建設およびエンジニアリングソフトウェアが、BIMモデルをモデル化し、これらのデータは、多くの場合、あまりにも、あまり重要制御の建物の細部のほとんどを肥大化しますが、私たちが使用して、業界の動向にドラッグしたり、WebのWeb SCADA構成監視に影響を与えていますランタイムの運用・保守の3D可視化の良好な結果にしてもブラウザに迅速なモデリング、軽量な携帯電話を実現するためのWeb製品の軽量HTML5 / WebGLのモデリングプログラム用のHTのHightopo。
プレビュー：
コードの実装
3Dシーンをロード
3Dシーンを作成し、ページに追加。
constのG3D =新しいht.graph3d.Graph3dView（）; CONST dm3d = g3d.dm（）。 G3dkaddtodon（）;
addToDOM機能のデフォルトのシーンは、本体にロードされ、窓を充填することができます。
次の都市シーンデシリアライゼーションJSON、および透視デシリアライゼーションコールバック関数、中心位置、スカイボックス内のシーンを設定し、各プリミティブ情報へのアクセス、startAnim関数を呼び出します。
g3d.deserialize（ 'シーン/ ny.json'、（）=> {
g3d.setEye（[1132.8386351821287、1916.836416970022、1479.5345608290288]）。
g3d.setCenter（[519.9741236104874、273.4741921410557、-319.58669041297884]）。
g3d.setSkyBox（dm3d.getDataByTag（ 'スカイボックス'））;
//プリミティブの拡散効果を取得
scaleList.push（
dm3d.getDataByTag（ 'scaleBlue'）、
dm3d.getDataByTag（ 'scaleRed'）
）;
···
//アニメーションを開始
startAnim（）;
}）;
アニメーション達成
都市のシーンをロードした後以下に示します。
私たちは、道路、青、黄色の水の波及効果で火災の流路、浮上してダウンして、ロゴや人工衛星を回転させる効果の影響をシーンを見ることができます。
アニメーションを実現するにはまず見て、ht.Default.startAnimによって達成されています。
ht.Default.startAnim（{
//アニメーションフレーム
フレーム：12、
ミリ秒のアニメーションフレームの数//
間隔：10、
ht.Default.animEasingにデフォルト//アニメーションのイージング関数
緩和：機能（T）{戻りT * T。}、
//呼び出しに機能するとき、アニメーションの終わり
finishFunc：関数（）{はconsole.log（ '完了！'）}、
//アクション機能は、プロパティがアニメーションプロセスを変更達成するために提供されなければなりません
アクション：機能（V、T）{
//位置P2はP1アニメーションにこの例が示す位置からノードのノードを
node.setPosition（
p1.x +（p2.x - p1.x）* V、
p1.y +（p2.y - p1.y）* V
）;
}
}）;
上記アニメーションフレームベースモード、アニメーションフレームの数を指定することによって、このユーザ制御のアニメーションフレーム、及び間隔パラメーター間隔アニメーションフレームです。
HTアニメーションは、マニュアルを参照することができます：
以下は、様々な効果を達成順番に導入しました。
1.波及効果
プレビュー：
コード：
関数waveScale（OBJ、DLT、MAX、MIN）{
obj.forEach（ノード=> {
//拡散半径増加
せ、S = node.getScaleX（）+ DLT。
//最大時間より拡散半径より大きな最小値にリセットされます
IF（S> = MAX）S =分。
//ズーム値のX、Y、Z方向を設定します
node.setScale3d（S、S、S）。
}）;
}
機能startAnim（）{
ht.Default.startAnim（{
フレーム：インフィニティ、
間隔：20、
アクション：（）=> {
//赤と青の増殖と普及
waveScale（scaleList、dltScale、MaxScaleの、minScale）。
}
}）;
}
2. Rotateエフェクト
プレビュー：
コード：
関数rotateAction（OBJ、DLT）{
//ラジアンではなく、ゼロに原始的な回転を取得します。
聞かせて回転= obj.getRotation（）|| 0;
フレームが増加あたり//ラジアン
obj.setRotation（回転+ DLT）。
}
機能startAnim（）{
ht.Default.startAnim（{
フレーム：インフィニティ、
間隔：20、
アクション：（）=> {
//サテライト回転
rotateAction（スター、dltRoattion）。
}
}）;
}
3.フロー効果
プレビュー：
効果は非常に一般的な効果あるフロー、プロセスは比較的単純な実装、UVマップを動的に変更する唯一のオフセット値です。本実施形態においては、六面U方向マッピングモデルは流れの影響複数の実装の動的な実施形態を増加または減少させることにより
関数uvFlow（OBJ、DLT）{
//流れの効果を達成するために、UVテクスチャ座標を変更
オフセット= obj.s（ 'all.uv.offset'）を聞かせて|| [0,0]。
obj.s（ 'all.uv.offset'、[オフセット[0] + DLT、オフセット[1]）。
}
機能startAnim（）{
ht.Default.startAnim（{
フレーム：インフィニティ、
間隔：20、
アクション：（）=> {
//パスフロー効果
uvFlow（roadSmall、dltRoadSmall）。
}
}）;
}
4.フロート効果
プレビュー：
コード：
関数blockFloat（OBJ、DIS、DLT）{
obj.forEach（ノード=> {
node.a容易開始=（「開始」）。
（startE == null）の場合
// yの上の値要素を取得（高さ）方向
node.a（ 'START'、開始= node.getElevation（））。
聞かせてフロート= node.a（ 'フロート'）|| 0;
方向として//セット状態
聞かせて、ステータス= node.a（ 'ステータス'）|| 1;
node.setElevation（* +ヘイズフロートを開始）。
IF（フロート> 1 ||フロート<0）
//は、方向転換、しきい値を超えています
node.a（ 'ステータス'、ステータス= -status）。
フロート+ = DLT *状態。
//リセットプリミティブの高さ
node.a（ 'フロート'、フロート）;
}）;
}
機能startAnim（）{
ht.Default.startAnim（{
フレーム：インフィニティ、
間隔：20、
アクション：（）=> {
//火災の兆候浮遊効果
blockFloat（fireFloatList、fireFloadDis、fireFloatDlt）
}
}）;
}
このように、基本的な効果が達成されます。
3D番組のHT都市集積は、最終的に良い結果だけではなく、また、いつでもどこでも、彼らはリアルタイムの監視情報を取得することができ、市内マネージャを可能にする優れたモバイル体験を、持っている大画面で持つことができ、ここで2を入れてみんなのために、携帯端末のブラウザでの経験のプレビュー：
HTは、産業インターネット2D 3Dビジュアライゼーションアプリケーションの例数百人が含まれ、遊びを体験するためにここにクリックしてください：