three.js

環境構築

インポート

// three.js のモジュールインポート
import * as THREE from "../threejs/build/three.module.js";

html で 呼び出すとき、body タグ内に書くと背景が描画されないことがあった。原因はまだ調べてない。

URL で読み込むなら下記。

<script src="https://unpkg.com/three@0.137.4/build/three.min.js"></script>

シーン

// シーンの作成
scene = new THREE.Scene();

// シーンへメッシュを追加
scene.add(hogeMesh)

ジオメトリ

// スフィアの作成
let sphereGeometry = new THREE.SphereGeometry(100, 64, 32)

マテリアル

Mesh Pysical Material

PBR マテリアル。メタルネス & ラフネス。

マテリアルの割り当て

// マテリアルの割り当て
let hogeMesh = new THREE.Mesh(hogeGeometry, hogeMaterial);

three.js では ジオメトリにマテリアルを割り当てたものをメッシュと呼んでるっぽい。

テクスチャ

ライト

ディレクショナルライト

// ディレクショナルライトの作成
let directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(1, 1, 1);

ポイントライト

// ポイントライトの作成
pointLight = new THREE.PointLight(0xffffff, 1)
pointLight.position.set(-200, -200, -200);
scene.add(pointLight)

// ポイントライトの視覚化
let pointLightHelper = new THREE.PointLightHelper(pointLight, 30);
scene.add(pointLightHelper)

// ポイントライトを周回させる
function animate() {
    pointLight.position.set(
        200 * Math.sin(Date.now() / 500),
        200 * Math.sin(Date.now() / 1000),
        200 * Math.cos(Date.now() / 500),
    );
    requestAnimationFrame(animate);

    // レンダリング
    renderer.render(scene, camera)
}
animate();

後で動かす場合はグローバルで宣言すること。

カメラ

// カメラの追加
let camera = new THREE.PerspectiveCamera(
    50, // 視野角
    window.innerWidth / window.innerHeight, // 画面いっぱいのアスペクト比
    0.1, // 開始距離
    1000 // 終了距離
);

カメラは作成後に設定を変更する場合は随時アップデートコマンドが必要になる。
→camera.updateProjectionMatrix();

レンダラー

// レンダラーの追加
renderer = new THREE.WebGLRenderer({alpha: true});

// ウィンドウサイズに応じて解像度を調整する
renderer.setPixelRatio(window.devicePixelRatio)

// レンダラーのセット
document.body.appendChild(renderer.domElement);

// canvas を指定して設置
const renderer = new THREE.WebGLRenderer({
  canvas: document.querySelector('#myCanvas')
});

マウス操作

// OrbitControls のインポート
import { OrbitCOntrols} from "../jsm/controls/OrbitControls.js";

その他

移動させる

// 移動
hoge.position.set(0, 0, 500)

ウィンドウのリサイズに対応させる

// ブラウザのリサイズした時の処理
function onWindowResize() {

    // レンダラーのサイズ変更
    renderer.setSize(window.innerWidth, window.innerHeight)

    // カメラのアスペクト比の更新
    camera.aspect = window.innerWidth / window.innerHeight;

    // カメラ設定の更新
    camera.updateProjectionMatrix();
}