https://shiroyuki2020.hatenablog.com/entry/introduction_to_threejs

今回は、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
- 光源を表示

参考サイト

Three.js公式サイト