この記事を参考に、
x,y,z軸の表示や、グリッド平面を表示してみる。
まず、前記事の、カメラアングルを変える、のコードを元に、
html
<html>
<head>
<meta charset="utf-8" />
<script type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.164.1/examples/jsm/"
}
}
</script>
<script type="module">
import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
// サイズを指定
const width = 960;
const height = 540;
// レンダラーを作成
const canvasElement = document.querySelector("#myCanvas");
const renderer = new THREE.WebGLRenderer({
canvas: canvasElement,
});
renderer.setSize(width, height);
// シーンを作成
const scene = new THREE.Scene();
// カメラを作成
const camera = new THREE.PerspectiveCamera(45, width / height);
// カメラの初期座標を設定
camera.position.set(0, 0, 1000);
// カメラコントローラーを作成
const controls = new OrbitControls(camera, canvasElement);
// 形状とマテリアルからメッシュを作成します
const mesh = new THREE.Mesh(new THREE.BoxGeometry(300, 300, 300), new THREE.MeshNormalMaterial());
scene.add(mesh);
tick();
// 毎フレーム時に実行されるループイベントです
function tick() {
// レンダリング
renderer.render(scene, camera);
requestAnimationFrame(tick);
}
</script>
</head>
<body>
<canvas id="myCanvas"></canvas>
</body>
</html>
CodePen で書いた
See the Pen three.js 入門 2_1 by sasuke (@vhmbdiog-the-flexboxer) on CodePen.
軸を追加してみる。
AxesHelperと言うヘルパーを使う。
js
//軸を追加する。
const axesHelper = new THREE.AxesHelper( 1000 );
scene.add( axesHelper );
AxesHelperのコンストラクタの引数は線のサイズ。
X軸が赤、Y軸が緑、Z軸が青、とのこと。
CodePen で書いた
See the Pen three.js 入門 4_1 by sasuke (@vhmbdiog-the-flexboxer) on CodePen.
グリッド平面を追加してみる。
GridHelperというヘルパーを使う。
js
//グリッドを追加する。
const gridHelper = new THREE.GridHelper(2000, 50, 0xffff00)
scene.add(gridHelper);
引数は、
GridHelper (サイズ、分割数、colorCenterLine、colorGrid)
とのこと。
（colorCenterLineのデフォルト色が暗めでわかりにくいので黄色（0xffff00）にしてある。）
注意点
GridHelper の第1引数のサイズが、箱の大きさよりも小さいと、グリッドが見えないので注意！
グリッドサイズ80のとき。
はじめ、コードが間違っているのかと焦りましたが、グリッドのサイズが小さくて箱に隠れていただけでした。
(箱の大きさは300,300,300)
グリッドサイズ700のとき。
グリッドサイズ2000のとき。
CodePen で書いた
See the Pen three.js 入門 4_2 by sasuke (@vhmbdiog-the-flexboxer) on CodePen.