Tupu HT ユーザーの多くはこの機体のデモを見たことがあると思いますが、Tupu の過去 10 年間の開発の中で、このデモは HT を学ぶ多くのユーザーが必ず参照する古典的なデモの 1 つです。
このデモでは、簡潔なコードを使用して、OBJ モデルの読み込み、データ バインディング、アニメーション、ローミング、その他の機能の実装を鮮やかにデモンストレーションします。多くのユーザーは、この簡単なデモを参照した後、よりクールな効果を備えたさらに多くの機能を実装しています。このデモは、Tupu HT 開発を使用する多くのユーザーにガイダンスを提供すると言えます。
Tupu HT テクノロジーの継続的な更新と反復により、元のシーンはシンプルすぎるように見え、モデルは十分に洗練されておらず、機能もシンプルすぎるように見えます。上記の問題を解決するために、Tupu の 10 周年を機に、より精巧で複雑なモデルやシーン、さらに多様な機能を表示するアップグレード バージョンの Aircraft Demo Pro をリリースしました。
FBXとOBJ
古いバージョンの航空機デモでは、インターネット上の既製の OBJ モデルが使用されていましたが、モデルの効果は粗く、マテリアルの効果がなく、比較的硬いものでした。プロペラとインジケーター ライトのアニメーションでは、OBJ モデルを解析し、データ バインディングを実行してデータ変更を推進し、アニメーション効果を実現する必要があります。
現在、Tupu HT は FBX モデルをサポートしており、Aircraft Demo Pro の航空機モデルはこの形式を採用しています。このシーンは Tupu の優れた 3D デザイナーによって注意深くモデリングされており、絶妙で美しい効果を表現しています。FBX モデルはマテリアル構成をサポートしています。モデリング ソフトウェアでモデルのマテリアル チャネルを保持するだけでよく、Tupu HT でマテリアル エフェクトをカスタマイズして、より現実的なモデル レンダリング エフェクトを実現できます。さらに、FBX モデルは、OBJ モデルと比較して、より小さいファイルを使用して、より眩しい効果を実現できます。
Tupu HT は FBX モデル アニメーションの再生をサポートしているため、Aircraft Demo Pro では航空機のプロペラ アニメーションを作成するコードを記述する必要はありません。デザイナーはアニメーションを作成した後、plane.getAnimationNames() を使用してアニメーション名のリストを取得し、plane.playAnimation(animationName,speed,start,loop) メソッドを使用してアニメーションを再生できます。同時に、plane.pauseAnimation() と plan.resumeAnimation() を使用して、現在再生中のアニメーションの開始と停止を制御することもできます。飛行アニメーションの統合制御を容易にするために、航空機デモ プロは飛行アニメーションのアクションで plant.forwardAnimation(1 / 60) を使用して、毎回 1 / 60 秒ずつプロペラ アニメーションを前方に制御して、アニメーションの再生効果を実現します。 。
ローミング
旧バージョンのデモの航空機ローミング機能は最大のハイライトであり、Tupu プロジェクトでローミング効果を実現する主な方法でもあります。Airplane Demo Pro では、Tupu は古いバージョンの実装に基づいており、より豊富なエフェクトが追加されています。
ローミング効果の実装は、次の 3 つの主な手順に分けることができます。
- ローミング パスを決定する: ローミングは、物体または人が地点 A から地点 B に移動する必要があるプロセスとして理解できます。出発前にどちらに進むかを決定する必要があるため、ローミングする前にローミング パスを決定する必要があります。 。ローミング パスは不規則なグラフィックスを使用して描画できます。通常、ローミング パスは ht.Polyline を使用して描画されます。ht.Polyline を使用してパスを描画する利点は、パイプのポイントが異なる高さの設定をサポートすることです。デモでは、ユーザーは青いボールを上下にドラッグしてパイプ ポイントの高さを制御でき、それによってローミング効果がより豊かになります。
- ローミング オブジェクトを決定する: ローミング オブジェクトは、シーン内の任意のノード、またはシーンのカメラと中心点にすることができます。このデモのローミング ノードは飛行機です。
- ローミング アニメーションの実装: アニメーション効果は、一定期間内の属性の変更を制御することによって実現されます。HT には、アニメーションを実装するための ht.Default.startAnim(params) アニメーション関数が用意されています。ローミング アニメーションによって増加または減少する必要がある属性は、ノードの位置と回転角度であり、これらのデータはパイプラインを使用して取得できます。g3d.getLineLength(path) はパイプラインの長さを取得し、g3d.getLineOffset(path, lineLength * v) はパイプラインのパーセンテージのオフセットを取得し、平面の位置を設定します。plane.p3(offset.point.x, offset. point.y, offset.point. z) を設定し、plane.lookAt([offset.point.x + offset.tangent.x, offset.point.y + offset.tangent.y, offset.point. z + offset.tangent.z]、' フロント')。
オブジェクト ローミング効果の原理に従って、シーン ローミングは、取得したパイプライン情報をシーンの Eye プロパティと Center プロパティに設定します。Airplane Demo Pro では、g3d.flyTo(plane,{ distance: distance}) を使用してオブジェクト上にシーンの視点を配置し、航空機の周囲を追跡するローミング効果を実現するアラウンド ローミングも追加しました。
ローミング効果音
Airplane Demo Pro のローミング プロセス中に、右下隅にある効果音コントロール ボタンをクリックして航空機の飛行効果音を再生し、シーンをより鮮やかで興味深いものにすることができます。さらに、飛行機が青いボールに到達するたびに到着効果音が再生され、デモのインタラクティブ性がさらに高まります。
上記の効果を実現するには、アニメーション操作中にコントロール ボールと航空機ノードのバウンディング ボックスが交差するかどうかを判断する必要があります。交差した場合、到着効果音が再生されます。ノードの交差を判断するには、最初にノードの境界ボックスを取得できます。 box = g3d.getBoundingBox(node)、次にノードの 3 次元の境界ボックスを取得します。 box3 = new ht.Math.Box3(new ht.Math.Vector3(box.min), new ht. Math.Vector3(box.max))、最後に 2 つのノード境界ボックスが box3 .intersectsBox(other_box3) と交差するかどうかを判断します。
素材切り替え
OBJ モデルは 1 つのマテリアルまたはテクスチャでしか構成できないため、使用中にモデル スタイルを切り替える必要がある場合は、通常、スイッチを使用してノードのshape3d アトリビュートを直接切り替えることができます。OBJ モデルと比較して、FBX モデルは複数のマテリアルを同時に構成できるため、モデルのマテリアル効果がよりカラフルになります。Aircraft Demo Pro の航空機モデルは FBX モデルを使用します。右上隅のプロパティ パネルで BodyColor を切り替えて、航空機のマテリアル プロパティを制御できます。plane.s('matDef',{'マテリアル名':'材料'}）。
モデルのmatDef属性を直接切り替えるほか、登録されている材質情報を直接変更してスタイルを切り替えることもできます。たとえば、航空機 Demo Pro の表示灯は ht.Default.getmaterial('signalCircleColor') メソッドを使用して、登録されている signalCircleColor マテリアル情報を取得し、オブジェクトの対応する属性値 signalCircleColor.diffuse = color を直接変更します。マテリアルのプロパティを変更した後、plane.iv() を使用してノードを更新する必要があります。このソリューションを使用する場合は、更新をトリガーした後、同じマテリアルを使用する他のノードもマテリアル スタイルを変更することに注意してください。したがって、ノードを 1 つだけ使用する場合、またはシーン スタイルをバッチで変更する必要がある場合は、マテリアル情報を直接変更することをお勧めします。
シーンの美化
旧バージョンの飛行機のデモシーンは、背景色と退屈な離陸床しかありませんでした。航空機のシーン Demo Pro は、空のボール、グロー、ヘッドライト、環境光、その他の多様な属性などのより豊かなシーンを提供し、コードと連携して水面マテリアルの uvOffset 属性変更を駆動して UV オフセットを実行します。きらめく水面を再現し、ゆっくりと流れるダイナミックな演出を実現しました。旧バージョンと比較して、Aircraft Demo Pro のインテリア デザインはより精巧で均整が取れており、ユーザーが HT を学習するプロセスをより鮮やかで興味深いものにしています。
過去 10 年間、テクノロジーの継続的な発展に伴い、Tupu Software は継続的に新製品を導入し、自社開発製品を更新および反復してきました。当初は OBJ モデルの読み込みのみでマテリアル効果の表示ができなかった状況から、FBX、GLTF、GLB モデルのサポートが追加され、マテリアル設定などの機能もサポートされています。より優れた製品とサービスをユーザーに提供するために。
今後もユーザーのニーズと期待に応え、より精緻なケースとより強力な技術を提供してまいります。
Tupu ソフトウェア HT for Web は、Web ブラウザーで高性能のインタラクティブ 3D ビジュアライゼーション ソリューションを作成および表示できるため、ユーザーは 3D モデルを作成、編集、レンダリング、エクスポートでき、さまざまな産業用インターネット分野に適しています。HT は HTML5 の最新 Web テクノロジーを使用しており、プラグインや追加のソフトウェアをインストールしなくても、さまざまな Web ブラウザーで実行できます。また、複雑な 3D ビジュアライゼーションやデジタル ツイン アプリケーションのニーズを満たす、モデルの読み込み、マテリアル編集、アニメーション制作、ライティング レンダリング、衝突検出などの豊富な機能とツールも提供します。