Three.js��WebGL�̏璷�Ȏd�l�����܂����b�v���A�����₷���C���^�[�t�F�C�X�Œ��郉�C�u�������B�T���v���R�[�h�ƌ���ׂȂ���A�����ǂ��w�K���悤
�@�{�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
�@�{�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
�� Web�u���E�U�̐ݒ�ύX�́A�e���̐ӔC�ɂ����čs���Ă��������B�ړI���ς�A���ɖ߂��Ă������Ƃ������߂��܂��B
�@����ł͑����AThree.js���g���Ă݂܂��傤�B�܂��͉��̉摜�̂悤�ɒn���̃e�N�X�`���������̂�\�����āAThree.js�𗘗p�����`�揈���̗�������݂܂��B
�@�ȉ������̃\�[�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
�@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
�@�`��ΏۂƂȂ镨�̂₻�̑��̃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
�@�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
�@���̂��Ƃ炷���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
�@���ۂɒn���Ƃ��ĕ\�����鋅�̂��V�[���ɒlj����܂��BThree.js�ł́A�\�����镨�͎̂�Ɉȉ���3�̗v�f�ō\������܂��B
�@���̂悤��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
�@�����܂łŕ\������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
Copyright © ITmedia, Inc. All Rights Reserved.