Help us understand the problem. What is going on with this article?

PlayCanvas入門- モデルの作成~ゲームに入れ込むまで

はじめに

3Dゲームを作りたいけれどなんもわからんという人向けの記事になります。私、自身も全く3Dエンジニアではないので、モデルを作ったり、マテリアルがよくわかっておりませんでしたが3Dのキャラクターを動かしたかったのでその時に得た知見を共有します。

環境

  • Blender
  • PlayCanvas
  • Google Chrome

3Dモデルを作る

3Dモデルの作成なのですが、いきなりBlenderで作るとなるとハードルが高かったのと、マテリアルが入っているのが良かっため今回はVOXCEL CANVASで3Dモデルを作りました。

ギャラリーからボーンの入りそうなモデルVOXCELを選択して

このボタンから VOXCELの編集画面に入ります。

編集する

VOXCELCANVAS EDITOR上で少しだけ厚みを付けたりしました。

ダウンロードする

編集が終わったらdownloadボタンを選択してダウンロードをします。

解凍する

ZIPで落とされたファイルを解凍するとobjファイル、matファイル,pngファイルが入っています。
ダウンロードされたファイルの説明としては
- OJBファイル
3Dモデル
- matファイル
マテリアル
- png
テクスチャ
がそれぞれ入っています。

width="500" align="center" />

ボーンを作成する

3Dモデルの作成にはBlenderを使用します。

Blenderを起動すると最初に四角の箱があると思うのですがこれはXキーで消します。

次にVOXCEL CANVASで作成したオブジェクトをimportする

importされるとこのように表示されていると思います。

このままだと白いのでこの状態で表示されているモデルを右クリックをして、左下をmaterialにします。

今度は黒くなったと思うのでLampの位置を動かして調整をします。

ボーンの作成を入れる

ボーンはこのサイトを参考してボーンをいれます

ボーンかんたんBlender講座

ボーンとモデルを紐づけるときに、エラーが出た場合にはこのサイトを参考になりました。

【Blender】ボーンヒートウエイトのエラーが出たときに試す5つの解決策

エクスポート

ボーンを設定することができました。このモデルをexportをFBXとしてexportをします。

ゲームとして動かす

ゲームとして動かすのにはPlayCanvasを使用します。
PlayCanvasの登録ができたら新規のプロジェクトからプロジェクトの作成をします。

モデルをインポートする

3DモデルのインポートにはPlayCanvasのASSETSの中に先ほどexport‘したモデルデータをドラッグアンドドロップします。インポートできる形式はobjfbxがともにインポートできるので、最初のボーンを入れていないモデルもインポートすることができます。

モデルをインポートすることができたらドラッグアンドドロップでゲームの中にゲームのシーンの中に入れます。

モデルの大きさによってはカメラの位置的に表示されないため左横のバーからimportをしたモデルを選択し、fキーを押してカメラの位置を調整します。
sentaku

3D空間に作ったモデルを入れることができました!🎉🎉

今回はモデルに対して回転を加えたいため新たにrotate.jsというスクリプトを追加します。

rotate.jsの編集をし、下記のスクリプトを追加します。

//rotate.js
const rotate = pc.createScript('rotate');

rotate.prototype.initialize = function() {

};

rotate.prototype.update = function(dt) {
    const {x,y,z}= this.entity.rotate

    this.entity.rotateLocal(0,0.8,0)
};

これでLaunchボタンを押します。

これで動きを確認できました。🎉🎉🎉

公開する

PlayCanvasで作成したスクリプトを作成したプログラムにURLを付与して公開することができます。

こちらのURLをTwitterなどに投稿すると共有する事ができます。

ちょっと宣伝です

Twitterカードが簡単に作れるジェネレーターを作ったので、こちらでシェアをしていただくとかんたんに、遊べるツイートをすることができます。

Twitterカードジェネレーター

yushimatenjin
インターネットに無限の可能性を感じています。
https://twitter.com/Mxcn3
playcanvas
"PlayCanvasは、ブラウザ向けに作られたWebGL/HTML5ゲームエンジンです。PlayCanvas運営事務局は日本国内でのPlayCanvasの普及を目的に活動しています"
https://playcanvas.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした