教育機関向け活用例

1. プログラムの基礎と立方体の表示

このセクションでは、easy-threeライブラリを使用して、シンプルな立方体を表示する方法を学びます。
以下のサンプルコードを使って、基本的な3D描画の手法を理解しましょう。

サンプルコードを開く

index.htmlというファイルを作成し、以下のコードを記述してください。

index.html

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>easy-three template</title>
  <script type="importmap">
    {
      "imports": {
        "three": "https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js",
        "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/",
        "@pixiv/three-vrm": "https://cdn.jsdelivr.net/npm/@pixiv/three-vrm@3/lib/three-vrm.module.min.js",
        "easy-three": "https://cdn.jsdelivr.net/gh/masabando/easy-three@1.1.4/dist/easy-three.js"
      }
    }
  </script>
</head>

<body>
  <script type="module">
    import { init } from "easy-three";
    const { camera, create, animate } = init();

    camera.position.set(-2, 2, 2)
    create.ambientLight()
    create.directionalLight()
    create.cube()

    animate()
  </script>
</body>

</html>

このコードは、easy-threeライブラリを使って立方体を表示するための小さなコードです。
このコードを実行してみましょう。

VSCodeであれば、VSCodeの右下にある「Go Live」ボタンをクリックするとWebブラウザに立方体が表示されます。

Pythonであれば、index.htmlがあるフォルダで以下のコマンドを実行し、ターミナルに表示されたURLにアクセスしてください。

python -m http.server

Node.jsであれば、index.htmlがあるフォルダで以下のコマンドを実行し、ターミナルに表示されたURLにアクセスしてください。

npx http-server

ローカルサーバを使用しない場合、index.htmlファイルをWebブラウザにドラッグ＆ドロップしてください。

テンプレート部分とプログラム部分

サンプルコードは一見長いように見えますが、実際のところほとんどの部分はコピー＆ペーストで使用できるテンプレートです。

実際にプログラムを書く部分は、下の「ここでプログラムを書く」部分だけになります。

index.html

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>easy-three template</title>
  <script type="importmap">
    {
      "imports": {
        "three": "https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js",
        "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/",
        "@pixiv/three-vrm": "https://cdn.jsdelivr.net/npm/@pixiv/three-vrm@3/lib/three-vrm.module.min.js",
        "easy-three": "https://cdn.jsdelivr.net/gh/masabando/easy-three@0.0.14/dist/easy-three.js"
      }
    }
  </script>
</head>

<body>
  <script type="module">
    import { init } from "easy-three";

    // ここでプログラムを書く

  </script>
</body>

</html>

つまり、上のサンプルコードで、大切な部分は以下の部分だけになります。

index.html

const { camera, create, animate } = init();

camera.position.set(-2, 2, 2)
create.ambientLight()
create.directionalLight()
create.cube()

animate()

そのため、今後の解説ではテンプレート部分は省略し、上記のようにプログラムを書く部分だけを表示・解説します。

プログラムの概要

3Dの描画は、3次元の座標を使ってオブジェクトやカメラなどを配置することで行います。
つまり、x座標、y座標、z座標を指定することになります。

通常x軸は左右、y軸は上下、z軸は前後を表しますが、カメラを動かすことで見え方は変わります。

easy-threeでは基本的にプログラムを

オブジェクトやグループ.すること(指定すること)

あるいは

一連の処理(指定すること)

のような形で記述します。

特に、なにかを作り出すときは

create.何か()

のように記述します。

カメラの設置

3Dの描画では、空間上の視点をカメラで設定することが重要です。

camera.position.set(-2, 2, 2)

このコードは、カメラ(camera)の位置(position)を x=-2, y=2, z=2 の位置に設定(set)しています。

カメラは原点(0, 0, 0)を見るように設定されてるため、カメラは自分の右前ななめ下を見ています。

やってみよう

カメラの位置を変更して、立方体がどのように表示されるか確認してみましょう。
例えば、カメラの位置を (-3, -3, 5) に変更してみましょう。

変更後は、保存すると自動的にブラウザが更新され、立方体が新しい位置で表示されます。
(自動的に更新されない場合は、ブラウザを再読み込みしてください。)

環境光と指向性光

3Dの描画では、環境光と指向性光を設定することで、オブジェクトの立体感や影を表現することができます。
現実の世界と同じで、光がないと物体は黒く見えます。

