thrree.js入門

UISFFKTೖ໳ ϓϩάϥϛϯάੜ์ૹษڧձୈճ !αΠϘ΢ζגࣜձࣾদࢁΦϑΟε ஛಺ɹ༎հ

ࣗݾ঺հ ஛಺ɹ༎հ ϓϩάϥϚʔ΍ͬͯ·͢ +4͕େ޷͖Ͱ͢ ϓϩੜͪΌΜՄѪ͍ʂʂ

দࢁͱ͍͑͹ळࢁܑఋ

ळࢁܑఋͱ͍͑͹ઓ؋ࡾּ

ࡾּ UISFF

ͱ͍͏༁Ͱ UISFFKTͷ࿩Λ͠·͢

ΞδΣϯμ UISFFKTΛ࢖͏ཧ༝ UISFFKTೖ໳ %ϓϩάϥϛϯάUJQT ·ͱΊ

UISFFKTͱ͸ +BWB4DSJQUͰ%͕؆୯ʹ࢖͑ΔΑ͏ʹͳΔ  ϥΠϒϥϦͰ͢ +BWB4DSJQUʹ͸8FC(-ͱ͍͏ඪ४Ͱ  %Λѻ͏ػೳ͕͋Γ·͢ 8FC(-Λ௚઀࢖͏ͷ͸େมͰ͢ ˢԿނ͔ͱݴ͏ͱɺͦΕ͸ʜʜ

8FC(-㱠+BWB4DSJQU

γΣʔμʔݴޠ 8FH(-Λ࢖͏ʹ͸+BWB4DSJQUͱ͸׬શʹผͷ  γΣʔμʔݴޠΛֶͿඞཁ͕͋Γ·͢ +4෦෼΋ߦྻܭࢉ͕ଟͯ͘େมͰ͢ attribute vec3 aVertexPosition; uniform mat4 uMVMatrix;
uniform mat4 uPMatrix; void main(void) { gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0); }

UISFFKTͰָͯ͠ 8FC(-Λ࢖͍·͠ΐ͏

UISFFKTͰIFMMPXPSME ཱํମΛදࣔ͢ΔϓϩάϥϜΛ࡞Γ·͢ ιʔε͸ͪ͜Βʹ͋Γ·͢  IUUQTHJUIVCDPNLBJEPVKJIFMMPUISFFKT

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ͷओͳ໾ऀ 3FOEFS 4DFOF $BNFSB (FPNFUSZ .FTI .BUFSJBM

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

3FOEFS 4DFOF $BNFSB

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

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

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

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

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

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

΋͏Ұ౓αϯϓϧίʔυ ΛݟͯΈ·͠ΐ͏

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ͷ໾ऀΛ  ॳظԽͯ͠Δ͚ͩ

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(); ͋ͱ͸͜ͷ෦෼͕ Α͘෼͔Βͳ͍

͜͜͸͍ΘΏΔ ήʔϜϧʔϓͰ͢

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

SFRVFTU"OJNBUJPO'SBNF ϒϥ΢βͰήʔϜϧʔϓΛ࣮ݱ͢Δͱ͖ʹ  ࢖͏ؔ਺ ಈ͖ͱͯ͠͸ɺϒϥ΢βը໘࠶ඳըલʹ  ొ࿥ͨ͠ίʔϧόοΫؔ਺ΛݺͿͱݴ͏΋ͷ IUUQTEFWFMPQFSNP[JMMBPSHKBEPDT8FC "1*8JOEPXSFRVFTU"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 render = function () { requestAnimationFrame( render );
cube.rotation.x += 0.1; cube.rotation.y += 0.1; renderer.render(scene, camera); }; render(); ᶃ ᶄ ᶃཱํମͷYɺZ࣠ํ޲ͷճస֯Λ ͢Δ ᶄ%ը໘Λඳը͢Δ

UISFFKTجຊ·ͱΊ %ੈքͷجຊͱͳΔγʔϯɺͦͷੈքΛݟΔ  ͨΊͷΧϝϥ ෺ମͰ͋Δ.FTI͸ɺܗঢ়σʔλ(FPNFUSZɺ  ࡐ࣭σʔλ.BUFSJBM͔Β੒Δ ήʔϜϧʔϓͱݺ͹ΕΔύϥύϥອըͷख๏Ͱɺ ήʔϜը໘͕ಈ͍͍ͯΔΑ͏ʹݟ͑Δ

৭ʑग़͖ͯ·͕ͨ͠ɺ

.FTI 3FOEFS 4DFOF $BNFSB (FPNFUSZ .BUFSJBM ·ͣ͸ओͳ໾ऀΛ  ཧղ͠·͠ΐ͏

͸͡Ίʹ ͔͜͜Β͸UJQTूʹͳΓ·͢ ൃදऀ͕ࣗ࡞ήʔϜΛ࡞Δࡍʹಘͨ஌ݟΛ  ڞ༗͠·͢ ࠷ऴతʹ͜Ε͘Β͍͸࡞ΕΔΑ͏ʹͳΓ·͢  IUUQTHPPHMEOZ23#

࡞ྫ खલຯ઻Ͱ͕͢ʣ

࡞ྫͷίʔυ IUUQTHJUIVCDPNLBJEPVKJTUVEZUISFF KTDPNNJUTNBTUFS

UJQTҰཡ ϏϧϘʔυΛ࣮ݱ͢Δ εΧΠϘοΫεΛ࣮ݱ͢Δ ࣗ࡞ϞσϧΛಡΈࠐΉ

ɹϏϧϘʔυͱ͸ ৗʹΧϝϥͷํ޲ʹදࣔ͞ΕΔɺ  ൘ঢ়ͷΦϒδΣΫτ %ۭؒʹ࣍ݩը૾Λද͍ࣔͤͨ࣌͞ʹɺ  Α͘࢖ΘΕ͍ͯ·͢ ࡞ྫͩͱɺϩϘοτɺ໦͕ϏϧϘʔυͰ͢ ࣮ࡏͷήʔϜͩͱɺϖʔύʔϚ˓Φ31(ɺ  εύ˓ϘͳͲ

ϏϧϘʔυ࣮૷ํ๏ ϏϧϘʔυͷRVPUBOJPO ճస֯ ʹɺ  ΧϝϥͷRVPUBOJPOΛηοτ͠·͠ΐ͏ ˢ্هॲཧΛ΍Δͷ͸ɺήʔϜϧʔϓͷதͰ͢ mesh.quaternion.copy(camera.quaternion);

΋ͬͱৄ͍͠ίʔυྫ IUUQTHJUIVCDPNLBJEPVKJTUVEZUISFF KTCMPCNBTUFSTSDTUBHFTDIPPMTDIPPM CVJMEUSFFCJMMCPBSEKT

εΧΠϘοΫεͱ͸ ശͷ಺ଆʹԕܠͷը૾ΛషΓ෇͚ͯɺ  ͞΋ແݶͷੈքʹ͍ΔΑ͏ʹࡨ֮ͤ͞Δख๏ ࡞ྫͰ͸ۭɺ஍໘ͳͲʹεΧΠϘοΫεΛ࢖༻

εΧΠϘοΫε࡞੒ํ๏ ԕܠը૾Λࣗ෼Ͱඳ͘ͷ͸େมͳͷͰɺ  5FSSBHFOΛ࢖͍·͠ΐ͏ 5FSSBHFOͱ͸%Ͱ৭ʑͳ஍ܗΛ࡞Δ͜ͱ͕  Ͱ͖ΔιϑτͰ͢ ํ޲ ্Լͷܭຕͷը૾Λ༻ҙ͠·͠ΐ͏

εΧΠϘοΫεը૾ྫ

۩ମతͳखॱ ʮ5FSBHHFOɺεΧΠϘοΫεʯͰάάΔͱ  ݁ߏώοτ͠·͢ ݸਓతʹ͸ɺ͜ͷϒϩά͕Φεεϝ IUUQEIBUFOBOFKQ OBLBNVSB

UISFFKTͷϞσϧϑΝΠϧ UISFFKTઐ༻ͷKTPOϑΝΠϧ͕͋Γ·͢ ༗໊ͳ%ιϑτʹ͸ݢฒΈUISFFKTઐ༻KTPOΛ ॻ͖ग़͢ϓϥάΠϯ͕͋Γ·͢ .FUBTFRVPJBɺ#MFOEFSΛࢼ͠·͕ͨ͠ɺ  ͲͪΒ΋҆ఆ͠·ͤΜͰͨ͠

.FUBTFRVPJB ݴΘͣͱ஌Εͨࠃ࢈ϞσϦϯάπʔϧ ඪ४ͰUISFFKTઐ༻KTPOͷग़ྗʹରԠ ςΫενϟ্͕Լٯ͞·ʹදࣔ͞ΕΔҎ֎ɺ  ಛʹ໰୊͸͋Γ·ͤΜͰͨ͠

.FUBTFRVPJB UISFFKT ࣮ࡍͷ঱ঢ়

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

#MFOEFS ࠃࡍతʹ༗໊ͳ%ιϑτ ϑϦʔͳͷʹػೳ͕ϋΠΤϯυͳιϑτʹ΋  ඖఢ͢Δ UISFFKTઐ༻KTPOΛॻ͖ग़͢ϓϥάΠϯ͕͋Δ ͕ɺͦ΋ͦ΋Ϟσϧ͕දࣔ͞Εͳ͔ͬͨ

࠷ޙʹ͓·͚Ͱ

1SPKFDU%0("

1SPKFDU%PHBͱ͸ ੵΈ໦ײ֮Ͱ%Ϟσϧ͕࡞ΕΔιϑτ ࠷ॳ͔Β༻ҙ͞Ε͍ͯΔύʔπ͕ଟͯ͘ɺ  ૉਓͰ΋ͦΕͬΆ͍ͷ͕࡞ΕΔ ެࣜαΠτʹ௥Ճύʔπ͕͋ΔͷͰɺ  શ෦ೖΕͨํ͕͍͍ ࡞ྫͷϩϘοτ͸͜ΕͰ࡞Γ·ͨ͠

ૉਓͰ΋ ͜Ε͚ͩͷ΋ͷ͕ ࡞Ε·͢

%PHB஫ҙ఺ ͍ΘΏΔϩʔϙϦϞσϧͰ͸ͳ͍ͷͰɺ  ήʔϜͰͦͷ··࢖͏ʹ͸ෆ޲͖ ˢϏϧϘʔυͱͯ͠࢖͏ͳΒશવ͋Γ ϝΧܥҎ֎͸গۤ͠ख ෼͔Δਓʹ͸%PHB࢖ͬͯΔͳͱҰൃͰόϨΔ

·ͱΊ UISFFKTͱ͸+BWB4DSJQUͰ؆୯ʹ%Λ  ࢖͏ͨΊͷϥΠϒϥϦͰ͋Δ UISFFKTʹ͸໾ऀ͕ͨ͘͞Μ͍ΔͷͰɺ  ·ͣ͸ͦΕΒΛҰͭҰͭཧղ͠Α͏ .FUBTFRVPJBɺ5FSSBHFOɺ%PHBͳͲͰUISFFKT ༻ͷࣗ࡞ૉࡐΛͲΜͲΜ࡞Ζ͏

͝੩ௌ͋Γ͕ͱ͏ ͍͟͝·ͨ͠

thrree.js入門

thrree.js入門

More Decks by kaidouji85

Other Decks in Technology

Featured

Transcript