WebGL¥é¥¤¥Ö¥é¥ê¡ÖjThree¡×¤ÎÈ÷˺Ͽ¡£¸ø¼°¥µ¥¤¥È¡§http://jthree.jp/

¥¼¥í²ó¤Î²¼½àÈ÷¤¬½ª¤ï¤Ã¤¿¾õÂÖ¤«¤é¥¹¥¿¡¼¥È¤·¤Þ¤¹¡£

Æ°ºî¤ÏJavascript

¼Â¤Ï¡¢º£¤Þ¤Ç¥Á¥å¡¼¥È¥ê¥¢¥ë¤ÇJavascript¤ò¤¤¤¸¤é¤Ê¤«¤Ã¤¿¤À¤±¤Ç¡¢¸µ¡¹¥Ç¥âÆ°ºî¤¬ÁȤ߹þ¤Þ¤ì¤Æ¤¤¤Þ¤·¤¿¡£
mesh¥Á¥å¡¼¥È¥ê¥¢¥ë¤ÇºîÀ®¤·¤¿¥â¥Ç¥ë¤ò¥¯¥ê¥Ã¥¯¤¹¤ë¤È¾Ã¤¨¤Æ¤·¤Þ¤Ã¤Æ¤¤¤¿¤«¤È»×¤¤¤Þ¤¹¤¬¡¢Â縵¤Î¥Á¥å¡¼¥È¥ê¥¢¥ë¤Ç¤ÏÀÚÂؤ¨É½¼¨¤ò¹Ô¤Ã¤Æ¤¤¤ë¤â¤Î¤Ç¤·¤¿¡£
jThree¥¨¥Ç¥£¥¿¤Î½é´ü¥Ç¥â¤Ò¤Ê·Á http://editor.jthree.jp/?id=JtHWxQ

