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
47
AWSだけでネット対戦できるブラウザゲームを作った話
kaidouji85
0
50
GitHub CopilotでJavaScript開発効率を爆上げする
kaidouji85
0
93
Serverless + Fargate構成で継続的デリバリーの速度を劇的に改善した話
kaidouji85
0
870
サーバーレスアーキテクチャこそ"ヘキサゴナルアーキテクチャ"
kaidouji85
0
91
サーバーレスでターンベース制のネット対戦ゲームを作った話
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 Security Hub (Preview) を紹介 #reInforce_osaka / reInforce New Security Hub
masahirokawahara
0
480
Delegating the chores of authenticating users to Keycloak
ahus1
0
140
品質と速度の両立:生成AI時代の品質保証アプローチ
odasho
1
360
How Do I Contact HP Printer Support? [Full 2025 Guide for U.S. Businesses]
harrry1211
0
120
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
960
NewSQLや分散データベースを支えるRaftの仕組み - 仕組みを理解して知る得意不得意
hacomono
PRO
2
170
怖くない!はじめてのClaude Code
shinya337
0
400
自律的なスケーリング手法FASTにおけるVPoEとしてのアカウンタビリティ / dev-productivity-con-2025
yoshikiiida
1
17k
生成AI活用の組織格差を解消する 〜ビジネス職のCursor導入が開発効率に与えた好循環〜 / Closing the Organizational Gap in AI Adoption
upamune
7
5.3k
ネットワーク保護はどう変わるのか?re:Inforce 2025最新アップデート解説
tokushun
0
210
開発生産性を組織全体の「生産性」へ! 部門間連携の壁を越える実践的ステップ
sudo5in5k
2
7.2k
Should Our Project Join the CNCF? (Japanese Recap)
whywaita
PRO
0
340
Featured
See All Featured
Code Review Best Practice
trishagee
69
18k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Unsuck your backbone
ammeep
671
58k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
The Cult of Friendly URLs
andyhume
79
6.5k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
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