H5 の WebGL を使用して 3D 仮想コンピュータ ルームにローミング アニメーションを実装する方法

今回は、H5のWebGLを使って3D仮想計算機室のローミングアニメーションを実現する方法と、H5のWebGLを使って3D仮想計算機室のローミングアニメーションを実現するための注意点を紹介します。実際のケースを見てみましょう。 3D での一人称視点の使用は、シューティング ゲームにおける一人称視点の使用を指します。一人称シューティング ゲーム (FPS) は、一人称視点に基づいたビデオ ゲームの一種であり、銃やその他の武器を中心に展開します。 ; つまり、プレイヤーは主人公の目を通してアクションを体験します。このジャンルの誕生以来、高度な 3D および擬似 3D グラフィックスがハードウェア開発に挑戦しており、マルチプレイヤー ゲームは不可欠なものとなっています。

現在、博物館や企業がプロモーションビデオなどを制作するために3Dアニメーションを使用することが多くなっています。3Dアニメーション解釈の最大の利点は、内容と形式の面で人々にリアルな感覚を与えることです。グラフィック作品よりも直感的で、2Dアニメーションよりもリアルなため、視聴者に広告環境にいるかのような臨場感を与えることができ、広告の説得力を大幅に高めます。 3D テクノロジーの発展は、観客の識別能力にさえ挑戦しており、観客の判断が仮想と現実の間で漂流する原因となっています。

さらに、3D 特殊効果の適用は、創造性のためのより広い思考スペースを提供し、創造性の実行の信頼できる保証となり、創造性の形式とスタイルを豊かにします。広告テーマのパフォーマンス魅力に応じて、夢のような魔法のような雰囲気を作り出し、視聴者を刺激し、感動させることができ、それによって視聴者とコミュニケーションするという目的を達成できます。

3D アニメーション プロモーション ビデオは、ポストプロダクション合成、吹き替え、ナレーションを通じて 3D アニメーション、特殊効果ショット、企業ビデオ、写真、将来展望などのコンテンツを組み合わせて、直感的で鮮やかで人気のあるハイグレードな企業広告ビデオを形成し、人々に社会のさまざまなレベルで、人々はその会社に対して肯定的で肯定的で良い印象を持ち、それによって会社に対する好意と信頼が確立され、会社の製品やサービスを信頼します。

現在の 3D の急速な発展も、人類の「リアリティ」の追求のおかげであり、3D を学び、使いこなすことは将来の成功に不可欠な部分です。

この記事の例のアイデアは、訪問のためにコンピューター室に入ることであり、ドアを開けるアクションは、適切なターンと組み合わせることで、基本的にコンピューター室を訪問する人の影響を完全にシミュレートします。 。もう 1 つの利点は、操作せずに上司にデモンストレーションしたい場合、上司はこのクールな効果に非常に満足することです。

インターフェイスの「リセット」ボタンと「スタート」ボタンは本体に直接追加されたボタンであり、クリック イベントはこれら 2 つのボタンに追加されます:

<div></div><div></div>

シーン全体は HT カプセル化された 3D コンポーネントによって構築され、非常に大きなシーンにはある程度のコードが必要なので、シーンを個別に取り出し、HT でカプセル化された ht.JSONSerializer クラスを使用して、生成された json ファイルのみをコードに導入しました。誰にとってもわかりやすいので、3D シーンが構築されていると仮定して、ここで例を示します。

dm = new ht.DataModel();g3d = new ht.graph3d.Graph3dView(dm);//.......构建好场景dm.serialize();//可以填入number参数，作为空格缩进值

環境をセットアップして JSON ファイルに変換したので、この場合、コードを制御するのは困難です。その後、DataModel データ

モデル

がデシリアライズされ、この 関数 の機能は、json 形式をオブジェクトに変換し、デシリアライズされたオブジェクトを DataModel データ モデルに渡すことです。詳細については、「HT for Web」を参照してください。シリアル化マニュアル:

var g3d = window.g3d = new ht.graph3d.Graph3dView(),   
dataModel = g3d.dm(),   
view = g3d.getView(),   
path = null;g3d.setMovableFunc(function(data) {    return false;});
g3d.setVisibleFunc(function(data) {   
if (data.getName() === "path") {      
 return false;   
}   
return true;});
g3d.setEye([523, 5600, 8165]);g3d.setFar(60000);dataModel.deserialize(json);

