初めまして

大阪市立デザイン教育研究所の学生だった田中です。
このウェブサイトでは、ARの作り方から、blenderの紹介動画、blenderの操作方法をまとめています。

ARの作り方

まずは、動画の方を確認してみてください

どうだったでしょうか?
少々スピード感がありすぎて理解し難い事になってたかも知れません
動画の最後の方でHTMLなどを利用したARの方法もあると書いていましたが、この動画に出てくるやり方は全てWebARという括りになっており、HTMLで作るARは外部サービスがやってくれている事を自分で全て行うというシンプルにめんどくさいやり方なので、あまりお勧めできなかった訳です。ちなみにWebARの他にも自分でARのアプリケーションを作る方法もありますが難易度が高いので、今回はWebARの紹介となりました。

もしHTMLを自分で作る場合、動画でも出ていた通り「modelviewer」をおすすめします。

<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.0.1/model-viewer.min.js">/script>

このテキストをHTMLのheadタグ内に挿入するとmodelviewerを使えます。
そして用意したモデル(glb,gltf,usdz)をファイル内に入れておきます。

<model-viewer src="〇〇.glb" ios-src="〇〇.usdz" ar camera-controls touch-action="pan-y"></model-viewer>

このテキストをARを表示したいタグ内に挿入し〇〇の部分にそれぞれのモデルデータ名に打ち変えるとARのモデルが表示されるはずです。

あとはCSSで形を整えたら、WebARが完成すると思います。
WebARのやり方の動画が、あまりなく海外のユーザーがやっている動画が当時多かったので、分かりやすい動画っていうのはないかと思います。
HTMLを自分で試してみて色々模索してみてください
念の為「modelviewer」のサイトを載せているので、確認してみてください

海外ユーザーのmodelviewer動画

Blenderの紹介動画

まず動画の方を確認してみてください

作っていて思いましたが、blenderを紹介しているというより、blenderを使ったデ研での活動の紹介に近い動画になっています

Blenderの操作方法

いかがでしたでしょうか、正直な所私はCGの専門ではないので細かい所までは説明できず、基本的なショートカットや機能だけの紹介となっています。
さらに細かい所まで行くと、モデルの表示形式やワイヤーフレームの状態で確認しやすくする事、シェーダーエディターなど質感の表現の幅の広さなど、紹介し出すとキリがありません
なので今回は基本的な機能だけの紹介となっております。まずは触ってみて、楽しかったら自分でさらに色々な事を調べてみると面白いと思います。

ちなみに3DのARを作ろうと思ったら、最低でもCGの知識は必要になってくるので、blenderなどをやる必要があります。
blenderの他にMaya、cinema4D、などCGソフトは数多くあるので、自分に合うソフトを探してみるのもいいかも知れません(基本的な知識はどのソフトにも共通するのでそれぞれの操作方法に慣れる方が大変だと思います)

念の為、私だけの説明では不十分の可能性しか無いので、参考になりそうな動画を載せておきます。

topに戻る