球体を表示する

※前回記事とはディレクトリ構成が異なっています。

C:.
    index.html
    main.js

①htmlファイル作成

公式ドキュメント：Before we start

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>My first three.js app</title>
    <style>
      body {
        margin: 0;
      }
    </style>
  </head>
  <body>
    <script src="./main.js" type="module"></script>
  </body>
</html>

②Three.jsを用意

前回はローカルに用意しましたが、せっかくなのでimport文からCDNで読み込みます。

main.js

import * as THREE from "https://unpkg.com/three@0.127.0/build/three.module.js";

③scene、camera、renderer作成

詳細は前回を参照ください。

差分としては、カメラのマウス制御を可能にするOrbitControlsをCDNで追加しています。
公式ドキュメント：OrbitControls

main.js

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(75, 20, 0);

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// cameraをマウス操作で制御
import { OrbitControls } from "https://unpkg.com/three@0.127.0/examples/jsm/controls/OrbitControls.js";
const controls = new OrbitControls(camera, renderer.domElement);

④球体を作成

THREE.SphereGeometryで球体を指定します。
また、renderer.render(scene, camera);でレンダリング処理を行います。

公式ドキュメント：SphereGeometry

main.js

const Sphere = new THREE.Mesh(
  new THREE.SphereGeometry(5, 32, 32),
  new THREE.MeshStandardMaterial({ color: 0xffffff })
);
Sphere.position.set(0, 5, 0);
scene.add(Sphere);

// フレーム毎の処理
const animate = () => {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
};
animate();

⑤光源を追加

しかし、現時点では何も表示されません。なぜでしょう。

実は3D空間に光源がないからです。
ということで、空側の色と地面側の色を設定できるHemisphereLightを追加します。

公式ドキュメント：HemisphereLight

main.js

const hemisphereLight = new THREE.HemisphereLight(
  /* sky color = */ 0x51a8dd,
  /* ground color = */ 0xe83015
);
scene.add(hemisphereLight);

表示されるようになりました！
また、クリックしながらぐりぐりすると様々な角度から見られます。

ここまでのmain.jsは以下の通り。

main.js

import * as THREE from "https://unpkg.com/three@0.127.0/build/three.module.js";
import { OrbitControls } from "https://unpkg.com/three@0.127.0/examples/jsm/controls/OrbitControls.js";

// scene、camera、rendererを用意
const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(
  60,
  window.innerWidth / window.innerHeight,
  1,
  1000
);
camera.position.set(75, 20, 0);

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// cameraをマウス操作で制御
const controls = new OrbitControls(camera, renderer.domElement);

// 球体を配置
const Sphere = new THREE.Mesh(
  new THREE.SphereGeometry(5, 32, 32),
  new THREE.MeshStandardMaterial({ color: 0xffffff })
);
Sphere.position.set(0, 5, 0);
scene.add(Sphere);

// sky color と ground color を設定
const hemisphereLight = new THREE.HemisphereLight(
  /* sky color = */ 0x51a8dd,
  /* ground color = */ 0xe83015
);
scene.add(hemisphereLight);

// フレーム毎の処理
const animate = () => {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
};
animate();

GUIでパラメータ調整

それでは、光源の色をGUIで調整できるようにします。

⑥GUIを用意

以下をコピペするだけなので説明は省略します。
※見づらいですが画面右上に「Close Controls」と出ます。

main.js

import { GUI } from "https://unpkg.com/three@0.127.0/examples/jsm/libs/dat.gui.module.js";

const gui = new GUI({ width: 300 });
gui.open();

⑦パラメータ設定

GUIで調整するパラメータを設定します。
HemisphereLightのPropertiesを参照したところ、hemisphereLight.colorと.groundColorでそれぞれ設定するようです。

main.js

let param = {
  "sky color": hemisphereLight.color.getHex(),
  "ground color": hemisphereLight.groundColor.getHex(),
};

gui.addColor(param, "sky color").onChange((val) => {
  hemisphereLight.color.setHex(val);
});

gui.addColor(param, "ground color").onChange((val) => {
  hemisphereLight.groundColor.setHex(val);
});

できました！！

まとめ

GUI操作によるパラメータ調整のおかげで仕上がりの確認が格段に速くなりますね
ゆくゆくは好きな生き物を動かしたりしたいですが、いつになるやら...