Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
three.js基礎
Search
kaidouji85
November 18, 2017
Technology
2
610
three.js基礎
秋のJavaScript祭 in mixi 2017発表資料
kaidouji85
November 18, 2017
Tweet
Share
More Decks by kaidouji85
See All by kaidouji85
一発芸!!なんちゃってローカライズ
kaidouji85
0
64
AWSだけでネット対戦できるブラウザゲームを作った話
kaidouji85
0
61
GitHub CopilotでJavaScript開発効率を爆上げする
kaidouji85
0
100
Serverless + Fargate構成で継続的デリバリーの速度を劇的に改善した話
kaidouji85
0
920
サーバーレスアーキテクチャこそ"ヘキサゴナルアーキテクチャ"
kaidouji85
0
100
サーバーレスでターンベース制のネット対戦ゲームを作った話
kaidouji85
0
620
CDKで構築したFargateのデプロイ時間を改善した話
kaidouji85
2
540
ブラウザゲームで視聴者参加型のゲーム配信
kaidouji85
0
350
JSだけでバックエンド環境構築、IaC、自動デプロイまでやってみた話
kaidouji85
0
370
Other Decks in Technology
See All in Technology
クラウドとリアルの融合により、製造業はどう変わるのか?〜クラスメソッドの製造業への取組と共に〜
hamadakoji
0
340
データ戦略部門 紹介資料
sansan33
PRO
1
3.8k
CNCFの視点で捉えるPlatform Engineering - 最新動向と展望 / Platform Engineering from the CNCF Perspective
hhiroshell
0
130
Kubernetes self-healing of your workload
hwchiu
0
350
AIエージェント入門 〜基礎からMCP・A2Aまで〜
shukob
1
150
AI時代、“平均値”ではいられない
uhyo
8
2.1k
Linux カーネルが支えるコンテナの仕組み / LF Japan Community Days 2025 Osaka
tenforward
1
110
混合雲環境整合異質工作流程工具運行關鍵業務 Job 的經驗分享
yaosiang
0
140
Introdução a Service Mesh usando o Istio
aeciopires
1
280
MCP ✖️ Apps SDKを触ってみた
hisuzuya
0
290
「魔法少女まどか☆マギカ Magia Exedra」の多様なバトルの開発を柔軟かつ効率的に実現するためのPure C#とUnityの分離について
gree_tech
PRO
0
240
フレームワークを意識させないワークショップづくり
keigosuda
0
240
Featured
See All Featured
A better future with KSS
kneath
239
18k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
10
610
How STYLIGHT went responsive
nonsquared
100
5.8k
The Cost Of JavaScript in 2023
addyosmani
55
9.1k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Building Adaptive Systems
keathley
44
2.8k
Designing Experiences People Love
moore
142
24k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
36
6.1k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Making Projects Easy
brettharned
120
6.4k
Transcript
UISFFKTجૅ ळͷ+BWB4DSJQUࡇJONJYJ ɹ༎հ
ࣗݾհ ༎հ ϓϩάϥϚʔͬͯ·͢ +4େ͖Ͱ͢
ΞδΣϯμ UISFFKTͱ UISFFKTಛ༗ͷ֓೦ ήʔϜϧʔϓ UJQT ·ͱΊ
ΞδΣϯμ UISFFKTͱ UISFFKTಛ༗ͷ֓೦ ήʔϜϧʔϓ UJQT ·ͱΊ
UISFFKTͱ ϒϥβͰ%͕ൺֱత༰қʹ͑ΔϥΠϒϥϦ ྺ࢙͕͍ͷͰɺใ͕ൺֱతଟ͍ ·ͣ؆୯ͳαϯϓϧΛݟͯ·͠ΐ͏
αϯϓϧ ެࣜνϡʔτϦΞϧͷIFMMPXPSME<>
var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(
75, window.innerWidth/ window.innerHeight, 0.1, 1000 ); var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); var geometry = new THREE.BoxGeometry( 1, 1, 1 ); var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); var cube = new THREE.Mesh( geometry, material ); scene.add( cube ); camera.position.z = 5; var render = function () { requestAnimationFrame( render ); cube.rotation.x += 0.1; cube.rotation.y += 0.1; renderer.render(scene, camera); }; render();
Կ͜Ε ҙຯ͔Μͳ͍
େৎͰ͢
UISFFKTಛ༗ͷ֓೦
ήʔϜϧʔϓ
͜ΕΛΒͳ͍͔Β ͘͠ݟ͑Δ͚ͩ
ΞδΣϯμ UISFFKTͱ UISFFKTಛ༗ͷ֓೦ ήʔϜϧʔϓ UJQT
ઌ΄Ͳͷശ͕ճ͍ͬͯΔαϯϓϧͰɺ Կݸͷ֓೦͕͋ΔͰ͠ΐ͏͔ʁ
ਖ਼ղݸͰ͢ 3FOEFS 4DFOF $BNFSB (FPNFUSZ .FTI .BUFSJBM
UISFFKTͷओͳऀ 3FOEFS 4DFOF $BNFSB (FPNFUSZ .FTI .BUFSJBM
UISFFKTͷओͳऀ 3FOEFS 4DFOF $BNFSB (FPNFUSZ .FTI .BUFSJBM
3FOEFS ϒϥβʹ%ը໘Λඳը͢Δͷ 3FOEFSҎԼύϥϝʔλͰ%ඳը͠·͢ 4DFOF %ମ͕ஔ͔Ε͍ͯΔੈք $BNFSB 3FOEFSΛࣸਅʹྫ͑Δͱ͔Γ͍͢Ͱ͢
3FOEFS 4DFOF $BNFSB
UISFFKTͷओͳऀ 3FOEFS 4DFOF $BNFSB (FPNFUSZ .FTI .BUFSJBM
$BNFSB %ۭؒΛࡱӨ͢ΔΧϝϥͰ͢ ݱ࣮ͷΧϝϥಉ༷ɺ༻్ʹԠͯ͡৭ʑͳͷ͕ ͋Γ·͢ αϯϓϧίʔυͰ1FSTQFDUJWF$BNFSB<> ಁࢹӨΧϝϥ Λ͍ͬͯ·͢
UISFFKTͷओͳऀ 3FOEFS 4DFOF $BNFSB (FPNFUSZ .FTI .BUFSJBM
4DFOF %ϞσϧɺޫݯͳͲΛஔ͢ΔͷͰ͢ %ۭؒͷੈքͦͷͷͰ͢
UISFFKTͷओͳऀ 3FOEFS 4DFOF $BNFSB (FPNFUSZ .FTI .BUFSJBM
.FTI %ۭؒʹஔ͢ΔମͰ͢ ΩϟϥΫλʔɺՈɺϏϧͳͲͷഎܠͳͲ͕ .FTIʹ֘͠·͢
.FTI (FPNFUSZ .BUFSJBM ܗঢ় ɹ৭ ɹࡐ࣭ ɹςΫενϟ
UISFFKTͷओͳऀ 3FOEFS 4DFOF $BNFSB (FPNFUSZ .FTI .BUFSJBM
(FPNFUSZ ମͷܗঢ়σʔλ αϯϓϧϓϩάϥϜͰཱํମΛ͍ͬͯΔ ଞʹฏ໘ɺٿମͳͲجຊతͳܗ͕ ༻ҙ͞Ε͍ͯΔ
UISFFKTͷओͳऀ 3FOEFS 4DFOF $BNFSB (FPNFUSZ .FTI .BUFSJBM
.BUFSJBM ମͷࡐ࣭ΛܾΊΔͷ ৭ɺޫͷࣹ۩߹ɺෆಁ໌ͳͲΛઃఆͰ͖Δ ςΫενϟͷઃఆΛ͢Δͷ͜͜
ΞδΣϯμ UISFFKTͱ UISFFKTಛ༗ͷ֓೦ ήʔϜϧʔϓ UJQT ·ͱΊ
ήʔϜϧʔϓͱ ήʔϜը໘ΛΞχϝʔγϣϯͤ͞ΔΈ ήʔϜը໘ύϥύϥອըͷཁྖͰɺ ΞχϝʔγϣϯΛ͍ͯ͠Δ ύϥύϥອըΛϓϩάϥϜͰ࠶ݱ͢Δͱɺ ແݶϧʔϓʹͳΔ
SFRVFTU"OJNBUJPO'SBNF ϒϥβͰήʔϜϧʔϓΛ࣮ݱ͢Δͱ͖ʹ ͏ؔ<> ಈ͖ͱͯ͠ɺϒϥβը໘࠶ඳըલʹ ొͨ͠ίʔϧόοΫؔΛݺͿͱݴ͏ͷ
ήʔϜϧʔϓ࣮ݱํ๏ var render = function () { requestAnimationFrame( render );
cube.rotation.x += 0.1; cube.rotation.y += 0.1; renderer.render(scene, camera); }; render(); ᶃSFOEFSΛ࣮ߦ ᶄSFRVFTU"OJNBUJPO'SBNFʹSFOEFSΛొ ᶅSFOEFS͕ؔऴྃ͢Δ ᶆϒϥβ࠶ඳըલʹSFOEFS͕ݺΕΔ ᶃʹΔ
Ҏ্Λ౿·্͑ͨͰ αϯϓϧίʔυΛݟ·͢
var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(
75, window.innerWidth/ window.innerHeight, 0.1, 1000 ); var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); var geometry = new THREE.BoxGeometry( 1, 1, 1 ); var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); var cube = new THREE.Mesh( geometry, material ); scene.add( cube ); camera.position.z = 5; var render = function () { requestAnimationFrame( render ); cube.rotation.x += 0.1; cube.rotation.y += 0.1; renderer.render(scene, camera); }; render();
var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(
75, window.innerWidth/ window.innerHeight, 0.1, 1000 ); var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); var geometry = new THREE.BoxGeometry( 1, 1, 1 ); var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); var cube = new THREE.Mesh( geometry, material ); scene.add( cube ); camera.position.z = 5; var render = function () { requestAnimationFrame( render ); cube.rotation.x += 0.1; cube.rotation.y += 0.1; renderer.render(scene, camera); }; render(); ऀͷॳظԽ
var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(
75, window.innerWidth/ window.innerHeight, 0.1, 1000 ); var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); var geometry = new THREE.BoxGeometry( 1, 1, 1 ); var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); var cube = new THREE.Mesh( geometry, material ); scene.add( cube ); camera.position.z = 5; var render = function () { requestAnimationFrame( render ); cube.rotation.x += 0.1; cube.rotation.y += 0.1; renderer.render(scene, camera); }; render(); ήʔϜϧʔϓ
ΞδΣϯμ UISFFKTͱ UISFFKTಛ༗ͷ֓೦ ήʔϜϧʔϓ UJQT ·ͱΊ
ࠓհ͢Δ5JQT ςΫενϟΞχϝʔγϣϯ )6%ϨΠϠ ࣗ࡞ϞσϧಡΈࠐΈํ๏
5JQT࡞ྫ ൃදऀͷझຯϓϩάϥϜ<>
ࠓհ͢Δ5JQT ςΫενϟΞχϝʔγϣϯ )6%ϨΠϠ ࣗ࡞ϞσϧಡΈࠐΈํ๏
ςΫενϟΞχϝͱ ಡΜͰࣈͷ͝ͱ͘ɺςΫενϟΛ Ξχϝʔγϣϯͤ͞Δ͜ͱ εϓϥΠτΩϟϥΫλʔͷΞχϝʔγϣϯɺ ը໘ΤϑΣΫτͳͲʹ༻͞Ε͍ͯΔ
ςΫενϟΞχϝʹ ඞཁͳ͜ͱ
ඞཁͳॴΛΓऔΔ
ϑϨʔϜ੍ޚ
ςΫενϟΞχϝ࣮ݱํ๏ ඞཁͳॴΛΓऔΔ ˠUISFFKTଆͰ͋ΔઃఆΛ͢Δ<> ϑϨʔϜ੍ޚ ˠUXFFOKTΛ͏<>
ςΫενϟΛը૾ϧʔϓλΠϓʹઃఆ ॎɺԣͷഒΛʮΞχϝίϚʯʹઃఆ ඳըελʔτҐஔΛௐͯ͠ɺҙϑϨʔϜΛදࣔ ԣഒ ॎഒ Φϑηοτ9 Φϑηοτ:
UXFFOKTͱ ͋ΔΛYʙYʹZඵͰมԽͤ͞Δɺ ͱ͍͏ॲཧΛߦ͏ͷ DSFBUFKTͷϑϨʔϜ੍ޚػೳΛɺผϥΠϒϥϦ ͱͯ͠Γग़ͨ͠ͷ
ࠓհ͢Δ5JQT ςΫενϟΞχϝʔγϣϯ )6%ϨΠϠ ࣗ࡞ϞσϧಡΈࠐΈํ๏
)6%ͱ )FBE6Q%JTQMBZͷུশ ΧϝϥϨϯζʹுΓ͍ͯදࣔ͞ΕͯΔͷ ྫ͑ήʔδɺΞΠίϯͳͲ
)6%࣮ݱํ๏ UISFFKTʹϨΠϠʔػೳͳ͍ %ɺ)6%ʹTDFOFɺDBNFSBΛ༻ҙ͢Δ SFOEFSͷBVUP$MFBSGBMTFʹͯ͠ɺ %ɺ)6%ͷॱ൪ʹϨϯμϦϯά͢Δ<>
%༻4DFOF %༻$BNFSB )6%༻4DFOF )6%༻$BNFSB 3FOEFS
ࠓհ͢Δ5JQT ςΫενϟΞχϝʔγϣϯ )6%ϨΠϠ ࣗ࡞ϞσϧಡΈࠐΈํ๏
UISFFKTϞσϧϑΝΠϧࣄ UISFFKTઐ༻ϞσϧϑΝΠϧͱͯ͠ɺ KTPOܗࣜͷͷ͕͋Δ UISFFKTଆͰNFUBTFRVPJBɺNNEΛಡΈࠐΉ ϓϥάΠϯ͕͋Δ ݸਓతʹϓϥάΠϯແ͠ͰಡΈࠐΊΔͷͰɺ KTPOϑΝΠϧͷํ͕͖
ઐ༻KTPOϑΝΠϧʹ͍ͭͯ NFUBTFRVPJBͩͱඪ४ͰKTPOΤΫεϙʔτʹ ରԠ͍ͯ͠Δ ҆ఆ͍ͯ͠Δ͕ɺςΫενϟ্͕ԼٯʹͳΔ ෆ۩߹͕͋Δ
.FUBTFRVPJB UISFFKT ࣮ࡍͷঢ়
ෆ۩߹ͷճආࡦ ը૾ϑΝΠϧΛ্Լɺࠨӈٯʹ͢Ε ͳ͘දࣔͰ͖·͢ .FUBTFRVPJBެࣜ##4Ͱ࣭ͨ͠Βɺ ˢͷΑ͏ͳճΛ͖·ͨ͠
ΞδΣϯμ UISFFKTͱ UISFFKTಛ༗ͷ֓೦ ήʔϜϧʔϓ UJQT ·ͱΊ
·ͱΊ UISFFKTͱϒϥβͰ%දݱΛ͢ΔͨΊͷ ϥΠϒϥϦͰ͋Δ ·ͣUISFFKTͷऀɺήʔϜϧʔϓʹ͍ͭͯ ཧղ͠Α͏ ςΫενϟΞχϝɺ)6%ɺࣗ࡞ϞσϧऔΓࠐΈ Λͯ͠ɺ࡞ʹ՚Λఴ͑Α͏
͝ਗ਼ௌ͋Γ͕ͱ͏ ͍͟͝·ͨ͠
ࢀߟจݙ <>UISFFKTެࣜνϡʔτϦΞϧ IUUQTUISFFKTPSHEPDTJOEFYIUNMNBOVBM JOUSPEVDUJPO$SFBUJOHBTDFOF <>1FSTQFDUJWF$BNFSB IUUQTXXXBUXJLJKQUISFFKTQBHFT IUNM
ࢀߟจݙ <>XJOEPXSFRVFTU"OJNBUJPO'SBNF IUUQTEFWFMPQFSNP[JMMBPSHKBEPDT8FC "1*8JOEPXSFRVFTU"OJNBUJPO'SBNF <>UJQT࡞ྫ IUUQTHPPHMEOZ23#
ࢀߟจݙ <>ςΫενϟΞχϝͷઃఆ IUUQTHJUIVCDPNLBJEPVKJTUVEZUISFFKTCMPC CDCFDFGDFFBDCF TSDUFYUVSFUFYUVSFBOJNBUJPOKT <>UXFFOKT༻ྫ IUUQTHJUIVCDPNLBJEPVKJTUVEZUISFFKTCMPC CDCFDFGDFFBDCF TSDBSNEP[FSTIJOCSFBWFSKT
ࢀߟจݙ <>)6%ϨΠϠ࣮ݱํ๏ IUUQTHJUIVCDPNLBJEPVKJTUVEZUISFF KTCMPC CDCFDFGDFFB DCFTSDCBUUMFJOEFYKT