Vue.jsを使ったモデルビュワーサイトを作る

PlayCanvasでVue.jsを使って3Dモデルビュワーサイトを作るハンズオン

このハンズオンはJavaScriptのライブラリ「PlayCanvas」と「Vue.js」を使用したハンズオンです。

3Dコンテンツを使ったWebサイトを作りたい人必見！

今回は、アパレル系のWebサイトでよく見るような、3Dモデルビュワー的なWebページをPlayCanvasを使って作ります。
Vue.jsを使いますが、Vue.jsがわからない人でも理解できるような内容になっていますので、ぜひご参加ください。

作成するプロジェクトについて

以下のURLからハンズオンで作れるサンプルが確認できます。
https://playcanv.as/p/xIj6iJ4S/

今まで3Dのコンテンツを使用するためにWebGLを使ってcanvasタグに出力し表示することが通常の動きでした。
しかし、そこまで学ぶにはWebGLへの理解、Three.jsなどのライブラリの使い方を学ぶコストがありました。
それをGUIのエディター画面から3Dコンテンツを作成でき、かつ、htmlなどを操作することで3Dのwebサイトを作成できる。

・プログラミング未経験や初心者の方
・JavaScriptを触ったことはあるけどPlayCanvasは知らない
・PlayCanvasのスキルを深めたい
など、幅広く参加できる内容となっています。

コードを書くのが苦手な人でも、3Dコンテンツを作成するコストが大幅にカットできてしまう、
そんなPlayCanvasを使った簡単なwebサイトを作成しながら解説します。

PlayCanvasとは？

PlayCanvasはオープンソースのゲームエンジンで、
HTMLとWebGLを使ってブラウザゲームや3Dのコンテンツを作ることのできるJavaScriptのライブラリです。
豊富な機能を揃えた3Dエンジンとクラウドホスティングされた開発環境およびツールセットを備えています。

PlayCanvas | 日本公式サイト
https://playcanvas.jp/

参加対象者

• JavaScriptを触ったことがある程度
• PlayCanvasに興味のある人(PlayCanvas Editorの基本操作ができれば尚良い)
• 一つ上のWeb表現を追求したい人
• 3Dモデルのポートフォリオを作りたい人
• 学生・教育機関関係も大歓迎

----- ↓以下ができる人も大歓迎です↓ -----

• webサイトを作ったことがある人
• 3Dモデルや3DCADなど3DコンテンツをWebで使いたい方
• PlayCanvasってなんだ？という人

事前準備

あらかじめPlayCanvasへの登録を済ましておいてください。
無料でアカウントを作成ができますので、以下のサイトから登録をお願いいたします。

• PlayCanvasのアカウント (https://playcanvas.jp/)
• ブラウザ(Google Chrome / Firefox)

参加方法について

ハンズオンにつきましてはYouTubeのPlayCanvas運営事務局チャンネルでストリーミング配信を予定しております。
connpassの方で参加登録をして頂いた方には、当日の配信チャンネルのURLが公開されます。
かつ、配信URLをメールでも事前にご連絡させていただきます。

またYouTubeチャンネルを登録し通知をONにすることで見逃すことはなくなります。
PlayCanvas運営事務局 YouTubeチャンネル

タイムスケジュール

オンライン配信日: 2021年 12月 10日 17:00 ~ 18:00 (進行具合で前後する恐れがあります)

※タイムスケジュールは進行具合で時間が前後する可能性がありますことをご了承ください。

PlayCanvas運営事務局について

PlayCanvasは、ブラウザ向けに作られたWebGL/HTML5ゲームエンジンです。
PlayCanvas運営事務局は日本国内でのPlayCanvasの普及を目的に活動しています