あなた自身のWebGL Physicsゲームを構築する

Sep 14, 2025

操作方法

このプロジェクトはさまざまな部分に分割されます。私たちはHerokuの概要を述べる、3.jsでPhysijsを使う方法を示して、Node.jsを介してソケットイベントを処理する方法を説明し、また送信されたデータの処理について説明します。

WebGLの驚くべき例

01.heroku.

Heroku is an easy to use and free to trial node.js web server — Herokuは使いやすく、トライアルのノード.js Webサーバーです。

このプロジェクトはオンにホストされます her her これはあなたのアプリをホストするクラウドプラットフォームです。 Ruby、Java、PHP、Pythonなどのさまざまなサポートされている言語があります。 Node.jsを使うつもりです。

アカウントにサインアップして、node.jsを選択します。このプロジェクトでは、無料の基本サーバーを使用できます。登録後は、アプリを作成できるダッシュボードに入ります。これにより、HerokuApp.comにサブドメインが作成されます。

展開方法として、Heroku Command Line Interface（CLI）を使用してそのGitリポジトリを使用してデプロイするか、githubまたはdropboxに設定することを選択できます。私はそのCLIと一緒に行くことを選んだ。これにはインストールが必要になります。しかし、それとともにあなたがさまざまな新たな役立つツールを手に入れる、これらのうちの1つはあなたの端末を通してライブデバッグです。

サーバーを設定するには、次の手順に従うことをお勧めしますここで説明したように。

デフォルトのGITコマンドを使用するには、展開します。使用するたびにビルドサーバーがトリガーされ、アプリはHerokuサーバーにデプロイされてからサブドメインで表示されます。

コードがデプロイされたら、[yourProject] .herokuapp.comでプロジェクトを表示できます。ログを表示するには、端末の 'Heroku logs - tail'コマンドを使用します。表示されているもののいくつかはクライアントにサービスを提供しているものです - ソケット接続が表示され、コードをデバッグしたい場合は、端末に出力するためにconsole.logを使用することもできます。

02.物理学のシーンを構築します

Tap your screen or hit the spacebar to bounce the table up — 画面をタップするか、スペースバーを押してテーブルを跳ね上がってください。

私たちは最も人気のあるものを使うでしょう webgl. フレームワーク、 three three 物理学を添付しているオブジェクトを含む3Dシーンを構築するには。選択の物理学図書館 phys phys 3.jsのプラグイン。 3.jsの拡張として、Physijsは同じコーディング条約を使用しており、あなたがすでに3.jsに精通しているならば使いやすくします。

最初のことはプールテーブルです。私たちはPhysijsを使っています HeightFiredMesh このメッシュは平面測位から高さを読み取るからです。そのため、基本的に3.jsオブジェクトの周囲に自分自身を折り返すことになります。

 VARテーブルgeometry = New Stree.planeGeometry（650,500,10,10）。
var ablematerial = Physijs.createMaterial（
  新しい3.meshphongmaterial（{
    Shininess：1、
    カラー：0xB00000、
    発光：0x111111
    側：3
  }）、
  .8、//摩擦
  .4 //復元
）;
table = new physijs.heightFieldMesh（テーブルgeometry、TableMaterial、0）;

そう HeightFiredMesh ジオメトリだけでなくPhysijs材料も必要です。 3.js素材に2つの新機能を追加しています。それらはです摩擦そして rest rest 変数摩擦は対象物が作る抵抗であり、そして反発は「バニシス」を指します。これら2つの変数は、物理学があなたのシーンの中でどのように感じるかを定義します。

