WebGL入門　Three.jsで良さげなプロフィールサイト作ってみた

285 Views

November 14, 25

スライド概要

React TokyoにてLT登壇したスライドです
WebGLを少しだけ齧った内容となっております

ぶりお

@burio16

スライド一覧

千株式会社所属

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

ダウンロード

関連スライド

猫でも分かるUnreal Engineの学び方 - 超初心者向け編 - 2023 v1.0

ue4 ue5 ue-beginner

エピックゲームズジャパン 1.6M

Unreal Engine5 Lumenの仕組みと肝心なところ

ue5 ue-rendering ue-lumen

エピックゲームズジャパン 1.4M

Meta XR SDK(V66-74)でQuestアプリを開発

spatial anchor unity quest pro shaperecognizeractivatestate oculus integration transformfeaturestateprovider building blocks transformrecognizeractivestate ovrsemanticclassification jointdeltaprovider ovrscenemanager jointvelocityactivestate オクルージョン sequenceactivestate scene manager ambisonic depth api metaxraudiosource playerlocomotor meta xr sdk quest3 ovrplayercontroller マルチモーダル meta haptics studio direct touch ui meta xr haptics sdk ovrspatialanchor ovrtrackedkeyboard hapticclipplayer fingerfeaturestateprovider hapticclip ワイドモーションモード wmm mruk mr utility kit voice sdk jointrotationactivestate meta horizon os ui set asw application spacewarp ovr metrics tool unityscene manager colocation discovery コロケーション mx ink passthrough camera api hand tracking microgestures webcamtexturemanager passthroughcamerautils cameraviewermanager hand pose selector recorder

あうぜん 1.1M

UE5レンダリングフロー総おさらい(2024) 基礎編！[CEDEC+KYUSHU 2024]

ue5 unreal engine ue-rendering

エピックゲームズジャパン 1.1M

猫でも分かる UE5.0, 5.1 におけるアニメーションの新機能について【CEDEC+KYUSHU 2022】

ue5 cedec+kyushu ue-animation ue-optimize ue-bp ue-physics ue-sequencer

エピックゲームズジャパン 1M

各ページのテキスト

2025年11月14日 React Tokyo ミートアップ #11 WebGL入門 Three.jsで良さげなプロフィールサイト作ってみたぶりお (@buri16_koutaro)

プロダクト紹介写真を中心とした、幼保業界の DXプロダクトを展開 SEN CORPORATION

自己紹介 ● ぶりお (@buri16_koutaro) ● 千株式会社システム開発部 (25卒) ● タコスとトッテナムホットスパー FC が大好き ● 社内管理画面とtoB向けの管理画面を開発中 SEN CORPORATION

https://x.com/buri16_koutaro

プロフィールサイトを作ろう！！ SEN CORPORATION

プロフィールサイトを作ろう！！最近やっと落ち着いて、自分がやりたい方向も見えてきたし外部のコミュニティにも顔出したいな SEN CORPORATION

プロフィールサイトを作ろう！！そうだ、プロフィールサイトを作ろう。 SEN CORPORATION

プロフィールサイトを作ろう！！でもただつくるだけならlit.linkでもいいなんならAIに全部作らせてもいいなんかないかしら SEN CORPORATION

プロフィールサイトを作ろう！！フロントエンドの知識地図第５章より良い開発のための一歩 5-7 WebGL ※神奈川生まれ神奈川育ちこれでゲーム作れんねや！！ SEN CORPORATION ゲームまでとはいかんくてもなんか3Dってかっこええから使おかな、知らんけど (エセ大阪弁)

プロフィールサイトを作ろう！！ SEN CORPORATION

10.

プロフィールサイトを作ろう！！ WebGLベースの Three.jsを Reactで扱えるラッパーライブラリ React Three Fiber を使って制作 SEN CORPORATION

11.

WebGLってなんだっけ SEN CORPORATION

12.

ブラウザで3Dのグラフィックを描けるすげぇやつです SEN CORPORATION

13.

WebGLってなんだっけ WebGL:Web Graphics Libraryの略ブラウザにてプラグインを使わずに2D,3Dのグラフィックを描画するJS API <canvas>要素内にAPIを実装することでグラフィックを書くことができる！！ ? SEN CORPORATION ?

14.

Three.jsって何？ SEN CORPORATION

15.

JS ライブラリです SEN CORPORATION

16.

Three.js Three.js WebGLを用いて3Dグラフィックを描画するためのJS ライブラリの”一つ” 点と線と図形しか扱えないWebGLを使って3Dを表現するためにある SEN CORPORATION

http://three.js

17.

Three.jsキホンのキ renderer : WebGLをレンダリングするためのレンダラー scene : 任意の3Dの物体を出現させるための空間 camera ：その空間をどこから見るのかという視点 mesh : その空間に出現させる物体 geometry : 物体の形 material : 物体の質感 SEN CORPORATION

18.

Three.jsキホンのホ(?) まずはレンダラーを作成 idがmyCanvasのものに描画しますレンダラーの幅と高さを設定 SEN CORPORATION

19.

Three.jsキホンのホ(?) 次に空間を定義 SEN CORPORATION

20.

Three.jsキホンのホ(?) カメラの画角とそのポジションを設定画角：10〜90度で小さいほど望遠にアスペクト比 : カメラの視野の縦横比(幅/高さに合わせるのがベスト) ポジション：カメラがどこから物体を見るか SEN CORPORATION

21.

Three.jsキホンのホ(?) 表示したい形状を設定する今回は球体セグメント数は多ければ滑らかに、少ないとカクカクに形状と質感を決定したら空間に入れる SEN CORPORATION

22.

Three.jsキホンのホ(?) 最後にレンダラーに空間とカメラをセットしてレンダリング！ SEN CORPORATION

23.

Three.jsキホンのン(?) 回転させたい場合は回転させるための関数を定義 SEN CORPORATION

24.

React Three Fiberって何？ SEN CORPORATION

25.

ラッパーです SEN CORPORATION

26.

React Three Fiber React Three Fiber Three.jsをReactっぽく宣言的に書くためのライブラリコンポーネントとして記述しながらThree.jsのAPIを使用できる SEN CORPORATION

27.

React Three Fiber meshあった！ geometryあった！ materialあった！ camera一応あった！ SEN CORPORATION

28.

rendererとsceneどこにいった？ SEN CORPORATION

29.

…君のような勘のいいガキは嫌いだよ SEN CORPORATION

30.

React Three Fiber 合体してる！(トラウマ) R3Fの<Canvas>要素がデフォルトで用意 renderer,scene,cameraを定義する必要がない SEN CORPORATION

31.

React Three Fiber ※Three.jsで作ったものと全く同じものですが再放送ではありません SEN CORPORATION

32.

React Three Fiber使ってみた感想・コードが比較的短く読みやすい HTMLとJSファイルで分ける必要もない命令的ではなく、宣言的・比較的簡単に始めることができる Reactを普段から使っている人にとっては学習コストが低い SEN CORPORATION

33.

まとめ・ WebGLはブラウザ上で3Dのグラフィックを描画するためのAPI ・ Three.jsはWebGLで複雑なものを記述するものを助けてくれるライブラリ renderer,scene,camera,mesh(geometry,material)の要素で構成される・ React Three Fiberはそのラッパー宣言的に記述することができ、コード量も少なく学習コストは低い SEN CORPORATION