今回は、3種類の補助機能についてご紹介します。開発段階で使うと便利です。
GridHelper
GridHelperは、平面にグリッドを表示します。グリッドを作ったら、シーンに追加します。コードの記述例は、以下です。
// GridHelper const gridHelper = new THREE.GridHelper(200, 10); scene.add(gridHelper);
(function(){ 'use strict'; const width = 500; //表示領域の幅 const height = 250; //表示領域の高さ // Scene const scene = new THREE.Scene(); // GridHelper const gridHelper = new THREE.GridHelper(200, 10); scene.add(gridHelper); // Camera const camera = new THREE.PerspectiveCamera(45, width/height, 1, 1000); camera.position.set(0, 100, 200); camera.lookAt(scene.position); // Renderer const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(width, height); renderer.setClearColor(0xefefef); renderer.setPixelRatio(window.devicePixelRatio); document.getElementById('stage').appendChild(renderer.domElement); renderer.render(scene, camera); })();
AxesHelper
AxesHelperは、x,y,z軸を表示します。軸を作ったら、シーンに追加します。コードの記述例は、以下です。
// AxesHelper const axesHelper = new THREE.AxesHelper(180); scene.add(axesHelper);
(function(){ 'use strict'; const width = 500; //表示領域の幅 const height = 250; //表示領域の高さ // Scene const scene = new THREE.Scene(); // GridHelper const gridHelper = new THREE.GridHelper(200, 10); scene.add(gridHelper); // AxesHelper const axesHelper = new THREE.AxesHelper(180); scene.add(axesHelper); // Camera const camera = new THREE.PerspectiveCamera(45, width/height, 1, 1000); camera.position.set(200, 100, 200); camera.lookAt(scene.position); // Renderer const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(width, height); renderer.setClearColor(0xefefef); renderer.setPixelRatio(window.devicePixelRatio); document.getElementById('stage').appendChild(renderer.domElement); renderer.render(scene, camera); })();
LightHelper
LightHelperは、光源(照明)を表示します。光源を作ったら、シーンに追加します。コードの記述例は、以下です。
// DirectionalLightHelper const light = new THREE.DirectionalLight(0xffffff); const directionalLightHelper = new THREE.DirectionalLightHelper(light, 10); scene.add(directionalLightHelper);
(function(){ 'use strict'; const width = 500; //表示領域の幅 const height = 250; //表示領域の高さ // Scene const scene = new THREE.Scene(); // Mesh const sphere = new THREE.Mesh( new THREE.SphereGeometry(60, 20, 20), new THREE.MeshLambertMaterial({color: 0x0000ff}) ); sphere.position.set(0, 0, 0); scene.add(sphere); // Camera const camera = new THREE.PerspectiveCamera(45, width/height, 1, 1000); camera.position.set(0, 100, 300); camera.lookAt(scene.position); // Light const light = new THREE.DirectionalLight(0xffffff); light.position.set(100, 100, 100); scene.add(light); // GridHelper const gridHelper = new THREE.GridHelper(200, 10); scene.add(gridHelper); // AxesHelper const axesHelper = new THREE.AxesHelper(180); scene.add(axesHelper); // DirectionalLightHelper const directionalLightHelper = new THREE.DirectionalLightHelper(light, 10); scene.add(directionalLightHelper); // Renderer const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(width, height); renderer.setClearColor(0xaaaaaa); renderer.setPixelRatio(window.devicePixelRatio); document.getElementById('stage').appendChild(renderer.domElement); renderer.render(scene, camera); })();
まとめ
- GridHelper
- グリッドを表示
- AxesHelper
- x,y,z軸を表示
- LightHelper
- 光源を表示