こんにちわ、てぬ太
です。
この記事は前回の続きとして、球体の表示およびGUIによるパラメータ調整を行うまでの過程を示します。
【目次】
球体を表示する
①HTMLファイル作成
②Three.jsを用意
③scene、camera、renderer作成
④球体を作成
⑤光源を追加
GUIでパラメータ調整
⑥GUIを用意
⑦パラメータ設定
まとめ
【github】
https://github.com/tenugui-taro/threejs_sample_public/tree/master/02
【前回記事】
Three.jsことはじめ
球体を表示する
※前回記事とはディレクトリ構成が異なっています。
C:.
index.html
main.js
①htmlファイル作成
公式ドキュメント：Before we start
<!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で読み込みます。
import * as THREE from "https://unpkg.com/three@0.127.0/build/three.module.js";
③scene、camera、renderer作成
詳細は前回を参照ください。
差分としては、カメラのマウス制御を可能にするOrbitControlsをCDNで追加しています。
公式ドキュメント：OrbitControls
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
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
const hemisphereLight = new THREE.HemisphereLight(
/* sky color = */ 0x51a8dd,
/* ground color = */ 0xe83015
);
scene.add(hemisphereLight);
表示されるようになりました！
また、クリックしながらぐりぐりすると様々な角度から見られます。
ここまでの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」と出ます。
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でそれぞれ設定するようです。
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操作によるパラメータ調整のおかげで仕上がりの確認が格段に速くなりますね
ゆくゆくは好きな生き物を動かしたりしたいですが、いつになるやら...