序章：

Three.js は、Web ブラウザーでインタラクティブな 3D グラフィックスやアニメーションを作成するための強力な JavaScript ライブラリです。Three.js を使用すると、グラフィックスプログラミングのスキルがなくても、見事な 3D シーンを簡単に構築できます。

この記事では、簡単な 3D シーンの作成から始めて、Three.js の使用を開始する方法を段階的に説明します。

ステップの作成

Three.js を使用して最初の 3D シーンを作成する方法について説明します。Three.js は、Web 上で 3D シーンやインタラクティブなアニメーションを作成するのに役立つ WebGL ベースの JavaScript ライブラリです。

1. Three.js ライブラリの導入

まず、HTML ファイルに Three.js ライブラリを含める必要があります。これは、CDN を使用するか、ライブラリファイルをダウンロードすることによって実現できます。ここでは、CDN メソッドを使用して Three.js ライブラリをインポートします。
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My First Three.js Scene</title>
    <style>
      body { margin: 0; }
      canvas { width: 100%; height: 100%; }
    </style>
  </head>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
    <script>
      // Three.js code here
    </script>
  </body>
</html>

2 シーンオブジェクトを作成する

次に、シーンオブジェクト、カメラオブジェクト、レンダラーオブジェクトを作成する必要があります。シーンオブジェクトはすべての 3D オブジェクトを保存および管理するために使用されるコンテナであり、カメラオブジェクトは視点とシーンを観察する位置と方向を定義するために使用され、レンダラーオブジェクトはシーンとカメラをレンダリングするために使用されます。
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

3 ジオメトリオブジェクトを追加する

シーンにジオメトリオブジェクトを追加するには、Three.js が提供するジオメトリ作成機能を使用し、マテリアルオブジェクトを設定します。ここでは、単純な立方体をジオメトリオブジェクトとして使用します。
var geometry = new THREE.BoxGeometry();
var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

4. カメラの設定

最後に、カメラの位置を設定し、レンダラーを起動してシーンとカメラをレンダリングする必要があります。カメラの位置を設定することで、視点やシーンを観察する方向を変更できます。ここでは、カメラの位置を Z 軸上で 5 単位に設定します。
camera.position.z = 5;
function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();

5 まとめ

これらは、最初の 3D シーンを作成するための基本的な手順です。完全なコードは次のとおりです。
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My First Three.js Scene</title>
    <style>
      body { margin: 0; }
      canvas { width: 100%; height: 100%; }
    </style>
  </head>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
    <script>
      var scene = new THREE.Scene();
      var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
      var renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);

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

      camera.position.z = 5;

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

      animate();
    </script>
  </body>
</html>
この簡単な例を通して、Three.js が Web 上で 3D シーンやインタラクティブなアニメーションを作成するのにどのように役立つかを理解できます。ジオメトリオブジェクトやマテリアルオブジェクトのプロパティ、カメラの位置や方向を変更することで、より複雑で豊かな 3D シーンを作成できます。

例

シンプルな星空

以下は Three.js の簡単な星空の例です。星がきらめく星空の背景を作成します。

<!DOCTYPE html>
<html>
<head>
    <title>Three.js星空示例</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <script src="https://threejs.org/build/three.js"></script>
    <script>
        // 创建场景
        var scene = new THREE.Scene();

        // 创建透视相机
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

        // 创建WebGL渲染器
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);

        // 将渲染器添加到HTML页面中
        document.body.appendChild(renderer.domElement);

        // 创建星星材质
        var starMaterial = new THREE.PointsMaterial({
            color: 0xffffff,
            size: 0.1
        });

        // 创建星星几何体
        var starGeometry = new THREE.BufferGeometry();
        var starVertices = [];
        for (var i = 0; i < 1000; i++) {
            var x = (Math.random() - 0.5) * 2000;
            var y = (Math.random() - 0.5) * 2000;
            var z = (Math.random() - 0.5) * 2000;
            starVertices.push(x, y, z);
        }
        starGeometry.setAttribute('position', new THREE.Float32BufferAttribute(starVertices, 3));

        // 创建星星点云对象
        var stars = new THREE.Points(starGeometry, starMaterial);

        // 将星星点云对象添加到场景中
        scene.add(stars);

        // 将相机位置设为z轴向后200个单位，使星空在视野内
        camera.position.z = 200;

        // 添加动画效果，使星星闪烁
        function animate() {
            requestAnimationFrame(animate);

            // 让星星随机闪烁
            stars.rotation.x += 0.001;
            stars.rotation.y += 0.001;

            // 渲染场景
            renderer.render(scene, camera);
        }

        // 调用动画函数
        animate();
    </script>
</body>
</html>

彩色星空

<!DOCTYPE html>
<html>
<head>
    <title>五彩宇宙星空 - Three.js示例</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <script src="https://threejs.org/build/three.js"></script>
    <script>
        // 创建场景
        var scene = new THREE.Scene();

        // 创建透视相机
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

        // 创建WebGL渲染器
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);

        // 将渲染器添加到HTML页面中
        document.body.appendChild(renderer.domElement);

        // 创建粒子材质
        var particleMaterial = new THREE.PointsMaterial({
            size: 2,
            vertexColors: true, // 开启顶点颜色，使每个粒子有不同的颜色
            transparent: true,
            opacity: 0.7
        });

        // 创建粒子几何体
        var particleGeometry = new THREE.BufferGeometry();
        var particleVertices = [];
        var colors = [];
        for (var i = 0; i < 1000; i++) {
            var x = (Math.random() - 0.5) * 2000;
            var y = (Math.random() - 0.5) * 2000;
            var z = (Math.random() - 0.5) * 2000;
            particleVertices.push(x, y, z);

            // 为每个粒子随机生成一个五颜六色的颜色
            var color = new THREE.Color();
            color.setRGB(Math.random(), Math.random(), Math.random());
            colors.push(color.r, color.g, color.b);
        }
        particleGeometry.setAttribute('position', new THREE.Float32BufferAttribute(particleVertices, 3));
        particleGeometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3));

        // 创建粒子系统对象
        var particles = new THREE.Points(particleGeometry, particleMaterial);

        // 将粒子系统对象添加到场景中
        scene.add(particles);

        // 将相机位置设为z轴向后1000个单位，使星空在视野内
        camera.position.z = 1000;

        // 添加动画效果，让粒子随机闪烁
        function animate() {
            requestAnimationFrame(animate);

            // 使粒子随机闪烁
            particles.rotation.x += 0.001;
            particles.rotation.y += 0.001;

            // 渲染场景
            renderer.render(scene, camera);
        }

        // 调用动画函数
        animate();
    </script>
</body>
</html>

[Three.js の基礎入門]: 初めての 3D シーンを作成する

序章：

ステップの作成

1. Three.js ライブラリの導入

2 シーンオブジェクトを作成する

3 ジオメトリオブジェクトを追加する

4. カメラの設定

5 まとめ

例

シンプルな星空

彩色星空

おすすめ