機能改善 イベント資料の投稿において、SlideShareやSpeakerDeckと同様に、Docswellの資料を埋め込みスライド表示できるように対応いたしました。資料の投稿機能は、資料URLを指定するだけで、URLから取得した情報を、適した形でconnpass上で表示・共有できる機能です

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

Jan

14

【ハンズオン】Vue.jsをPlayCanvasの中で使って3DモデルビュワーなWebページを作る

Organizing : PlayCanvas運営事務局

Hashtag :#playcanvasnow
Registration info

参加枠1

Free

FCFS
16/20

Description

会場が変更いたします!!

東京都渋谷区桜丘町26-1 セルリアンタワー11F

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

東京都渋谷区道玄坂1丁目2番3号 渋谷フクラス 15F
※渋谷フクラス 8Fが受付になります

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

WebGL/HTML5ゲームエンジンであるPlayCanvasを使ったwebサイトを制作します。

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

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


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

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


ハンズオンにつきまして、あらかじめPlayCanvasへの登録を済ましておいてください
無料でアカウントを作成ができますので、以下のサイトから登録をお願いいたします。
https://playcanvas.jp/

対象者・持ち物・費用

対象者

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

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

  • webサイトを作ったことがある人
  • マークアップやコーディング、フロントエンドの経験がある人
  • web業界にいたことがある人

持ち物

  • PC・スマートフォン
    ※PCのご用意はございません。参加される方はご自身のPCをお持ちください
    ※PCにはあらかじめ"Google Chrome"か"mozilla Firefox"のインストールをお願いいたします
  • 名刺
    ※名刺をお持ちでない場合は、受付時にお名前など必要事項の記載をお願いいたします。

費用

  • 参加費: 無料

会場

東京都渋谷区桜丘町26-1 セルリアンタワー11F
時間により受付時間が異なります

19:10~19:30 の受付は こちら

19:30~19:45 の受付は こちら

会場が変更になります

東京都渋谷区道玄坂1丁目2番3号 渋谷フクラス 15F

受付時間 : 19:10~19:45
受付場所 : 渋谷フクラス8Fのセキュリティゲート前

入館方法についてはこちら

注意:上記の受付の説明にはゲストカード申請にゲストカード発行機を使用していますが、
ゲストカードの発行機は使用せず、PlayCanvasのスタッフが待機している受付でゲストカードを受け取ってください。

エントランスの受付場所にお越しになりましたら、受付をしているPlayCanvasのスタッフへお声掛けください。
受付は19:45までとさせていただきます。時間を過ぎるとご参加いただけませんのでご注意ください。

間に合わないなど遅刻する可能性がある場合には、
当イベントページのコメントにてご連絡いただくようお願いいたします。

タイムスケジュール

時間 内容
19:10 受付開始
19:30 あいさつ・オリエンテーション
19:40 ハンズオン開始
- 21:30 ハンズオン終了
※時間が前後する場合もございますのでご留意ください

Presenter

Media View all Media

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

Feed

はが

はが wrote a comment.

2020/01/14 19:42

受付は19:45を超えましても引き続き8Fの方に設置をしております!

はが

はが wrote a comment.

2020/01/14 19:39

承知いたしました!余裕を持ってきていただければと思います!

y0o0suke

y0o0suke wrote a comment.

2020/01/14 19:14

申し訳ございませんが、少し遅れそうです。ご迷惑をお掛けして申し訳ございませんがよろしくお願い致します。

y0o0suke

y0o0suke wrote a comment.

2020/01/14 19:14

本日参加させて頂く、松本と申します。

y0o0suke

y0o0suke wrote a comment.

2020/01/14 19:13

お世話になります。

PlayCanvas運営事務局

PlayCanvas運営事務局 wrote a comment.

2020/01/09 14:08

当ハンズオンの会場変更に伴い、参加枠を20人に拡充しました。参加お待ちしております!

PlayCanvas運営事務局

PlayCanvas運営事務局 published 【ハンズオン】Vue.jsをPlayCanvasの中で使って3DモデルビュワーなWebページを作る.

12/10/2019 12:02

【ハンズオン】Vue.jsをPlayCanvasの中で使って3DモデルビュワーなWebページを作る を公開しました!

Group

Ended

2020/01/14(Tue)

18:00
21:30

You cannot RSVP if you are already participating in another event at the same date.

Registration Period
2019/12/10(Tue) 12:00 〜
2020/01/14(Tue) 18:00

Location

Lounge-R TERRACE

東京都渋谷区円山町10-7

Attendees(16)

もりけん

もりけん

【ハンズオン】Vue.jsをPlayCanvasの中で使って3DモデルビュワーなWebページを作るに参加を申し込みました!

rururu3

rururu3

【ハンズオン】Vue.jsをPlayCanvasの中で使って3DモデルビュワーなWebページを作る に参加を申し込みました!

アリンコ

アリンコ

【ハンズオン】Vue.jsをPlayCanvasの中で使って3DモデルビュワーなWebページを作る に参加を申し込みました!

okabeeeat

okabeeeat

【ハンズオン】Vue.jsをPlayCanvasの中で使って3DモデルビュワーなWebページを作る に参加を申し込みました!

ミズカズ

ミズカズ

【ハンズオン】Vue.jsをPlayCanvasの中で使って3DモデルビュワーなWebページを作る に参加を申し込みました!

fujii_k

fujii_k

【ハンズオン】Vue.jsをPlayCanvasの中で使って3DモデルビュワーなWebページを作る に参加を申し込みました!

kawaikohei

kawaikohei

【ハンズオン】Vue.jsをPlayCanvasの中で使って3DモデルビュワーなWebページを作るに参加を申し込みました!

KenS

KenS

【ハンズオン】Vue.jsをPlayCanvasの中で使って3DモデルビュワーなWebページを作る に参加を申し込みました!

tanikom

tanikom

【ハンズオン】Vue.jsをPlayCanvasの中で使って3DモデルビュワーなWebページを作るに参加を申し込みました!

Shota_y

Shota_y

【ハンズオン】Vue.jsをPlayCanvasの中で使って3DモデルビュワーなWebページを作る に参加を申し込みました!

Attendees (16)

Canceled (18)