立方体の回転

2025/04/20 ThreeJS

HTML

<canvas id="canvas"></canvas>

Three.jsの読み込み

<script type="importmap">
{
    "imports": {
        "three": "https://cdn.jsdelivr.net/npm/three@0.175.0/build/three.module.js"
    }
}
</script>
<script type="module">
import * as THREE from "three";

シーンの作成

const scene = new THREE.Scene();

Perspectiveカメラの作成

const camera = new THREE.PerspectiveCamera(45, width / height);
camera.position.set(0,0, +1000);

WebGLレンダラーの作成

const renderer = new THREE.WebGLRenderer({
    canvas:document.querySelector("#canvas")
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(width, height);

GeometryとMaterialの設定

const geometry = new THREE.BoxGeometry(400, 400, 400); // 幅、高さ、奥行き
const material = new THREE.MeshNormalMaterial(); // 適当なカラーを割り振る
const box = new THREE.Mesh(geometry, material); // GeometryとMaterialでメッシュを作成

Meshをシーンに追加

scene.add(box);

アニメーション

tick(); // 初回実行
function tick() {
    requestAnimationFrame(tick); // 毎フレームtick関数を実行する
    box.rotation.y += 0.01;
    renderer.render(scene, camera); // レンダリング
}

BACK