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
49
AWSだけでネット対戦できるブラウザゲームを作った話
kaidouji85
0
50
GitHub CopilotでJavaScript開発効率を爆上げする
kaidouji85
0
93
Serverless + Fargate構成で継続的デリバリーの速度を劇的に改善した話
kaidouji85
0
870
サーバーレスアーキテクチャこそ"ヘキサゴナルアーキテクチャ"
kaidouji85
0
92
サーバーレスでターンベース制のネット対戦ゲームを作った話
kaidouji85
0
600
CDKで構築したFargateのデプロイ時間を改善した話
kaidouji85
2
520
ブラウザゲームで視聴者参加型のゲーム配信
kaidouji85
0
320
JSだけでバックエンド環境構築、IaC、自動デプロイまでやってみた話
kaidouji85
0
360
Other Decks in Technology
See All in Technology
AWS 怖い話 WAF編 @fillz_noh #AWSStartup #AWSStartup_Kansai
fillznoh
0
130
名刺メーカーDevグループ 紹介資料
sansan33
PRO
0
820
伴走から自律へ: 形式知へと導くSREイネーブリングによる プロダクトチームの信頼性オーナーシップ向上 / SRE NEXT 2025
visional_engineering_and_design
3
460
Data Engineering Study#30 LT資料
tetsuroito
1
190
モニタリング統一への道のり - 分散モニタリングツール統合のためのオブザーバビリティプロジェクト
niftycorp
PRO
1
520
セキュアな社内Dify運用と外部連携の両立 ~AIによるAPIリスク評価~
zozotech
PRO
0
120
ClaudeCode_vs_GeminiCLI_Terraformで比較してみた
tkikuchi
1
1.1k
三視点LLMによる複数観点レビュー
mhlyc
0
230
衛星運用をソフトウェアエンジニアに依頼したときにできあがるもの
sankichi92
1
1k
【あのMCPって、どんな処理してるの?】 AWS CDKでの開発で便利なAWS MCP Servers特集
yoshimi0227
6
950
AI エージェントと考え直すデータ基盤
na0
20
7.9k
How to Quickly Call American Airlines®️ U.S. Customer Care : Full Guide
flyaahelpguide
0
240
Featured
See All Featured
The Language of Interfaces
destraynor
158
25k
How to Ace a Technical Interview
jacobian
278
23k
Fireside Chat
paigeccino
37
3.5k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Navigating Team Friction
lara
187
15k
Become a Pro
speakerdeck
PRO
29
5.4k
Making Projects Easy
brettharned
116
6.3k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
830
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
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