環境光とは、全体をまんべんなく照らす光です。
現実でも、部屋の電気が消えていても外からの光が入ってくるため、真っ暗にはなりません。
このような光を環境光と言います。

環境光を作るには、以下のようにします。

create.ambientLight()

環境光では影はできません。

指向性光とは、特定の方向からのまっすぐな光です。
例えば、太陽光や蛍光灯の光などが指向性光です。
指向性光は、向きがあるため、光があたっていない部分は影になります。

指向性光を作るには、以下のようにします。

create.directionalLight()

指向性光では影ができます。

どちらの光も、光の強さ(intensity)を指定することができます。

create.ambientLight({ intensity: 2 })

create.directionalLight({ intensity: 2 })

また、指向性光の位置(position)を変更することもできます。

create.directionalLight({ position: [10, 10, -10] })

指向性光の位置と強さを両方変更するには、これらの指定をカンマで区切って記述します。

create.directionalLight({ intensity: 2, position: [10, 10, -10] })

あるいは、改行して記述することもできます。

create.directionalLight({
  intensity: 2,
  position: [10, 10, -10]
})

やってみよう

環境光の強さ、指向性光の強さと位置を変更して、立方体がどのように表示されるか確認してみましょう。
例えば、環境光の強さを 0.1 に、指向性光の強さを 3 に, 指向性光の位置を [-5, 5, -5] に変更してみましょう。

立方体の表示

立方体を作り出すには、以下のようにします。

create.cube()

立方体は、デフォルトでは中心が原点(0, 0, 0)、サイズが1になります。

サイズと位置の変更

立方体のサイズを変更するには、次のようにします。

create.cube({ size: 2 })

このコードは、サイズが2の立方体を作り出します。

立方体の位置を変更するには、次のようにします。

create.cube({ position: [1, 1, 1] })

このコードは、位置が(1, 1, 1)の立方体を作り出します。

サイズと位置を両方変更するときは、これらの指定をカンマで区切って記述します。

create.cube({ size: 2, position: [1, 1, 1] })

このコードは、サイズが2で位置が(1, 1, 1)の立方体を作り出します。

プログラムは意味が変わらない範囲で改行ができます。
2つ以上のものを変更するときは、次のように改行したほうが分かりやすいでしょう。

create.cube({
  size: 2,
  position: [1, 1, 1]
})

色の変更

立方体の色を変更するには、次のようにします。

create.cube({
  option: { color: "red" }
})

このコードは、赤色の立方体を作り出します。
このように、色は英語の名前でしていすることができますが、16進数で指定することもできます。
16進数で指定するときは、0x を先頭に付けて、0xff0000 のように記述します。 2桁ずつ、赤、緑、青の順に指定します。

create.cube({
  option: { color: 0xff0000 }
})

このコードは、赤色の立方体を作り出します。あるいは、次のように記述することもできます。

create.cube({
  option: { color: "#ff0000" }
})

色については、WEB色見本原色大辞典などのサイトで色を調べることができます。

直方体の作成

3辺の長さを変えることで、立方体ではなく直方体を作ることもできます。

create.cube({ size: [2, 3, 4] })

このコードは、x軸方向に2、y軸方向に3、z軸方向に4の直方体を作り出します。

create.cubeは何度でも呼び出すことができます。
呼び出した分だけ立方体や直方体が表示されます。

やってみよう

赤、緑、青の立方体または直方体をそれぞれ作成して、それぞれの位置やサイズを変えて表示してみましょう。
赤は "red" または 0xff0000 、緑は "green" または 0x00ff00 、青は "blue" または 0x0000ff で指定します。

初期化

ここまでの内容で、カメラの位置、環境光、指向性光、立方体の表示を行いました。
このセクションの最後に、プログラムの1行目と最終行について説明します。

index.html

const { camera, create, animate } = init();

camera.position.set(-2, 2, 2)
create.ambientLight()
create.directionalLight()
create.cube()

animate()

1行目の

const { camera, create, animate } = init();

は、easy-threeライブラリを初期化して、カメラ(camera)、オブジェクト等を作成するためのオブジェクト(create)、アニメーション(animate)を行うための関数を取得しています。

簡単に言うと、この1行目は「プログラム中でつかうものを用意する」行です。
今回は、カメラ、オブジェクト、アニメーションを使うために、camera、create、animate を用意しています。

最終行の

animate()

は、アニメーションを開始するための関数です。
この関数を呼び出すことで、アニメーションが開始されます。

原則として animate は必ず最後に呼び出すようにします。