three.js入門

基本

全体

JavaScriptを含むHTML全体は次のコードのとおりです。
モジュールはCDNを使っているのであらかじめダウンロードする必要はありません。
スクリプトは次のとおりですが順番は厳密ではありません。最後に描画をセットします。

  • シーンの設定
  • カメラの設定
  • レンダラーの設定
  • ライトの設定
  • 立体の設定
  • 描画
<html>
<body>
<script type="module">
import * as THREE from "https://cdn.jsdelivr.net/npm/three/build/three.module.js";

// シーンの設定
const scene = new THREE.Scene();

// カメラの設定
const camera = new THREE.PerspectiveCamera(
60,
window.innerWidth / window.innerHeight
);
camera.position.set(50, 50, 100);
camera.lookAt(0, 0, 0);

// レンダラーの設定
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// ライトの設定
const directionalLight = new THREE.DirectionalLight(0xffffff);
directionalLight.position.set(120, 150, 100);
scene.add(directionalLight);

// ----立体の設定 ここから----
// 直方体
const boxGeometry = new THREE.BoxGeometry(10, 20, 30);
const boxMaterial = new THREE.MeshStandardMaterial({
color: 0x00ff00,
});
const box = new THREE.Mesh(boxGeometry, boxMaterial);
box.position.set(0, 0, 0);
scene.add(box);
// ----立体の設定 ここまで----

// 描画
renderer.render(scene, camera);
</script>
</body>
</html>

結果

サンプルファイル

座標

座標は右にX、上にY、手前にZとなっています。

立体の設定

サンプルの「立体の設定」のところを書き換えます。
直方体や球体などの、形をgeometryで、材料(表面)をmaterialで設定します。

直方体

大きさ(辺の長さ)はBoxGeometry(X, Y, Z)とします。
位置はposition.set(X, Y, Z)とします。直方体のど真ん中がここになります。角(頂点)ではありません。
色はMeshStandardMaterial({color: color: 0xカラーコード})とします。カラーコードはRGBをそれぞれ2桁の16進数で表します。

// 直方体
const boxGeometry = new THREE.BoxGeometry(10, 20, 30);
const boxMaterial = new THREE.MeshStandardMaterial({
color: 0x00ff00,
});
const box = new THREE.Mesh(boxGeometry, boxMaterial);
box.position.set(0, 0, 0);
scene.add(box);

球体

SphereGeometry(半径, 幅の分割数, 高さの分割数)とします。分割数は32としているケースが多いようです。

// 球体
const ballGeometry = new THREE.SphereGeometry(10, 32, 32);
const ballMaterial = new THREE.MeshStandardMaterial({
color: 0xff0000,
});
const ball = new THREE.Mesh(ballGeometry, ballMaterial);
ball.position.set(0, 0, 0);
scene.add(ball);

円錐

ConeGeometry(半径, 高さ, 分割数)とします。

// 円錐
const coneGeometry = new THREE.ConeGeometry(10, 20, 32);
const coneMaterial = new THREE.MeshStandardMaterial({
color: 0x0000ff,
});
const cone = new THREE.Mesh(coneGeometry, coneMaterial);
cone.position.set(0, 0, 0);
scene.add(cone);

直線

下の例では(0,0,0)から(5,75,100)まで白の線を描きます。

const lineMaterial = new THREE.LineBasicMaterial({ color: 0xffffff });
const points = [];
points.push(new THREE.Vector3(0, 0, 0));
points.push(new THREE.Vector3(50, 75, 100));
const lineGeometry = new THREE.BufferGeometry().setFromPoints(points);
const line = new THREE.Line(lineGeometry, lineMaterial);
scene.add(line);

コメント

タイトルとURLをコピーしました