このエントリーをはてなブックマークに追加

Jul

28

Vue.jsをPlayCanvasの中で使って3DビュワーなWebページをつくろう

PlayCanvasでVueを使って3Dモデルビュワーサイトを作る

Organizing : PlayCanvas運営事務局

Hashtag :#playcanvasnow
Registration info

配信参加枠

Free

Attendees
17

参加者への情報
(参加者と発表者のみに公開されます)

Description

PlayCanvasでVueを使って3Dモデルビュワーサイトを作る

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


今回は、アパレル系の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への登録を済ましておいてください
無料でアカウントを作成ができますので、以下のサイトから登録をお願いいたします。

参加方法について

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

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

タイムスケジュール

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

時間 内容
11:00 配信開始
11:00 - 11:10 オープニング
11:10 - 12:30 ハンズオン

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

PlayCanvas運営事務局について

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

Presenter

Media View all Media

If you add event media, up to 3 items will be shown here.

Feed

PlayCanvas運営事務局

PlayCanvas運営事務局 published Vue.jsをPlayCanvasの中で使って3DビュワーなWebページをつくろう.

07/21/2021 13:51

Vue.jsをPlayCanvasの中で使って3DビュワーなWebページをつくろう を公開しました!

Ended

2021/07/28(Wed)

11:00
12:30

Registration Period
2021/07/21(Wed) 00:00 〜
2021/07/28(Wed) 12:30

Location

オンライン配信

オンライン

オンライン配信

Attendees(17)

kmdqcom

kmdqcom

Vue.jsをPlayCanvasの中で使って3DビュワーなWebページをつくろうに参加を申し込みました!

1977otashiro

1977otashiro

Vue.jsをPlayCanvasの中で使って3DビュワーなWebページをつくろう に参加を申し込みました!

yokoom

yokoom

Vue.jsをPlayCanvasの中で使って3DビュワーなWebページをつくろう に参加を申し込みました!

yukiyama9999913

yukiyama9999913

Vue.jsをPlayCanvasの中で使って3DビュワーなWebページをつくろう に参加を申し込みました!

i.mizuno

i.mizuno

Vue.jsをPlayCanvasの中で使って3DビュワーなWebページをつくろう に参加を申し込みました!

わたさん

わたさん

Vue.jsをPlayCanvasの中で使って3DビュワーなWebページをつくろうに参加を申し込みました!

ktakashi

ktakashi

Vue.jsをPlayCanvasの中で使って3DビュワーなWebページをつくろうに参加を申し込みました!

kazu228

kazu228

Vue.jsをPlayCanvasの中で使って3DビュワーなWebページをつくろうに参加を申し込みました!

akshimo

akshimo

Vue.jsをPlayCanvasの中で使って3DビュワーなWebページをつくろう に参加を申し込みました!

maromaro00113

maromaro00113

Vue.jsをPlayCanvasの中で使って3DビュワーなWebページをつくろう に参加を申し込みました!

Attendees (17)

Canceled (1)