three.js基礎

UISFFKTجૅ ळͷ+BWB4DSJQUࡇJONJYJ ஛಺ɹ༎հ

ࣗݾ঺հ ஛಺༎հ ϓϩάϥϚʔ΍ͬͯ·͢ +4େ޷͖Ͱ͢

ΞδΣϯμ 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

3FOEFS ϒϥ΢βʹ%ը໘Λඳը͢Δ΋ͷ 3FOEFS͸ҎԼύϥϝʔλͰ%ඳը͠·͢ 4DFOF %෺ମ͕ஔ͔Ε͍ͯΔੈք $BNFSB 3FOEFSΛࣸਅʹྫ͑Δͱ෼͔Γ΍͍͢Ͱ͢

3FOEFS 4DFOF $BNFSB

$BNFSB %ۭؒΛࡱӨ͢ΔΧϝϥͰ͢ ݱ࣮ͷΧϝϥಉ༷ɺ༻్ʹԠͯ͡৭ʑͳ΋ͷ͕  ͋Γ·͢ αϯϓϧίʔυͰ͸1FSTQFDUJWF$BNFSB<>  ಁࢹ౤ӨΧϝϥ Λ࢖͍ͬͯ·͢

4DFOF %ϞσϧɺޫݯͳͲΛ഑ஔ͢Δ΋ͷͰ͢ %ۭؒͷੈքͦͷ΋ͷͰ͢

.FTI %ۭؒʹ഑ஔ͢Δ෺ମͰ͢ ΩϟϥΫλʔɺՈɺϏϧͳͲͷഎܠͳͲ͕  .FTIʹ֘౰͠·͢

.FTI (FPNFUSZ .BUFSJBM ܗঢ় ɹ৭ ɹࡐ࣭ ɹςΫενϟ

(FPNFUSZ ෺ମͷܗঢ়σʔλ αϯϓϧϓϩάϥϜͰ͸ཱํମΛ࢖͍ͬͯΔ ଞʹ΋ฏ໘ɺٿମͳͲجຊతͳܗ͕  ༻ҙ͞Ε͍ͯΔ

.BUFSJBM ෺ମͷࡐ࣭ΛܾΊΔ΋ͷ ৭ɺޫͷ൓ࣹ۩߹ɺෆಁ໌౓ͳͲΛઃఆͰ͖Δ ςΫενϟͷઃఆΛ͢Δ΋ͷ͜͜

ήʔϜϧʔϓͱ͸ ήʔϜը໘ΛΞχϝʔγϣϯͤ͞Δ࢓૊Έ ήʔϜը໘͸ύϥύϥອըͷཁྖͰɺ  ΞχϝʔγϣϯΛ͍ͯ͠Δ ύϥύϥອըΛϓϩάϥϜͰ࠶ݱ͢Δͱɺ  ແݶϧʔϓʹͳΔ

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͕ݺ͹ΕΔ ᶃʹ໭Δ

Ҏ্Λ౿·্͑ͨͰ αϯϓϧίʔυΛݟ·͢

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();

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(); ໾ऀͷॳظԽ

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(); ήʔϜϧʔϓ

ࠓ೔঺հ͢Δ5JQT ςΫενϟΞχϝʔγϣϯ )6%ϨΠϠ ࣗ࡞ϞσϧಡΈࠐΈํ๏

5JQT࡞ྫ ൃදऀͷझຯϓϩάϥϜ<>

ςΫενϟΞχϝͱ͸ ಡΜͰࣈͷ͝ͱ͘ɺςΫενϟΛ  Ξχϝʔγϣϯͤ͞Δ͜ͱ εϓϥΠτΩϟϥΫλʔͷΞχϝʔγϣϯɺ  ը໘ΤϑΣΫτͳͲʹ࢖༻͞Ε͍ͯΔ

ςΫενϟΞχϝʹ ඞཁͳ͜ͱ

ඞཁͳ৔ॴΛ੾ΓऔΔ

ϑϨʔϜ੍ޚ

ςΫενϟΞχϝ࣮ݱํ๏ ඞཁͳ৔ॴΛ੾ΓऔΔ  ˠUISFFKTଆͰ͋ΔઃఆΛ͢Δ<> ϑϨʔϜ੍ޚ  ˠUXFFOKTΛ࢖͏<>

ςΫενϟΛը૾ϧʔϓλΠϓʹઃఆ ॎɺԣͷഒ཰ΛʮΞχϝίϚ਺ʯʹઃఆ ඳըελʔτҐஔΛௐ੔ͯ͠ɺ೚ҙϑϨʔϜΛදࣔ ԣഒ཰ ॎഒ཰ Φϑηοτ9 Φϑηοτ:

UXFFOKTͱ͸ ͋Δ஋ΛYʙYʹZඵͰมԽͤ͞Δɺ  ͱ͍͏ॲཧΛߦ͏΋ͷ DSFBUFKTͷϑϨʔϜ੍ޚػೳΛɺผϥΠϒϥϦ ͱͯ͠੾Γग़ͨ͠΋ͷ

)6%ͱ͸ )FBE6Q%JTQMBZͷུশ ΧϝϥϨϯζʹுΓ෇͍ͯදࣔ͞ΕͯΔ΋ͷ ྫ͑͹ήʔδɺΞΠίϯͳͲ

)6%࣮ݱํ๏ UISFFKTʹϨΠϠʔػೳ͸ͳ͍ %ɺ)6%ʹTDFOFɺDBNFSBΛ༻ҙ͢Δ SFOEFSͷBVUP$MFBSGBMTFʹͯ͠ɺ  %ɺ)6%ͷॱ൪ʹϨϯμϦϯά͢Δ<>

%༻4DFOF %༻$BNFSB )6%༻4DFOF )6%༻$BNFSB 3FOEFS

UISFFKTϞσϧϑΝΠϧࣄ৘ UISFFKTઐ༻ϞσϧϑΝΠϧͱͯ͠ɺ  KTPOܗࣜͷ΋ͷ͕͋Δ UISFFKTଆͰNFUBTFRVPJBɺNNEΛಡΈࠐΉ  ϓϥάΠϯ͕͋Δ ݸਓతʹ͸ϓϥάΠϯແ͠ͰಡΈࠐΊΔͷͰɺ KTPOϑΝΠϧͷํ͕޷͖

ઐ༻KTPOϑΝΠϧʹ͍ͭͯ NFUBTFRVPJBͩͱඪ४ͰKTPOΤΫεϙʔτʹ  ରԠ͍ͯ͠Δ ҆ఆ͍ͯ͠Δ͕ɺςΫενϟ্͕ԼٯʹͳΔ  ෆ۩߹͕͋Δ

.FUBTFRVPJB UISFFKT ࣮ࡍͷ঱ঢ়

ෆ۩߹ͷճආࡦ ը૾ϑΝΠϧΛ্Լɺࠨӈٯʹ͢Ε͹  ໰୊ͳ͘දࣔͰ͖·͢ .FUBTFRVPJBެࣜ##4Ͱ࣭໰ͨ͠Βɺ  ˢͷΑ͏ͳճ౴Λ௖͖·ͨ͠

·ͱΊ 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

three.js基礎

three.js基礎

More Decks by kaidouji85

Other Decks in Technology

Featured

Transcript