WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

  • 中
  • 大

さすけ

2026/07/03

【入門】Three.jsの環境構築のやり方とは？初めての方に向けて解説！

投稿者： さすけ
カテゴリー： プログラム >JavaScript

「Webサイトで3D表現を使ってみたい！」そう思ってThree.jsに興味を持ったものの、いざ始めようとすると環境構築でつまずいてしまうことはありませんか？

この記事では、初めての方でも簡単にThree.jsで立方体を表示させるまでの手順を解説します。

Three.jsを始める2つの方法

Three.jsには大きく分けて2つの始め方があります。

  • CDNで読み込む方法： HTMLファイルに1行追加するだけ。環境構築不要で今すぐ試せます。
  • npmでインストールする方法： Viteなどを使って開発環境を構築します。本格的にWebサイト制作を行うならこちらが主流です。

今回は、「まずは動かしてみたい！」という方のために、最も手軽なCDNを使った方法をご紹介します。

Three.jsを動かす手順

以下の2つのファイルを用意するだけで、上記のように緑色の回転している立方体ができます。

① HTMLを用意する (index.html)

まずは土台となるHTMLです。ここで重要なのは、canvas要素を配置することです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Three.js Start!</title>
    <style>body { margin: 0; overflow: hidden; }</style>
</head>
<body>
    <canvas id="webgl"></canvas>
    <script type="importmap">
    {
        "imports": {
            "three": "https://unpkg.com/three@0.160.0/build/three.module.js"
        }
    }
    </script>
    <script type="module" src="main.js"></script>
</body>
</html>

② JavaScriptを書く (main.js)

次に、3Dを描画するためのJavaScriptを書きます。

import * as THREE from 'three';

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

const renderer = new THREE.WebGLRenderer({ canvas: document.querySelector('#webgl') });
renderer.setSize(window.innerWidth, window.innerHeight);

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

function animate() {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
}
animate();

色と質感を変える

環境構築ができ、次にやってみたいのが「自分好みにカスタマイズする」ことですよね。
コードを数行いじるだけで、簡単にカスタマイズすることができます。
今はワイヤーフレーム（線だけの状態）ですが、下記のようにMeshBasicMaterialの設定をいじると簡単に見た目をかえることができます。

// wireframe: true を削除して、別のプロパティを追加
const material = new THREE.MeshBasicMaterial({ 
    color: 0xff0000,      // 色を緑(0x00ff00)から赤(0xff0000)に変更
    transparent: true,    // 透明度を有効にする
    opacity: 0.8          // 少しだけ透けさせる
});

まとめ

まずはこのコードをコピペして、ブラウザで動かしてみてください。
「自分で書いたコードで3Dが動く」という体験ができれば、あとはカメラや光源の設定を変えていくだけで表現の幅は無限に広がります。

次回は、今回作った立方体に「もっと本格的なライティング（光）」を当てて、リッチに見せる方法を解説する予定です。ぜひ楽しみにしていてください！

コーディング業務のご依頼、ご相談の詳細についてはこちらから

Webコーディング代行サービス　クイックアシスト

最後までお読みいただき、ありがとうございました。

お仕事のご相談やご依頼はお気軽にお問い合わせはこちら

よろしければシェアしていただければ幸いです。

  • このエントリーをはてなブックマークに追加

関連記事

よろしければこちらの記事もお読みください。

WEB業界ならqam！qam（カム）はWEB業界で働く人や興味がある人に役立つ情報サイトです。
マーケティングやデザイン、マークアップ（コーディング）、プログラム、トレンドなどの情報をqamライター陣が執筆。噛めば噛むほど（読めば読むほど）制作・開発や運営・運用、業界知識やノウハウを学ぶことができます。

トップへ