現在、シーン内の「ドア」とこれから進むルート「パス」を操作し、DataModel データ モデルをトラバースして、これら 2 つのデータを取得する必要があります:

for (var i = 0; i < dataModel.size(); i++) {   
var data = dataModel.getDatas().get(i);  
 if (data.getName() === "门")
{//json中设置的名称      
window.door = data;   
}   
if (data.getName() === "path")
{       
path = data;   
}   
if (window.door && path)
{//获取到door 和 path 的data之后就跳出循环       
break;  
 }}

この例では、原点に戻る「リセット」、「動作開始」、「前進」、「停止」の4つの動作だけです。 「開始」ボタンをクリックします。「開始アクション」では、「ドアを開ける」アクションのみを実行します。アクションが終了したら、「forward」関数を呼び出して次に進みます。ここに「リセット」があります。「原点に戻る」関数です。この関数を使用して、「ドア」の位置を含むすべての変更を元の位置に復元します。

function startAnim() {
    
if (window.isAnimationRunning)
{       
return;  
 }   
reset();   
window.isAnimationRunning = true;//动画是否正在进行    ht.Default.startAnim({      
 frames: 30, // 动画帧数，默认采用`ht.Default.animFrames`。       
interval: 20, // 动画帧间隔，默认采用`ht.Default.animInterval`。          
finishFunc: function() {// 动画结束后调用的函数。           
forward();       
},        
action: function(t){ // action函数必须提供，实现动画过程中的属性变化。           
door.setRotationY(-120 * Math.PI / 180 * t);       
}   
});
}

「移動」するには、必ず「パス」が必要です。これは先ほど取得したものです 「パス」に、window.points = path.getPoints()._as を通じて「パス」内のすべての要素を取得します。 window.forwardIndex = 0; の 2 つの点を制御して 3D シーンを設定します。 「パス」の目と中心の前後で、これにより、私たちが一人称であるかのような効果を作成できます

function reset()
{   
if (window.isAnimationRunning)
{       
return;   
}   
g3d.setCenter([0,0,0]);   
g3d.setEye([523, 5600, 8165]);    window.forwardIndex = 0;  
 door.setRotationY(0);}

HT の 3D コンポーネントには、walk(step, anim, firstpersonMode) メソッドがあり、目と中心の位置を変更します。同時に、つまり目と中心 2 点によって確立されるベクトルの方向に同じオフセットを同時に移動します。 step はオフセット ベクトルの長さの値です。 firstPersonMode パラメーターが空の場合、Graph3dView#isFirstPersonMode() の現在の値がデフォルトで使用されます。ウォーク操作が一人称モードで呼び出された場合、この関数は Graph3dView#getBoundaries() の境界制限を考慮します。

g3d.walk(distance, {   
frames: 50,   
interval: 30,   
easing: function(t) {return t; },   
finishFunc: function() {       
forwardIndex += 1;       
if (points.length - 2 > forwardIndex) {//points.length = 5            g3d.setCenter([point2.x, 1600, point2.y]);//把结束点变成起始点           
g3d.rotate(Math.PI / 2, 0, {              
 frames: 30,             
  interval: 30,              
 easing: function(t) {return t;},                finishFunc:function() { forward();}          
 });     
  }
else
{           
var lastPoint = points[points.length  - 1];//json 中path的points 的最后一个点          
 g3d.setCenter([lastPoint.x, 1400, lastPoint.y]);           
g3d.rotate(-Math.PI / 2, 0,
{              
 frames: 30,              
 interval: 30,              
 finishFunc: function()
{                   
window.isAnimationRunning = false;              
 }          
 });      
 }   
}});

不管“path”的点有多少个，这个判断语句还是能运作，只在最后一个点是跳出 finishFunc 动画结束后调用的函数，并将 window.isAnimationRunning 值设为 false 停止 startAnim 函数。如果不是最后一个点，用户“旋转”之后，回调 forward 函数。至此，全部代码解释完毕，很短的代码量，却做出了这么大的工程！

相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

相关阅读：

手机端怎样用rem+scss做适配

canvas如何实现github404动态

以上がH5 の WebGL を使用して 3D 仮想コンピュータ ルームにローミング アニメーションを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。