トポロジーとグラフを3 D六面体に描画

突然、いくつかの異なる知識点を同じインタフェースに置いて、箱に入れることができれば、私は何かを見て直接表示することができて、この箱は必ず開くことができます.私はHTで私の考えを実現しました.コードは100行以上あります.このような少ないコードがこのような効果を実現できるのは牛だと思います.
まず効果図を見てみましょう.この例の最も基礎的なのは最外層の箱です.だから、まずそれを実現する方法を見てみましょう.

var box = new ht.CSGBox();
dataModel.add(box);

HTでこの箱を簡単に実現でき、HTには多くの基礎シンボルタイプがパッケージされており、私たちがよく使うht.Nodeもそのうちの1つであり,同じコードを繰り返し書くことなく基礎的な実装を完了することができる.
この例で用いるパッケージ化されたベースシンボルはhtである.CSGBox、1つの箱の模型、HT for Webモデリングのマニュアルを参考することができて、私达はマニュアルの中で见ることができて、CSGBoxの中で私达はこの箱の各方面を操作することしかできなくて、もしあなたが自分でいくつかの特殊な机能を设置したいならば、htを操作するだけです.Style(HT for Webスタイルマニュアル)でいいです.
箱の上の1つの面にマップを追加するには、HTパッケージのhtしか考えられません.Default.setImage関数です.
箱に模型化されたポンプがあり、扇の葉が回転してgraphViewを呼び出していることに気づいたと思います.deserialize(json)は、jsonファイルを可視化した2 dモデルにエクスポートし、animationアニメーションを設定し、すぐにこのポンプにリフレッシュします.そうしないと、アニメーションが設定されていても、ポンプのファンの回転は有効になりません.

ht.Default.xhrLoad('displays/demo/pump.json', function(text){
    const json = ht.Default.parse(text);
    pumpDM.deserialize(json);
    var currentRotation = 0;
    var lastTime = new Date().getTime();

    setInterval(function(){
        var time = new Date().getTime();
        var deltaTime = time - lastTime;
        currentRotation += deltaTime * Math.PI / 180 * 0.3;
        lastTime = time;

        pumpDM.getDataByTag('fan1').setRotation(currentRotation);
        pumpDM.getDataByTag('fan2').setRotation(currentRotation);
        box.iv();
        // g3d.iv();       g3d，        
        pumpGV.validateImpl();
    }, 10);
}, 10);

この時、ポンプのgraphViewとg 3 dを底層divに追加することはできません.そして、ポンプのgraphViewをg 3 dのCSGBoxの一面に追加することを意図しています.だから、ポンプが表示されるようにポンプがあるgraphViewの幅を設定しなければなりません.この幅は私のjsonが描いた図より面積が大きくなければなりません.そうしないと、表示が不完全になります.この幅の高さが表示に与える影響を見たいなら、自分で変えて遊びましょう.

pumpGV.getWidth = function() { return 600;}
pumpGV.getHeight = function(){ return 600;}
pumpGV.getCanvas().dynamic = true; //          canvas      

ここでは特に、取得識別番号であるgetDataByTag(tagName)という関数について説明するが、HTではtag属性が一意の識別であり、HTにもidがあるが、idはHTではDataタイプオブジェクトが構築する際に内部に自動的に付与されるid属性であり、data.getId()とdata.setId(id)の取得と設定は、DataオブジェクトがDataModelに追加する後、id値の変更は許可されず、dataModelを介して行うことができる.getDataById(id)データオブジェクトをすばやく検索します.
一般にid属性はHTによって自動的に割り当てることを提案し、ユーザーのビジネス意義の唯一の表示はtag属性に存在することができ、dataを通じて.setTag(tag)関数は、dataModelを介して任意の動的にtag値を変更することを可能にする.getDataByTag(tag)は、対応するDataオブジェクトを検索し、dataModelを介してサポートする.removeDataByTag(tag)Dataオブジェクトを削除します.
コードの中で私たちは「fan 1」というtagの標識に言及していないかもしれませんが、この標識はポンプのjsonで設定されています.扇葉の標識について、扇葉を取得し、回転を設定します.
echartsグラフの表示も基本ですが、graphViewにechartsグラフを追加するとアニメーション効果が表示されないことがわかります.まず、このechartsグラフが存在するグラフのdynamicをtrueに設定し、動的に設定します.

function charts(option){
    var info = {
        canvas: document.createElement('canvas')
    };
    info.canvas.dynamic = true; //    info.canvas    
    info.chart = echarts.init(info.canvas);
    info.chart.setOption(option);
    return info.canvas;
}

最後に、この2つの返信のcanvasをhtに転送するだけです.Default.setImageで次の操作を行います.

ht.Default.setImage('echart', charts(option));
ht.Default.setImage('pump', pumpGV.getCanvas());

ht.Default.drawImage関数が新しい図を生成するのは実際にcanvasに図を描くので、私たちが描いたcanvasをhtに伝えます.Default.setImageで画像を生成できます.