教育機関向け活用例

3. 球体・平面・角丸立方体などの表示

このセクションでは、球体、平面、そして角丸の立方体を表示する方法を学びます。

球体の表示

球体を表示するには、create.sphere() を使います。

index.html

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

controls.connect()
helper.grid()
helper.axes()
camera.position.set(-2, 2, 2)
create.ambientLight()
create.directionalLight()
create.sphere()

animate()

立方体と同様に、デフォルトでは原点 (0, 0, 0) に表示されます。

サイズ、位置、色の変更

球体のサイズ、位置、色の変更も、立方体と同様にできます。

index.html

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

controls.connect()
helper.grid()
helper.axes()
camera.position.set(-2, 2, 2)
create.ambientLight()
create.directionalLight()
create.sphere({
  size: 0.5,
  position: [1, 1, 1],
  option: {
    color: 0xff0000,
  }
})

animate()

セグメント数の変更

球体のセグメント数を変更することもできます。
3Dの描画では、球体を表現するために多数の平面を使っています。
平面の数が多くなるほど、球体の表現が滑らかになります。
セグメント数とは、球体をどの程度平面に分割するかの数値です。

create.sphere({ segments: [横の分割数, 縦の分割数] })

もし横と縦の分割数が同じ場合は、次のように省略して記述できます。

create.sphere({ segments: 縦横の分割数 })

例えば、次のように記述すると、横4分割、縦2分割の球体が表示されます。

index.html

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

controls.connect()
helper.grid()
helper.axes()
camera.position.set(-2, 2, 2)
create.ambientLight()
create.directionalLight()
create.sphere({ segments: [4, 2] })

animate()

球がどのように分割されているかを確認するには、次のようにワイヤーフレーム表示にするとわかりやすいです。

index.html

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

controls.connect()
helper.grid()
helper.axes()
camera.position.set(-2, 2, 2)
create.ambientLight()
create.directionalLight()
create.sphere({
  segments: 10,
  option: {
    wireframe: true,
    color: 0x0000ff,
  },
})

animate()

平面の表示

球体を表示するには、create.plane() を使います。

index.html

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

controls.connect()
helper.grid()
helper.axes()
camera.position.set(-1, 1, 1)
create.ambientLight()
create.directionalLight()
create.plane()

animate()

立方体と同様に、デフォルトでは原点 (0, 0, 0) に表示されます。
向きは、x-z 平面になります。

サイズ、位置、色の変更

平面のサイズ、位置、色の変更も、立方体と同様にできます。

index.html

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

controls.connect()
helper.grid()
helper.axes()
camera.position.set(-1, 1, 1)
create.ambientLight()
create.directionalLight()
create.plane({
  size: 1.5,
  position: [1, 0, 0],
  option: {
    color: 0xff0000,
  }
})

animate()

平面の回転

rotation を指定することで、平面を回転させることができます。
rotation は、[x, y, z] の配列で指定します。
回転角はラジアンで指定します (つまり、180度が Math.PI です)。

例えば、x軸周りに -90 度回転させることで、x-z 平面上に平面を表示することができます。

index.html

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

controls.connect()
helper.grid()
helper.axes()
camera.position.set(-1, 1, 1)
create.ambientLight()
create.directionalLight()
create.plane({
  size: 1.5,
  rotation: [-Math.PI/2, 0, 0],
})

animate()

回転は、平面以外のオブジェクト(立方体、球など)にも適用できます。

角丸の立方体の表示

立方体を作成するとき、rounded: true を指定することで、角丸の立方体を表示することができます。
segments で角丸の滑らかさを指定します。
radius で角丸の半径を指定します。

index.html

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

controls.connect()
helper.grid()
helper.axes()
camera.position.set(-1, 1, 1)
create.ambientLight()
create.directionalLight()
create.cube({
  rounded: true,
  segments: 7,
  radius: 0.1,
})

animate()

トーラスの表示

トーラスを表示するには、create.torus() を使います。
トーラスは、ドーナツのような形状です。

tube に数値を指定することで、トーラスの太さを調整できます。

index.html

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

controls.connect()
helper.grid()
helper.axes()
camera.position.set(-1, 1, 1)
create.ambientLight()
create.directionalLight()
create.torus({ tube: 0.3 })

animate()

トーラス結び目の表示

トーラス結び目を表示するには、create.torusKnot() を使います。
トーラス結び目は、トーラスを結び目状にした形状です。

tube に数値を指定することで、トーラス結び目の太さを調整できます。

index.html

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

controls.connect()
helper.grid()
helper.axes()
camera.position.set(-1, 1, 1)
create.ambientLight()
create.directionalLight()
create.torusKnot({ tube: 0.3 })

animate()