AI生成したテクスチャ付きObjファイルのビューワ

ドラッグで回転、ホイールでズーム。

PC -

Smartphone

DESCRIPTION

今回はテクスチャのついたOBJファイルをロードするビューワをAIに生成してもらいました。

３Dデータは、プロンプトから３Dモデルを生成するMeshy（)を使用して作りました。月々一定数まで無料で生成できます。

画像付きOBJファイルは、MTLファイルと画像であるJPGファイルとで構成されます。

スクリプトからはOBJファイルと、MTLファイル両方のパスを設定しておく必要があります。

HOW TO MAKE/PROMPT

ChatGPTを使って作成。そのままだとThree.jsのパスを間違うので、指定した方がよい。プロンプトは以下。

テクスチャ付きのOBJファイルビューワをHTMLで作成

#仕様
- html,js,css in 1 file
- 400x400 canvas上に表示, max-width:100%
- Three.jsを使用以下ライブラリをロード
https://unpkg.com/three@0.147.0/build/three.min.js
https://unpkg.com/three@0.147.0/examples/js/controls/OrbitControls.js
https://unpkg.com/three@0.147.0/examples/js/loaders/OBJLoader.js
https://unpkg.com/three@0.147.0/examples/js/loaders/MTLLoader.js

#変数
filepath="../ai/dat/b-police.obj", OBJ fileのパス
mtlpath="../ai/dat/model.mtl", MTL fileのパス

ゲームが生成できない?

<< menu

On-site search