Three.jsの環境構築｜Vite + npmで最速セットアップ

ターミナルで以下を実行します（Node.jsが入っている前提です）。

npm create vite@latest my-3d-app -- --template vanilla
cd my-3d-app
npm install

--template vanilla は、Reactなどを使わない素のJavaScript構成という意味です。まずはThree.js単体に集中したいので、これで十分です。

続けて、Three.js本体を入れます。

npm install three

これで準備完了。npm run devで開発サーバーが立ち上がり、http://localhost:5173で確認できます。

import "./style.css"; // Viteのテンプレはここでcss を読み込んでいる。消さないこと
import * as THREE from "three";

// シーン・カメラ・レンダラー
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, innerWidth / innerHeight, 0.1, 1000);
camera.position.z = 3;

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

// 箱を置く
const cube = new THREE.Mesh(
  new THREE.BoxGeometry(),
  new THREE.MeshNormalMaterial()
);
scene.add(cube);

// 毎フレーム描画する
renderer.setAnimationLoop(() => {
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
});

最後に、キャンバスを画面いっぱいに広げるため、style.cssの中身も消して1行だけ入れておきます。

<code>body { margin: 0; }

保存すると、ブラウザに色のついた箱がくるくる回っているはずです。これがThree.jsのいちばん小さな「動く世界」です。
つまずいたら、まずブラウザのコンソール（F12）を開いてエラーを確認するのが近道です。多いのはimportのパスミスと、threeのインストール忘れです。