作成されたプールボールの場合、それらを弾力的にしたくないので、数を安くしてください。 3.jsのように、Physijsはオリジナルのメッシュを中心にするための一連の基本的な形をしています。 スパレム 包む 球形測定 ボール物理学を与えます。シーンを初期化するとき、私たちは呼び出します ビルチボール（8） これは以下の機能を引き起こします...

 var buildball =関数（Numberball）{
 var balltexture = new 3.texture（）;
 Var Ballindex = Ballent.Length.

テクスチャを追加します。

 Balltexture = 3.imageutils.loadTexture（ 'Textures /' + Numberball + '_ball.jpg'、機能（イメージ）{
     balltexture.image =イメージ。
  }）;）

いくつかのまともな摩擦とバウンスのプロパティを持つPhysijs対応の素材を作成します。

var ballmaterial = Physijs.createMaterial（
    新しい3.MeshlambertMaterial（{
      地図：
      Shininess：10、
      色：0xddddddd、
      発光：0x111111
      サイド：3。フロントサイド
    }）、
    .6、//摩擦
    .5 //リターン
  ）;

テクスチャマッピング：

 BallMaterial.Map.Wraps = BallMateial.map.wrapt = 3.repeatrapping;
  BallMateial.map.repeat（1,1）;
 物理対応のSphereMeshを作成し、空中で起動します。

  ボール[BallIndex] =新しいPhysijs.Spheremesh（
    新しい3.Sphereometry（25,25,25）、
    ボール材料、
    100
  ）;
  // yキャンバスの上部にオフセットします
  ボール[BallinDex] .Position.y = 500;
  //影
  ボール[BallinDex] .receiveshadow = true;
  ボール[BallIndex] .castShadow = true;
  //あなたのキャンバスにボールを追加してください
  SCENE.ADD（ボール[BallinDex]）;
;;

.jpgファイルからテクスチャを追加しています。資料を作成し、それを使用してください スパレム オブジェクトを作成するには、上部に垂直方向に配置して画面に表示されます。

03.ソケット接続

The key goal of our game is emulating the physical movements to the screen — 私たちのゲームの主な目標は画面への物理的な動きをエミュレートしています

サーバーとクライアント間の通信のために、私たちは使用しますソケット。これはnode.jsで利用可能な最も信頼できるライブラリの1つです。それはWebSockets APIの上に構築されています。

今すぐ物理学がメッシュに有効になっていますユーザー入力が必要な場合は、ゲームをインタラクティブにする必要があります。使用している入力装置はモバイルデバイスです。モバイルブラウザはデータを提供するコントローラです。加速度計とジャイロスコープからあなたがゲームを見るとデスクトップに。

まず、モバイルブラウザとデスクトップブラウザの間の接続を行う必要があります。ブラウザがNode.jsアプリケーションと接続するたびに、新しい接続を行う必要があります。次のようにしてクライアント側の接続が設定されています。

 var socket = io.connect（）;

に使用するメッセージを送信するには em 関数：

 Socket.emit（ 'イベント名'、データ）;

そしてあなたが使用するのを受けてください 。オン（） 関数：

ソケット。（ 'イベント名'、function（）{}）;

03.1。デスクトップゲームを設定する

デスクトップにいる場合は、ソケットを送信します。デバイスを発信するデバイスの発信デスクトップは、次のコード行を使用してゲームです。

 var socket = io.connect（）;
//最初のウェルカムメッセージの場合、「ゲーム」デバイスタイプで返信
ソケット。（「ようこそ」、機能（データ）{
  socket.emit（ "device"、{"type"： "ゲーム"}）;
}）;

サーバーは私たちに一意のキー/ゲームコードを返します暗号によって生成されました。これはデスクトップに表示されます。

 //コードを生成します
var gamecode = crypto.randombytes（3）.toString（ 'hex'）。部分文字列（0,4）.tolowerCase（）;
//一意性を確保してください
間（ソケットコードのGameCode）{
  GameCode = crypto.randombytes（3）.toString（ 'hex'）。部分文字列（0,4）.tolowerCase（）;
}
//ゲームコード - ＆GTを保存する。ソケット協会
ソケットコード[GameCode] = io.sockets.sockets [socket.id];
Socket.gameCode = GameCode

ゲームクライアントに初期化してユーザーにゲームコードを表示します。

 Socket.Emit（ "Initialize"、Gamecode）;

03.2。コントローラをゲームに接続します

モバイルデバイスをゲームに接続するには、デスクトップ画面からゲームコードを送信するためのフォームを使用します。送信元の送信は、認証のためにサーバーにゲームコードを送ります。

 Socket.emit（ "device"、{"type"： "controller"、 "Gamecode"：Gamecode}）;

サーバーはゲームコードが有効であるかどうかを確認し、デスクトップゲームとの接続を設定します

（SocketCodeのDevice.gameCode）{
  //コントローラコマンドのゲームコードを保存します
  socket.gamecode = device.gameCode.
  //コントローラを初期化します
  socket.emit（ "connected"、{}）;
  // ゲームを始める
  SocketCodes [Device.gameCode] .emit（ "connected"、{}）;

接続がすべて設定されたら、次のコマンドでxとzから8ボールに小さなプッシュを与えます。

ボール .SetLineArvelocity（New Three.Vector3（30,0,30））;

04.データの送信

接続が確立されたので、ジャイロと加速度計の変数をゲームに送信したいと考えています。を使用することによって window.ondeviceMotion. そしてその Window.OndeviceOrientation イベント、私たちは私達が私達が私達の電話の同じ傾斜動きをプールテーブルにエミュレートするために必要なデータを持っています。これらの値を発するために100msの間隔を使用することを選択しました。

setInterval（function（）{
  socket.emit（ 'send gyro'、math.round（roty）、math.round.round.round.round.round.round.round.round.round.rote、ay、ax]）。
インターバル時間）;

クライアント側では、着信値をサーバーからプールテーブルの傾きにトゥイーンすることによって待ち時間を解決します。 Tweeningのために使います Tweenmax 。

 //入ってくるジャイロデータを処理します
Socket.on（「新しいジャイロ」、機能（データ）{
  VAR DEGY =データ <<; 0？ math.abs（データ）：-Data ;
  TweenMax.to（Table.rotation、0.3、{
    X：Degtorad（ディーギー -  90）、
    Y：Degtorad（データ）、
    簡単：linear.asenone、
    onupdate：function（）{
        テーブル.__ DIRTYRotation = TRUE。
    }
  }）;）
}）;

05.追加のイベント

More balls equals more fun. Try hitting the spacebar or tapping the screen of your mobile — より多くのボールがもっと楽しいです。スペースバーを押すか、携帯電話の画面をタップしてみてください

もう少し対話性を与えるために、ユーザーがプレイするための追加のイベントをいくつか追加しました。キーボードの番号を使用して、8ボールの横にある追加のボールを追加するオプションをユーザーに提供します。

もう1つはテーブルを上に跳ね返すことです。このためにスペースバーを押すことができます。ただし、コントローラデバイスにTAPイベントも追加しています。これにより、イベントがプールテーブルに送信され、テーブルが上がり、ボールを送信します。

最初に私達はキーボードイベントを捕まえる必要があります...

 //スペースバーにボール/スラムテーブルを作成する
Document.AdDeventListener（ 'Keydown'、Function（e）{
  （e.KeyCode == 49）{//キー：1
    ビルチボール（1）;
  そうでなければ（e.keycode == 50）{//キー：1
    ビルチボール（2）;
  そうでなければ（e.keycode == 51）{//キー：1
    ビルチボール（3）;
  そうでなければ（e.keycode == 32）{// key：spacebar
    bouncetable（）;
  }
}）;

the ビルドボール 関数は、球体8ボールを作成するために使用したのと同じ機能です。球を包む異なるテクスチャを使用しています。テーブルを押すために、このコードでy軸に沿ってテーブルに上向きの動きを与えます...

 table.SetLineArvelocity（New Three.Vector3（0,500,0））;

結論

Add more balls and see how much your browser can handle — ボールを追加して、ブラウザがどのくらいのものを処理できるかを確認します

あなたがゲームの概念や何か他のものがあるとき、それはあなたの人生をより簡単にすることができるライブラリがそこにあるライブラリがある可能性が完全にあります。これは、これがどのように機能できるかを示すデモです。これがいくつかの創造的なアイデアやあなたの現在のプロジェクトであなたを助けるのに役立つことを願っています。ゲームのライブ例を参照してくださいここに、またはそれを見つけること g g 。

この記事はもともと発行300に発行されました ネット 、プロのWebデザイナーと開発者向けの世界トップマガジン。 問題300を購入する または ここで購読する 。

関連記事：

3.jsを使用してWebGLを使い始める
あなたの心を爆破するための20 JavaScriptツール
3.jsでインタラクティブな3Dビジュアルを作成します

あなた自身のWebGL Physicsゲームを構築する

01.heroku.

02.物理学のシーンを構築します

03.ソケット接続

03.1。デスクトップゲームを設定する

03.2。コントローラをゲームに接続します

04.データの送信

05.追加のイベント

結論

操作方法 - 最も人気のある記事

トリッキーなデザインの簡潔な簡単なことを解決する方法

Artrage 5で表現力豊かな肖像画のアートをペイントする

ラインアートを使用して居心地の良いインテリアを作成する

5分以内に人をスキャンする方法

CSS表示プロパティを理解する

あなたのスケッチスキルを磨く

古いマスターのような肖像画を描く

現実的な折り目と折りたたみで3D服を作成する

カテゴリ