���ʂȕ\���͂�WebGL�������₷������uThree.js�v�FWeb�O���t�B�b�N���n�b�N����i5�j�i1/5 �y�[�W�j

Three.js��WebGL�̏璷�Ȏd�l�����܂����b�v���A�����₷���C���^�[�t�F�C�X�Œ񋟂��郉�C�u�������B�T���v���R�[�h�ƌ���ׂȂ���A�����ǂ��w�K���悤

» 2012�N10��04�� 00��00�� ���J
[�ɓ�����CWebOS Goodies]

Three.js�̊�b

�@�{�A����5��ڂ��}���A���悢������ɓ���܂��B����̑�ނ́AWeb�u���E�U���3�����O���t�B�b�N����������uWebGL�v�ł��B�������A����܂łƈ����API�𒼐ڂ͐G�ꂸ�A�uThree.js�v�𗘗p���܂��BThree.js��WebGL�̏璷�Ȏd�l�����܂����b�v���A�����₷���C���^�[�t�F�C�X�Œ񋟂��郉�C�u�����ł��BMr.Doob���𒆐S�ɃI�[�v���\�[�X�ŊJ�����i�߂��Ă���AWebGL�E�G�ł̓f�t�@�N�g�X�^���_�[�h�ɋ߂��n�ʂ�z���Ă��܂��B

�@WebGL�͂���܂ʼn�������ǂ�API�������͂ŁA���ʂȕ\���͂�񋟂��Ă���܂��B��{�I��HTML��JavaScript�̒m��������Γǂݐi�߂���悤�ɉ�����Ă��܂��̂ŁA���Ђ��̖��͂ɐG��Ă݂Ă��������B

WebGL�̃u���E�U�T�|�[�g��

�@�{�e�����M���Ă���2012�N9�����_�ɂ����āA�c�O�Ȃ��炷�ׂĂ̊‹���WebGL�����p�ł���킯�ł͂���܂���B�L�����̃T���v���R�[�h�𓮍삳����ɂ́A�Ή�����‹���p�ӂ��Ă��������K�v������܂��B�ȉ��Ɋe�u���E�U�̑Ή��󋵂��܂Ƃ߂܂��i�������2012�N9�����_�̍ŐV�ł̂��́j�B

  • Google Chrome
    WebGL���W���ŗ��p�ł��܂��B�O���t�B�b�N�f�o�C�X�ɖ�肪����ꍇ�ł��\�t�g�E�F�A�ŃG�~�����[�V��������̂ŁA�����̊‹���WebGL�����삷��ł��傤�BWebGL�������ɂ́A�ł������߂ł���u���E�U�ł��B

  • Firefox
    WebGL���W���ŗ��p�ł��܂����A�O���t�B�b�N�f�o�C�X�ɖ�肪����Ɩ����ɂȂ�܂��B���̏ꍇ�́A�f�o�C�X�h���C�o���ŐV�̂��̂ɍX�V���邱�Ƃʼn��P�ł��邩������܂���B

  • Sarafi
    WebGL�̋@�\���͎̂�������Ă��܂����A�f�t�H���g�ł͖����ɂȂ��Ă��܂��B�‹��ݒ�̏ڍ׃^�u�Łu���j���[�o�[��"�J��"���j���[��\���v�Ƀ`�F�b�N����ꂽ��A���C�����j���[��[�J��]>[WebGL��L���ɂ���]��WebGL��L�����ł��܂��B�������A�O���t�B�b�N�f�o�C�X�ɖ�肪����Ɠ��삵�܂���B

  • Opera
    WebGL�̋@�\���͎̂�������Ă��܂����A�f�t�H���g�ł͖����ɂȂ��Ă��܂��B�A�h���X�o�[�Ɂuopera:config�v�Ɠ��͂��Đݒ�t�@�C���G�f�B�^��\�����A�uEnable WebGL�v�ƁuEnable Hardware Acceleration�v�̍��ڂ��u1�v�ɕύX���邱�ƂŁi�O���t�B�b�N�f�o�C�X�ɖ�肪�Ȃ���΁j�AWebGL��L�����ł��܂��B�������A�܂����������肵�Ă��Ȃ��悤�ŁA�M�҂̊‹��ł͋L�����̃T���v���̂قƂ�ǂ����삵�܂���ł����B

  • Internet Explorer
    ���s��IE9�A����ыߓ����Ƀ����[�X�\���IE10�ɂ����Ă�WebGL���T�|�[�g���܂���BWebGL�������ꍇ�́A���̃u���E�U���g�p���Ă��������B

�� Web�u���E�U�̐ݒ�ύX�́A�e���̐ӔC�ɂ����čs���Ă��������B�ړI���ς񂾂�A���ɖ߂��Ă������Ƃ������߂��܂��B

Three.js�Œn����\������

�@����ł͑����AThree.js���g���Ă݂܂��傤�B�܂��͉��̉摜�̂悤�ɒn���̃e�N�X�`���𒣂������̂�\�����āAThree.js�𗘗p�����`�揈���̗�����‚��݂܂��B

Tv̎s �T���v���̎��s�����i�� �e�N�X�`���摜�����茳�ATom Patterson, www.shadedrelief.com�j

�@�ȉ������̃\�[�X�R�[�h�ɂȂ�܂��B

<!DOCTYPE html>
<html lang="ja">
  <head><meta charset="UTF-8"></head>
  <body>
    <script src="//sample.atmarkit.jp/fux/1210/04/three.min.js"></script>
    <script>
      // (1)�����_���̏�����
      var renderer = new THREE.WebGLRenderer({ antialias:true });
      renderer.setSize(500, 500);
      renderer.setClearColorHex(0x000000, 1);
      document.body.appendChild(renderer.domElement);
 
      // (2)�V�[���̍쐬
      var scene = new THREE.Scene();
 
      // (3)�J�����̍쐬
      var camera = new THREE.PerspectiveCamera(15, 500 / 500);
      camera.position = new THREE.Vector3(0, 0, 8);
      camera.lookAt(new THREE.Vector3(0, 0, 0));
      scene.add(camera);
 
      // (4)���C�g�̍쐬
      var light = new THREE.DirectionalLight(0xcccccc);
      light.position = new THREE.Vector3(0.577, 0.577, 0.577);
      scene.add(light);
 
      var ambient = new THREE.AmbientLight(0x333333);
      scene.add(ambient);
 
      // (5)�\�����镨�̂̍쐬
      var geometry = new THREE.SphereGeometry(1, 32, 16);
      var material = new THREE.MeshPhongMaterial({
        color: 0xffffff, ambient: 0xffffff,
        specular: 0xcccccc, shininess:50, metal:true,
        map: THREE.ImageUtils.loadTexture('images/earth.jpg') });
      var mesh = new THREE.Mesh(geometry, material);
      scene.add(mesh);
 
      // (6)�����_�����O
      var baseTime = +new Date;
      function render() {
        requestAnimationFrame(render);
        mesh.rotation.y = 0.3 * (+new Date - baseTime) / 1000;
        renderer.render(scene, camera);
      };
      render();
    </script>
  </body>
</html>

�@�ŏ���script�v�f�œǂݍ���ł���uThree.min.js�v��Three.js�̖{�̂ł��B���̃t�@�C���͈ȉ���URL�œ���ł���̂ŁAHTML�Ɠ����t�H���_�ɕۑ����Ă����Ă��������B

�@���Ƃ͂��ׂ�JavaScript�ɂ�鏈���ł��B�R�����g�ŋ�؂����������Ƃɏ������e��������Ă����܂��B

�i1�j�����_���̏�����

�@Three.js�ł̕`�揈���̂قƂ�ǂ�S���̂������_���ł��B�T���v���ł�WebGL�̋@�\�𗘗p���āA�`����s��WebGLRenderer���쐬���Ă��܂��B�R���X�g���N�^�����Ŏw�肵�Ă���uantialias:true�v�̓A���`�G�C���A�X������L���ɂ�����̂ł��B

�@�쐬��ɌĂяo���Ă���setSize()��setClearColor()�́A���ꂼ��`��̈�̃T�C�Y�ƁA�`��O�ɉ�ʃN���A����ۂ̐F�̎w��ł��B��҂͑�1�������F�A��2�������A���t�@�l�i0�`1�j�ƂȂ��Ă��܂��B

�@�������ĕK�v�Ȑݒ���s������AdomElement�v���p�e�B�ŕ`��̈�ƂȂ�DOM�v�f���擾���A�h�L�������g�̔C�ӂ̈ʒu�ɑ}�����܂��BThree.js�ɂ��`�挋�ʂ͏�ɂ���DOM�v�f���ɕ\������܂��B���Ȃ݂ɁAdomElement�̒l�͑O��������canvas�v�f�Ȃ̂ŁAtoDataURL()�ɂ���ĕ`�挋�ʂ̉摜���擾����Ƃ��������Ƃ��”\�ł��B

�i2�j�V�[���̍쐬

�@�`��ΏۂƂȂ镨�̂₻�̑��̃I�u�W�F�N�g���i�[����Scene�N���X�̃C���X�^���X���쐬���܂��B�ȍ~�ō쐬����I�u�W�F�N�g�͂��ׂĂ��̃C���X�^���X�ɒlj����Ă����A�Ō�ɂ���������_���ɓn���ĕ`�悵�܂��B

�i3�j�J�����̍쐬

�@�V�[�����́u�ǂ̏ꏊ����v�u�ǂ̕������v�������i��`�悷�邩���w�肷��J�������쐬���A�V�[���ɒlj����܂��B�J�����ɂ͕��s���e���s��OrthographicCamera�Ɠ������e��PerspectiveCamera������̂ł����A��ʓI�ɂ͉��s����������₷����҂��g���܂��B

�@PerspectiveCamera�̃R���X�g���N�^�����͉�p�ƃA�X�y�N�g��ł��B��p�͒l������������Ζ]�������Y�A�傫������΍L�p�����Y�̌��ʂɂȂ�̂ŁA10�`70������ōD�݂̃p�[�X�ɂȂ�l���w�肷��Ηǂ��ł��傤�B�A�X�y�N�g��͉�ʂ̉����������Ŋ������l�ł��B

�@PerspectiveCamera�C���X�^���X���쐬������Aposition�v���p�e�B�ŃJ�����̈ʒu�AlookAt()���\�b�h�Œ����_�i���̍��W����ʂ̒��S�ƂȂ�悤�ɃJ�����̕����𒲐�����j���w�肵�܂��B���W�̎w��Ɏg���Ă���THREE.Vector3�N���X�͔ėp��3�����x�N�g���^�ŁA�R���X�g���N�^��x�Ay�Az���W���w�肵�Ă��܂��BThree.js�ł̍��W�w��͂قƂ�ǂ��̃N���X���g���܂��B

�@�쐬�����J�����́Aadd()���\�b�h�ŃV�[���ɒlj����Ă����܂��B�ȍ~�ō쐬����e�I�u�W�F�N�g�����l�ł��B

�i4�j���C�g�̍쐬

�@���̂��Ƃ炷���C�g���V�[���ɔz�u���܂��B��ɍ쐬���Ă���DirectionalLight�́A���z���̂悤�Ɂi�قځj�������_�ɑ��݂��������\��������̂ł��B�R���X�g���N�^�̈����̓��C�g�̐F�ŁAposition�v���p�e�B�̓��C�g�̕����ɂȂ�܂��B

�@���ɍ쐬���Ă���AmbientLight�́A�Ƃ�Ԃ��Ȃǂ̊‹������^���I�ɍČ�������̂ŁA�ʂ̕����ɂ�����炸�V�[������l�ɏƂ炵�܂��B�����ݒu���Ȃ��ƁA���C�g�ɏƂ炳��Ă��Ȃ��ʂ��^�����ɂȂ��Ă��܂��A�s���R�ȕ`�挋�ʂɂȂ�܂��i�Ƃ����‚A���͉F����Ԃł͊‹������قڑ��݂��Ȃ��̂ŁA�n����`�悷��Ȃ�AmbientLight���Ȃ��������A���ł��B�����ł͈�ʓI�ȗp�r�̊w�K�ړI�Ƃ������ƂŒlj����Ă��܂��j�B

�i5�j�\�����镨�̂̍쐬

�@���ۂɒn���Ƃ��ĕ\�����鋅�̂��V�[���ɒlj����܂��BThree.js�ł́A�\�����镨�͎̂�Ɉȉ���3�‚̗v�f�ō\������܂��B

  • �`�� (Geometry)
  • ���� (Material)
  • ���ۂɕ\�����镨�� (Object3D)

�@���̂悤��3�‚̗v�f�ɕ����Ă��闝�R�́A�����̕��̂Ō`��⎿�������L���邽�߂ł��B�Ⴆ�΁A�ґ���g��Ŕ�Ԑ퓬�@�̃V�[���Ȃ�`��E�����Ƃ��ɓ������̂𕡐��z�u�������ł��傤���A�n���ƌ���\������Ȃ�A�`��͓������̂Ŏ����i�e�N�X�`���j�Ƒ傫��������ύX�������ł��傤�B�`��A�����A���̂ɕ����ĊǗ����邱�ƂŁA���������j�[�Y�ɏ_��ɑΉ��ł��܂��B

�@�����Ƃ��A���̃T���v���͒n����1�•\�����邾���Ȃ̂ŁA�`��A�����A���̂����ꂼ��1�‚��쐬���Ă��܂��B���ԂɌ��Ă����܂��傤�B

�@�`��Ɋւ��ẮAThree.js�Ƀv���Z�b�g����Ă���SphereGeometry�i���́j���g�p���Ă��܂��B�w�肵�Ă���R���X�g���N�^�����͐擪���甼�a�A�o�x�����̕������A�ܓx�����̕������ł��BThree.js�ɂ͑��ɂ������̃v���Z�b�g�`�󂪂���܂����A�C�ӂ̌`��𐶐�������@������܂��B�����̏ڍׂ�2�y�[�W�ڂʼn�����܂��B

�@�����͑����̏ꍇMeshPhongMaterial���g�p���܂��B�R���X�g���N�^�����̓I�u�W�F�N�g�ŁA�v���p�e�B�Ƃ��Ă��܂��܂ȃp�����[�^��^���邱�Ƃ��ł��܂��B�����p�����[�^�̏ڍׂ�3�y�[�W�ڂʼn�����Ă���̂ŁA�����ł�MeshPhongMaterial�i�������͑��́`Material�N���X�j�𐶐����邱�ƂŎ�������`�ł��邱�Ƃ����o���Ă����Ă��������B

�@���̂�Object3D�A�������͂��̔h���N���X�̃C���X�^���X�ł��B�p�r�ɉ����đ����̔h���N���X���p�ӂ���Ă��܂����A��ʓI�ɂ͌`������̂܂ܕ\������Mesh�N���X���g�p���܂��B���̂ɂ͌`��Ǝ��������т‚������������̂ŁA�������R���X�g���N�^�����Ɏw�肵�܂��B�����������̂͂�͂�add()���\�b�h�ŃV�[���ɒlj����Ă����܂��B

�i6�j�����_�����O

�@�����܂łŕ\������V�[���̏������������̂ŁA��������ۂɃ����_�����O���܂��B�P�ɐÎ~�����x�`�悷�邾���Ȃ烌���_����render()��1��Ăяo�������ł��B�������A����ł͂‚܂�Ȃ��̂ŁA�T���v���ł͒n�����������Ɖ�]������A�j���[�V�������������Ă��܂��B

�@WebGL�ł̃A�j���[�V�����́A�O���Canvas API�Ɠ��l�ɏ������•ω������摜���J��Ԃ��`�悷�邱�ƂŎ������܂��B�T���v���ł͕��̂�Y������ɉ�]�����邽�߁Arotation.y�v���p�e�B��ω������Ă��܂��B���l��position�v���p�e�B��ω�������Ε��̂��ړ��ł��܂����A�J�����̃v���p�e�B��ύX����΃V�[�������ړ����Ă����A������E�H�[�N�X���[�A�j���[�V�����ɂȂ�܂��B

�@�`������[�v�����邽�߂Ɏg���Ă���requestAnimationFrame()�́A�O�����������̂Ɠ����ł��BThree.js��ǂݍ��ނ�requestAnimationFrame()�̃��b�p�[�֐����f�t�H���g�Œ�`�����̂ŁA�x���_�[�v���t�B�b�N�X�Ȃ��ŗ��p�ł��܂��B

�@�ȏ�̎菇�Œn���̉�]�A�j���[�V�����������ł��܂��B2�����̃O���t�B�b�N������Canvas API�ȂǂƔ�ׂ�ƃR�[�h�ʂ͑����Ȃ�܂����A�K�v�Œ���̐ݒ��3�����̕��̂��\���ł��邱�Ƃ�������ł��傤�B���̃y�[�W�ȍ~�ł́A����ɍ��x��Three.js�̋@�\��������Ă����܂��B

�@�@�@�@�@�@ 1|2|3|4|5 ���̃y�[�W��

Copyright © ITmedia, Inc. All Rights Reserved.

'; if( !this.isSubscription ) { this.insertTarget = document.querySelector('#cmsBody .subscription') || document.querySelector('#cmsBody .inner'); } }; BodyAdIMSWithCCE.prototype = Object.create(BodyAdContent.prototype); BodyAdIMSWithCCE.prototype.activate = function () { refreshGam('InArtSpecialLink'); } // global reference window.itm = itm; //entry point BodyAdEventBase.polyfill(); const bodyAdManager = BodyAdManager.getInstance(); bodyAdManager.addEventListener(BodyAdManager.EVENTS.READY, function (ev) { bodyAdManager.loadAdvertise(); }); bodyAdManager.init(); })();
�X�|���T�[����̂��m�点PR

���ڂ̃e�[�}

4AI by IT - AIAAA
Microsoft  WindowsőO2025
AI for GWjAO
[R[h^m[R[h Zg by IT - ITGWjArWlX̒SŊ􂷂gD
Cloud Native Central by IT - XP[uȔ\͂gD
�V�X�e���J���m�E�n�E �y�����i�r�zPR
���Ȃ��ɂ������߂̋L��PR

RSS�ɂ‚���

�A�C�e�B���f�B�AID�ɂ‚���

���[���}�K�W���o�^

��IT�̃��[���}�K�W���́A �������A���ׂĖ����ł��B���Ѓ��[���}�K�W�������w�ǂ��������B