元Webデザイナー兼コーダーの備忘録

ウェブデザインやプログラミング、ブログのカスタマイズなどについてアウトプットしています。

 メニュー

» HTML入門のまとめはこちらです。

【Three.js入門】ヘルパー:Helpers

今回は、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);

})();

f:id:shiroyuki2020:20220128144133p:plain

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);

})();

f:id:shiroyuki2020:20220128144135p:plain

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);

})();

f:id:shiroyuki2020:20220128144137p:plain

まとめ

  • GridHelper
    • グリッドを表示
  • AxesHelper
    • x,y,z軸を表示
  • LightHelper
    • 光源を表示

参考サイト

» HTML入門のまとめはこちらです。