HTML 5 WebGLに基づいてjson工制御ファン羽根車回転を実現

突然、いくつかの異なる知識点を同じインタフェースに置いて、箱に入れることができれば、私は何かを見て直接表示することができて、この箱は必ず開くことができます.私はHTで私の考えを実現しました.コードは100行以上あります.このような少ないコードがこのような効果を実現できるのは牛だと思います.
demoアドレス:http://www.hightopo.com/demo/...
まず効果図を見てみましょう.

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

HTでこの箱を簡単に実現でき、HTには多くの基礎シンボルタイプがパッケージされており、私たちがよく使うht.Nodeもその一つであり、同じコードを繰り返し書くことなく基礎の実現を完成することができます.
この例で使用するパッケージ化された基礎要素はht.CSGBoxで、ボックスモデルであり、HT for Webモデリングマニュアルを参照することができます.CSGBoxではこのボックスの各面しか操作できません.自分で特殊な機能を設定したい場合は、ht.Style(HT for Webスタイルマニュアル)を操作するだけでいいです.
ボックスの1つの面にマップを追加するには、HTパッケージのht.Default.setImage関数しか考えられません.
箱の上に模型化されたポンプがあり、上に扇の葉が回転していることに気づいたと思いますが、このポンプはどのように生成されたのでしょうか.2 dエディタでポンプモデルをgraphView.serialization(datamodel)でjson形式のファイルにシーケンス化し、ここで参照するときに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)関数によって任意の動的にtag値を変更することができ、dataModel.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;
}

最後に、ht.Default.setImageに2つの返信canvasを転送するだけです.

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

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