¡Ê¢¨¸åÆü²òÀâ¤òµ­½ÒͽÄê¡Ë
Ì¿Îᤪ¤ª¤Þ¤«¤ÊÆâÍÆ
jThree( function( j3 ) {jThree¤ÎÀ©¸æ³«»Ï
$( "#loading" ).remove();loading¤Î¤¯¤ë¤¯¤ë²ó¤ë¤ä¤Ä¤ò½üµî
j3.Trackball();¥È¥é¥Ã¥¯¥Ü¡¼¥ëÁàºî¤òÉÕ²Ã
j3.Stats();FPSɽ¼¨¤òÉÕ²Ã
j3( "mesh" ).click( function() {mesh¥¿¥°¤ËÂФ·¤Æ¥¯¥ê¥Ã¥¯¤µ¤ì¤¿¤é{}Æâ¤ò¼Â»Ü
var mode = + ( j3( this ).attr( "geo" ) == "#geo0" );
j3( this ).attr( "geo", "#geo" + mode )
.animate( { mtlColor: mode ? "#f00" : "#00f" }, 500 );
} );
function() {
alert( "¤³¤Î¥Ö¥é¥¦¥¶¤ÏWebGL¤ËÂбþ¤·¤Æ¤¤¤Þ¤»¤ó¡£" );


¤È¤ê¤¢¤¨¤ºÏ®¤Ã¤Æ¤ß¤¿¤¤¿Í¤Ï¡¢¾ÜºÙ¤Ï¤è¤¯¤ï¤«¤é¤Ê¤¯¤Æ¤â
°Ê²¼¤Î¡Ö¡©¡×¤Î¥¨¥ê¥¢¤ËÌ¿Îá¤ò½ñ¤±¤Ð¥¯¥ê¥Ã¥¯¤µ¤ì¤¿»þ¤ÎÌ¿Îá¤òµ­½Ò¤Ç¤­¤Þ¤¹¡£
¹âÅÙ¤ÊÁàºî¤ò¹Ô¤¤¤¿¤¯¤Ê¤Ã¤¿¤éÍý²ò¤ò¿¼¤á¤ë¤¿¤á¤ËJavascript¤ÈjQuary¤ò³Ø¤Ó¤Þ¤·¤ç¤¦¡£
j3( "mesh" ).click( function() {
¡©¡©¡©¡©¡©¡©¡©¡©¡©¡©¡©¡©¡©¡©¡©¡©
}

javascript¥Õ¥¡¥¤¥ë¤«¤é¡Ö¥¯¥ê¥Ã¥¯¤µ¤ì¤¿¤é¡Á¡×¤ÎÌ¿Îá¤ÎÃæ¿È¤ò[//]¤Ç¥³¥á¥ó¥È¥¢¥¦¥È¡ÊÌ¿Îá¤Î̵¸ú²½¡Ë¤·¤Þ¤·¤ç¤¦¡£
¾Ã¤·¤Æ¤·¤Þ¤Ã¤Æ¤â¹½¤¤¤Þ¤»¤ó¤¬¡¢¸«ÊÖ¤¹»ö¤â¹Í¤¨¤Æ¤³¤Î¾ì¤Ç¤Ï¥³¥á¥ó¥È¥¢¥¦¥È¤Ë»ß¤á¤Þ¤¹¡£
j3( "mesh" ).click( function() {
//  var mode = + ( j3( this ).attr( "geo" ) == "#geo0" );
//  j3( this ).attr( "geo", "#geo" + mode )
//  .animate( { mtlColor: mode ? "#f00" : "#00f" }, 500 );
} );

¤³¤ì¤«¤é¤ÎÆ°ºî¤ò¤ï¤«¤ê¤ä¤¹¤¯¤¹¤ë¤¿¤á¤Ë3D¥ª¥Ö¥¸¥§¥¯¥È¤ò2¸Äʤ٤ÆÃÖ¤¤¤Æ¤ß¤Þ¤¹¡£
º£²ó¤ÏΩÊýÂΤò2¸Ä¡¢¿§¤òÊѤ¨¤Æʤ٤Ƥߤޤ¹¡£
ʤ٤ë¤Ë¤Ï¡¢<mesh> ¤Î [style] ¤ËÂФ·¤Æ [position] ¤ò¥»¥Ã¥È¤·¤Þ¤¹¡£
[position] ¤Ë¤Ä¤¤¤Æ¤Î¾Ü¤·¤¤ÀâÌÀ¤Ï¡ÖGOML¥¹¥¿¥¤¥ë¡×¡ä¡Ö°ÌÃ֡פò»²¾È²¼¤µ¤¤¡£
¤Þ¤¿¡¢º£¤Þ¤Ç <mesh> ¤Ë¤Ï [id] ¤òÉÕ¤±¤Æ¤¤¤Þ¤»¤ó¤Ç¤·¤¿¤¬¡¢Ê¬¤«¤ê¤ä¤¹¤¤¤è¤¦¤Ë̿̾¤·¤Þ¤·¤ç¤¦¡£
GOML¥Õ¥¡¥¤¥ë¤Î<head>Éôʬ¤Ë
<geo id="geo" type="Cube" param="3 3 3" />
<mtl id="mtl1" type="MeshPhong" param="color: #f00; specular: #fff; ambient: #300;" />
<mtl id="mtl2" type="MeshPhong" param="color: #00f; specular: #fff; ambient: #008;" />            
GOML¥Õ¥¡¥¤¥ë¤Î<scene>Éôʬ¤Ë
<mesh id="redCube" geo="#geo" mtl="#mtl1" style="positionX:0;"></mesh>
<mesh id="blueCube" geo="#geo" mtl="#mtl2" style="positionX:3.2;"></mesh>
¤³¤ì¤Ç¡¢ÀÖ¤ÈÀĤΠ<mtl> ¤ò¤½¤ì¤¾¤ìÆɤ߹þ¤à°ìÊÕ¤¬ 3 ¤ÎΩÊýÂΤòºîÀ®¤·¡¢
Æó¸ÄÌܤÎΩÊýÂΤÏX¼´¤ËÂФ·¤Æ 3.2 °ÜÆ°¤µ¤»¤ë¤Î¤Çʤó¤Çɽ¼¨¤µ¤ì¤Þ¤¹¡£

¤³¤³¤Þ¤Ç¤Î¾õÂ֤ϰʲ¼¤È¤Ê¤ê¤Þ¤¹¡£

ºÆ¤Ójavascript¥Õ¥¡¥¤¥ë¤ËÌá¤ê¤Þ¤¹¡£
¥¯¥ê¥Ã¥¯¤òÆ°ºî¤Î¥È¥ê¥¬¡¼¤È¤¹¤ëÉôʬ¤Ï¤½¤Î¤Þ¤Þ³èÍѤ·¡¢Y¼´¤ËÂФ·¤Æ¤Î°ÜÆ°¥¢¥Ë¥á¡¼¥·¥ç¥ó¤òÄɲä·¤Þ¤¹¡£
°Ê²¼¤ÎÍͤ˵­½Ò¤·¤Æ¤ß¤Æ²¼¤µ¤¤¡£
<mesh>¤Î¥¿¥°¤ÇÉÁ¤«¤ì¤¿¥ª¥Ö¥¸¥§¥¯¥È¤¬¥¯¥ê¥Ã¥¯¤µ¤ì¤¿»þ¡¢
¡Ú j3( this ).animate({translateY: 2},500); ¡Û¤ÎÌ¿Î᤬¼Â¹Ô¤µ¤ì¤Þ¤¹¡£
¤³¤ì¤Ï¥¯¥ê¥Ã¥¯¤µ¤ì¤¿¥ª¥Ö¥¸¥§¥¯¥È(this)¤ËÂФ·¡¢Y¼´°ÜÆ°¤ÎÌ¿Îá [translateY] ¤ò 500ms ¤Î»þ´Ö¤ò³Ý¤± animation ¤È¤·¤Æ¼Â¹Ô¤·¤Þ¤¹¡£
j3( "mesh" ).click( function() {
//  var mode = + ( j3( this ).attr( "geo" ) == "#geo0" );
//  j3( this ).attr( "geo", "#geo" + mode )
//  .animate( { mtlColor: mode ? "#f00" : "#00f" }, 500 );
¡¡¡¡j3( this ).animate({translateY: 2},500);
} );
¤³¤ì¤Ç¥¯¥ê¥Ã¥¯¤¹¤ë¤ÈY¼´Êý¸þ¤ËÂФ·¤Æ¥¢¥Ë¥á¡¼¥·¥ç¥óÆ°ºî¤¬¹Ô¤ï¤ì¤Æ¤¤¤ë¤«¤È»×¤¤¤Þ¤¹¡£
¤³¤³¤Þ¤Ç¤Î¾õÂ֤ϰʲ¼¤È¤Ê¤ê¤Þ¤¹¡£

¤Ç¤Ï¡¢¤»¤Ã¤«¤¯¶èÊ̤¹¤ë [id] ¤òÉÕÍ¿¤·¤¿¤Î¤Ç¡¢id¤ÇÁàºî¤·¤Æ¤ß¤Þ¤·¤ç¤¦¡£
¡ä¡ä¡¡j3( "mesh" ).click( function() {
¤È¤¤¤¦Éôʬ¤Ç¥á¥Ã¥·¥å¤Î¥¿¥°¤ò½êÍ­¤¹¤ë¥ª¥Ö¥¸¥§¥¯¥È¤ò»ØÄꤷ¤Æ¤¤¤¿¤Î¤Ç¡¢¤³¤³¤ò [id] ¤ËÊѤ¨¤Æ¤ß¤Þ¤·¤ç¤¦¡£
¡ä¡ä¡¡j3( "#redCube" ).click( function() {

Ʊ¤¸Æ°ºî¤Ç¤ÏȽ¤ê¿É¤¤¤Î¤Ç¡¢
ÀÖ¿§¤Ë¤Ï¡¢º£ÅÙ¤ÏY¼´¤Ç¤Ï¤Ê¤¯±ü¹Ô¤­Êý¸þ¤ÎZ¼´¤Ç¤ÎÆ°ºî¤òÍ¿¤¨¤Æ¤ß¤Þ¤¹¡£
ÀÄ¿§¤Ë¤Ï¡¢²óž¤ÎÆ°ºî¤òÍ¿¤¨¤Æ¤ß¤Þ¤¹¡£
Àè¤Û¤É¤ÎÌ¿Îá¤È¤ÏÊ̤˰ʲ¼¤ÎÌ¿Îá¤òÄɵ­¤·¤Æ¤ß¤Æ¤¯¤À¤µ¤¤¡£
j3( "#redCube" ).click( function() {
    j3( this ).animate({translateZ: 2},500);
} );
j3( "#blueCube" ).click( function() {
    j3( this ).animate({rotateZ: +3.14 / 2 },500);
    j3( this ).animate({rotateZ: -3.14 / 2 },500);
} );
ÀÖ¤ÈÀĤǥ¯¥ê¥Ã¥¯»þ¤ÎÆ°ºî¤¬ÀÚ¤êÂؤï¤Ã¤Æ¤¤¤ë¤«¤È»×¤¤¤Þ¤¹¡£
¤³¤³¤Þ¤Ç¤Î¾õÂ֤ϰʲ¼¤È¤Ê¤ê¤Þ¤¹¡£

¥¯¥ê¥Ã¥¯¤Ë¤è¤é¤Ê¤¤±Ê³Ū¤ÊÆ°ºî¤ò¹Ô¤ï¤»¤¿¤¤¾ì¹ç¤Ï¥¯¥ê¥Ã¥¯¤Î³°¤Ëµ­½Ò¤ò¤¹¤ì¤Ð¤½¤Î¤è¤¦¤Ë¤Ê¤ê¤Þ¤¹¡£
¿·¤·¤¯greenCube¤òºîÀ®¤·¤Æ²óž¤µ¤»Â³¤±¤Æ¤ß¤Þ¤·¤ç¤¦¡£
j3( "#greenCube" ).animate( { rotateY: "+=500" }, 500000 );
Æ°ºî¤Ï¤³¤Î¤è¤¦¤Ë¤Ê¤ê¤Þ¤¹¡£

¤³¤Î¤è¤¦¤Ë¡¢¥¨¥Ç¥£¥¿¤ÎÀâÌÀ¡ÖGOML¥¹¥¿¥¤¥ë¡×¤Ëµ­ºÜ¤µ¤ì¤Æ¤¤¤ëÌ¿Îá¤òjavascript¤Ç¥ª¥Ö¥¸¥§¥¯¥È¤ËÉÕÍ¿¤¹¤ë»ö¤Ç¡¢Èæ³ÓŪ´Êñ¤Ë3D¥â¥Ç¥ë¤ÎÁàºî¤¬½ÐÍ褿¤«¤È»×¤¤¤Þ¤¹¡£
¤¢¤È¤ÏºîÀ®¤¹¤ëºîÉʤäɽ¸½¤Ë±þ¤¸¤Æ¹©Éפò¶Å¤é¤·¤Æ¤¤¤¯¹©Äø¤Ë¤Ê¤ê¤Þ¤¹¡£
¤è¤êºÙ¤«¤¤Æ°ºî¤ò¹Ô¤¦¤Ë¤Ïjavascript¤ÈjQuary¤ÎÃ챤¬É¬ÍפȤʤäƤ­¤Þ¤¹¤Î¤Ç¤³¤ì¤òµ¡¤ËÊÙ¶¯¤·¤Æ¤¤¤­¤Þ¤·¤ç¤¦¡£

¥³¥á¥ó¥È¤ò¤«¤¯


¡Öhttp://¡×¤ò´Þ¤àÅê¹Æ¤Ï¶Ø»ß¤µ¤ì¤Æ¤¤¤Þ¤¹¡£

ÍøÍѵ¬Ìó¤ò¤´³Îǧ¤Î¤¦¤¨¤´µ­Æþ²¼¤µ¤¤

Menu

¥¿¥°²òÀâ(½àÈ÷Ãæ)

GOML¥¿¥°

GOML¥¹¥¿¥¤¥ë

¥×¥é¥°¥¤¥ó

ÊĤ¸¤ë¥á¥Ë¥å¡¼

  • ¥¢¥¤¥Æ¥à

ÊÔ½¸¤Ë¤ÏID¤¬É¬ÍפǤ¹

¥á¥ó¥Ð¡¼Ê罸¡ª