序文
知恵の建物や生活の質を改善するために、人々の生活、インテリジェントビルは大幅に人々を向上させる、インターネット業界の現在のコンテキストで多くの注目を集めて。現時点では、視覚的な監視を構築するための知恵の主な利点は次のとおりです。
- 知恵 - 知恵は人のように、知覚、判断力や自制心を持って、エコシステムを構築しています。
- グリーン - グリーンビルはグリーンビルディングのセキュリティ監視を実現するために、グリーンエネルギー、容量およびエネルギー管理で達成しました。
- 持続可能な開発の要件に基づいて、近代的な建物、商業ビルが50年以上実行する必要があり、運転中に莫大なエネルギー消費を構築し、運用コストを削減削減する方法を、低炭素で健康の建設、環境に優しい状態 - 制御可能な運用コスト実行します。
このようAutodeskのRevitのかなど、建築、工学などのソフトウェアベントレーが、これらのデータモデリングBIMモデルとして、多くの場合、BIM（ビルディングインフォメーションモデリングビルディングインフォメーションモデリング）ソフトウェアを使用して、従来の知恵ビル/ビルディングオートメーション/ビルセキュリティ/インテリジェンス公園は、多くの場合、大きすぎます肥大化し、あまり重要制御の建物の細部のほとんどが、業界の足かせに影響 ウェブSCADA や ウェブコンフィギュレータの動向の監視を、私たちが慣れ Hightopo の ウェブのためのHT 達成するために、製品の軽量HTML5 / WebGLのモデリングプログラムラピッドプロトタイピング、さらに軽量な携帯電話のブラウザにランタイムの運用・保守の3Dビジュアライゼーション良い結果に。
インテリジェントビルのモデリング、アニメーション効果によって示されるこの記事では、ページを達成するために、ページのメインファンクションポイントは、私たちが使用する方法を理解するのに役立つ HTを ビルディングオートメーション、建物の知恵を理解するために、単純な視覚的な監視を構築するの知恵を実現するだけでなく、私たちを助けるために利点。
プレビュー住所：オートメーションのHTML5 WebGLの3D視覚的なモニタリングの構築に基づいて http://www.hightopo.com/demo/ht-smart-building/
インタフェースはじめとプレビュー効果
によって提示された応答携帯端末、コンピュータ端末を達成するための自動レイアウトの機構を介してインターフェース、2Dインタフェースとの統合2Dから3Dシーン3Dシーンを達成するために、画面最大に重ねられた2D図面。
インターフェイスの効果が初期化
インターフェースアニメーションの初期化プロセスのリアルタイムレンダリングは、接地経路を備え、拡張床、スキャン床、床アラームダイナミック波、リアルタイム監視データ変更のフロアパネル等グロー。
界面効果のモニタリング
監視インタフェースは、次のとおりです。
- リアルタイム建物に入るために人員を監視し、パネルは、建物へのダイナミックエントリと建物の現在のヘッド番号及びその他の情報をリアルタイムで更新します。
- リアルタイム監視の建物のエレベータの動作は、システムは、エレベータの現在の操作位置を実行し、他の情報で示しています。
- コンクリートの床を構築することは、現在の床具体的な情報の大きさを示すヒストグラムの形で、リアルタイムの監視データを監視します。
- すべてのパイプラインのインテリジェントビルの現在の動作を示す、パイプラインを構築するリアルタイム監視。
インテリジェントビルのモデリング
3Dシーンの全てのモデルは、それはで、建物のシーンの床に、例えば、より軽量なシーンではるかに少ないOBJのインポート三角形になることにより、3Dマックスモデルと比較することにより、6面体のセグメントとボディビルドされている HTを。形状 描画するクラスを、そのような床が記録されている 点は、 情報とポイント セグメント の ht.List セグメントアレイ型情報、セグメントを 伝えるために使用される接続点を表す、 ht.Shapeの 二卑を描画するポイントを使用して情報をソウル又は直線がWeb用のHTを参照して、関連する曲線又はキュービックベジエ曲線指定情報[形状マニュアル]は、次の単一の図面は、スクリーンショットです。
他の層の完了が同じモデルされた後、図の構築物は、モデルの上位層を介して知ることができるが、y軸の異なる値は、プロファイルは、以下の重畳層を構築することによって形成することができます。あなたは公園の知恵を構築する必要がある場合は、建物や他のシーンの知恵は、あなたが完全にBIMモデリングモデルを使用することを検討して削減するHTML5 / WebGLのモデリングプログラムに基づいてこれを使用することができます。シーン導管と地図上のバックグラウンド経路を形成した後点鎖線であるが、修飾された線の太さの色によって、またはマッピングによってスタイル線又は平面を変更するには、黄色単純六面体の色のシーンエレベータ、リフト線もシーンモデルは、ユーザーエクスペリエンスを向上させ、よりスムーズに3Dシーンランのレンダリング、軽量モデル化されているので、それのラインです。
主要シーンのアニメーションコード解析
1.地図ルートアニメーションコード解析
上記によりインテリジェントビルモデリング分析、我々は、接続線が生成されるポイントとの間で行われていることがわかり、そうすることができ、我々は、すべての点についての情報を得ることができますパスをマッピングし終えたときに、直線であれば AB マップについてセグメント、我々はポイントことを知っている A と点 B 点の座標は、次に我々は計算することができる ABに ライン上の任意の点 Cの 位置座標を、その後、接続を介して 点 Cが ドットを形成するために ABの 同方向のライン位置が、サイズ比 AB まで短い線分は、 交流 ラインはの長さに等しい AB さらに次の擬似コードのように、アニメーションパス描画されるラインの長さの後にキーを示しています。
1つの// currentIndex電流経路は、インデックスポイントに描画され
た描画処理情報の中点に電流パス情報currentPointsに全ての点を2つの//ポイントを
現在のパス接続情報currentSegmentsの3つの//セグメント描画処理の全ての点接続ポイント情報
。4
5 //点情報、すなわちケース上記
6せfromPoint点= [currentIndex];。
。7 //すなわち、この時刻情報に点B上記
8せtoPoint点= [currentIndex + 1];
9 //によって方向ベクトルからなるAB AB二つの情報
（ - fromPoint.x、toPoint.y - toPoint.x fromPoint.y）10 =せpointVector新しい新しいht.Math.Vector2、
ベクターの11 //レコード長を決定するため。以上AC AB場合
12せpointVectorLength pointVector.length =（）であり、
13は
、14のlet currentPoints = []、currentSegments = []
15
{（; Iは+ currentIndex 1 <I ++はI = 0 LET。）16
17 currentPoints.push。 （{
18 X：ポイント[I] .X、
19 Y：点[i]は.Y
20}）;
21 currentSegments.push（セグメント[I]）。
22}
上記のコードによって、我々は情報currentPointsとのcurrentSegmentsを得ることを知っている、とすることができ、それらはfromPoint（点）とtoPoint（B点）の接続点、すなわち、点C、臨界擬似計算点C上の座標を計算する必要が後コード：
1 //各追加の線分の長さの値についてaddLength、すなわち、プログラム500は、各500の長さ増加させるために使用される
addLength LET nextVectorLength = currentVectorLength、2 +
3 tempPointし;
4
。5 roadData.currentVectorLength = nextVectorLength;
6
。7 // AC線解析長さがABよりも大きい場合
8 IF（nextVectorLength> pointVectorLength）。{
9 nextVectorLength pointVectorLength =;
10 roadData.currentVectorLength = 0;
11 = currentIndex roadData.currentIndex + 1;
12である}
13である
14 pointVector.setLength（nextVectorLength）;
15
16 //すなわち点Cの座標
17 tempPoint = {X：pointVector.x + fromPoint.x、Y：pointVector.y + fromPoint.y};。
18 C //はcurrentPointsに座標を追加で
。19 currentPoints.push（tempPoint）。
@ 20 CがcurrentSegmentsポイント接続に追加され、このプログラムは、直線状に接続され、2の値
21（2）currentSegments.pushであり;
22 ht.Shapeクラスをリセット// roadNodeあるクラスht.Shape点があります情報
; 23 roadNode.setPoints（currentPoints）で
24 //リセットポイント接続情報クラスht.Shape
25 roadNode.setSegments（currentSegments）。
以下のフローチャートは、アニメーション・コードを実行します
以下は、線を描画するために、アニメーションのスクリーンショットです：
プログラムベクター連続的に計算得るため のC 点の座標は、もちろん、計算する他の方法で使用すること Cは 座標点。
2.波アニメーションコード解析および走査
走査波アニメーションによるものである HT 連続的に制御される矩形枠編集アイコン情報APIを提供波スキャンを生成し、アニメーション化する矩形方法をスケジュールすることによって、アイコンのサイズを変更し、スケジュール特定参照するのウェブの使用のためにHTできます[スケジューリングハンドブック]、次のキーアニメーション波擬似コード：
1 // waterWaveNodesは、すべてのノードを振る
2 = {waterWaveTaskを聞かせ
3間隔：100、//アクションが機能手段100ms毎呼び出す
。4アクション：機能（データ）{
。データを分析する5 // waterWaveNodesを
6 IF（waterWaveNodes.indexOf。 （データ）> -1）{
7 //長さ4の配列がX、Y、幅、高さで表されている矩形枠情報circleRectアイコンケースを取得します。
8せcircleRect =（ 'circleRect'）data.a;
9
10 IF （circleRect）{
11 //波高変更することによって、より大きなサイズへ。
12れるnextHeight circleRectは=せ+ 10 [3]と、
13が
最大高さに14 // 250
15 IF（nextHeight <250）{
修飾に対応する16 // Yサイズは、Yの大きさは半分の高さで増加します
17 circleRect [1] = [1] circleRect - 5。
18 circleRect [3] = nextHeight。
19 data.a（ 'circleRect'、circleRect）。
20 data.a（ 'BORDERCOLOR'、 'RGBA（255、133、133、' +（1 - circleRect [3] / 250）+ '）'）。
21}
そうでなければ22 {
23 data.a（ 'circleRect'、[-0.5,128,257,0]）。
24 data.a（ 'BORDERCOLOR'、 'RGBA（255、133、133）'）。
25}
26
27}
他の28 {
29 data.a（ 'circleRect'、[-0.5,128,257,0]）。
30}
31
33}
34}。
35 dm3d。
以下のスクリーンショットでは、2Dの波を示しています。
デジタルアニメーションコードの変更3.分析
プログラムは、両方の図動的変化を見ることができるスクリーンショットから、この部分は、動的バインディング2Dおよび3Dパネルシナリオにおけるデータ値の大きさを変更することによって、参照は、Web用のHTの結合に関するデータであってもよいデータバインディング[手動設定] Iは、乱数をデジタルパネル2Dを変更するために、次の変更をするたびに発生した後、対応するノードに結合するために、乱数を発生させる、連続値の大きさを変更するスケジューリングであり、プログラムコードパッケージ擬似コード：
ノード番号に対応するパネル2dの1 // numNode（1-7）
2 // data.a（「ht.value」、数）が自動的に更新された新たな描画した後、動的変更ht.valueのATTRの情報であります割り当てられた値
3 // getRandomValue独自パッケージの乱数を発生させる方法
4 = {this.change2dNumTask。
5間隔：1000、
6処置：（データ）=> {
7（データ=== ===データnumNode1 IF || numNode2）{
8 data.a（ 'ht.value'、util.getRandomValue（[500、999] ,. 5））;。
。9}
10（データnumNode3 || === ===データnumNode4）{IF
11データ。 S（ 'テキスト'、util.getRandomValue（[0、30]、2）+ '％'）;
12}である
13は、IF（===データnumNode5）{で
14 data.a（ 'ht.value'、util.getRandomValue （[0、99999]、5、3））。
15}
16 IF（データ=== numNode6）{
17 data.a（ 'ht.value'、util.getRandomValue（[0、100]、2））。
18}
19 IF（データ=== numNode7）{
20 data.a（ 'ht.value'、util.getRandomValue（[0、100]、2））。
21}
22}
23}。
24 dm2d.addScheduleTask（this.change2dNumTask）。//新增该调度任务
上記のコードでは、値がプログラムでパネル部2dを非表示にすることも、変動値のプロパティの値によって動的に変更され、スタイルオブジェクトattrノードの変更、もちろんさを知ることができ、スケジュールタスクを実行する必要がある時点で、removeScheduleTaskを呼び出すことができます方法は、このスケジュールされたタスクを削除します。
4.高さヒストグラムアニメーションコード解析
柱状体は3Dシーンにおいて六面体であるが、勾配マップに囲まれ、そして構築地図情報と色立体の上面は六面体のそれぞれの高度を有し、HT によって ）node.getTall（ 得ること名前の場合は、列がヒストグラムを表示したときに六面体の高さの電流値は、データバインディングの話すによると、我々はすべてのノードの大きさのループ高さの値を得ることができ トールを通過した後、 背の高い、（「背の高い」node.a ） ヒストグラムに対する現在のノードの値格納 ATTRの 上記オブジェクトを、柱状体の初期の高さを動的に高さの値がより大きい高さを、変更するときに、連続的な値を修正することができる （「背の高い」node.a）を 、現在初期化柱状体ことを示しています高さが完了しました。関連するため、以下の擬似コード：
Charts.forEach。1（（図表）=> {
、chart.getTall（））;! // ATTR上に格納された高さ2 chart.a（ 'トール'）&& chart.a（ '背の高い'
。3 chart.setTall（ 0）; // 0の初期の高さを設定
4}）;
5 this.chartAnimteTask = {
6インターバル：25は、
図7処置：機能（データ）{
8 IF（charts.indexOf（データ）> -1）{
9（IF ！finishNum == ChartLength）{
IF 10（data.getTall（）== data.a（ 'トール'））{！
11 data.getTall nextTall =（）+ディープせ; //ディープ高さごとに増加
12トール= data.a（「背の高い」をしましょう ）; //は、 高さを求める初期化
13には高//初期設定よりも大きい高さを判断する
（nextTall <トール）場合は{14
Data.setTall 15（nextTall）;
16}
17他{
18（トール）data.setTallである
。19 finishNum ++;
20}がある
21れる}
22}であり、
23}である
24}
25};
26 dm3d.addScheduleTask（this.chartAnimteTask）であり; //新しいですスケジューリングタスクを増やします
アニメーションの各ステップを知ることができる上記のコードを実行することにより、スケジューリングによって行われ、以前にいくつかの実装同様のアニメーション。
コード分析に5 3Dズーム
3Dシーンは、HT APIの変更により提供される視野を押し戻す 眼 と 中心 絶えず視点を変更するの目的を達成するためsetEyeとsetCenter方法において、人間の眼の眼の類似の位置、ヒト類似センターを呼び出すことによって、達成する数値法の目がレンズの実現のために、次の擬似コードキーを進め、フォーカス位置：
1 E = ht.Default.clone（g3d.getEye（LET ））、// 目の現在位置を取得する
2 C = ht.Default.clone（g3d.getCenterを（） ）; //は、 眼の現在位置が集中する取得
3 / /目には目の値に対応する変更される
。4 //中心の対応する中央値を変更する必要があるよう
であった5以下XYZ眼と中心との間の差を取得//三の軸
6 LET EDX =アイ[0] - E [0]、
7 EDZ =アイ。[1] - [1] E、
8エディ=アイ[2] - E [2]
。9 CDX =センター[0] - C [0]、
10 CDZ =センター[1 ] - C [1]、
11 [2] =中心CDY - C [2];
12 //オンになり、中心目が連続アニメーション変化
ht.Default.startAnim（{13は
14時間：？時間時間：3000、
15緩和その：関数（T）T {リターン;}、
16 finishFunc：関数（）{
IF 17（typeof演算=== CB '関数'）{
18はCB（である）;
19}
20}
21が処置：関数（V）{
22は0-1 // V換算の値である
23がg3d.setEye（ある[
24 E [0] * V + EDX、
25のE * V + EDZ、[1]
26はEである[2]エディ* V +
27]）;
28 g3d.setCenter（[
29 C [0] * V + CDX、
30 C [1] * V + CDZ、
31 C [2] * V CDY +である
32]）;
33}である
} 34れます）。
上記のコードによって、あなたは目の中心を変更すると、それぞれ、それぞれの視点の変化を達成するために、対応するXYZ軸電流E cに対応することにより、XYZの値との間の距離を知ることができます。
コードのスクリーンショットのための次のアプリケーション：
概要
物事の各種情報センシング装置、リアルタイムのコレクションを監視する必要はありません、接続、情報は、オブジェクトなどのプロセス、インターネットと連動して形成された巨大なネットワークと対話する必要があります。これは、識別、管理および制御を容易にするために、物体、人間のネットワークに接続され、すべての項目で達成されました。物事の側面は私達の知恵の建物を持参するように、視覚的な監視は、物事は、制御システムを構築する簡単な知恵を達成するための機器、情報、およびその他の情報パイプラインを監視し、人事のアクセスのためのシステムの多くがありますされている監視する必要があるかもしれませんクライアント拡張し、任意の商品やアイテムへの拡大は、私たちはより良い資産の可視性は、直感的な私たちを与え、知恵キャンパス監視後知恵公園の建物、設備およびその他のビジュアルシーンを理解することができます。シーン反射電界効果の深さは、HTコアパッケージの効果はまた、HTコアAPIパッケージによって構築されているすべてのモデルとアニメーションを提供モデリング、アニメーションドリブンので、展示が大幅ページ、に非常に滑らかで提供されユーザーエクスペリエンスを改善し、パフォーマンスが携帯端末では非常に友好的です。
以下では、携帯端末ランのスクリーンショットです：
プログラムの実行ショット：
