easy-three
Eng日本語

create.cube

create.cube(props : Object) : Mesh

props - 設定オブジェクト。
  • size (Array | Number) : サイズ (デフォルト : 1)。
  • segments (Array | Number) : 角丸部分の分割数 (デフォルト : 1)。
  • rounded (Boolean) : 角丸にするか？ (デフォルト : false)。
  • radius (Number) : 角丸の半径 (デフォルト : 0.1)。
  • position (Array) : 位置 (デフォルト : [0, 0, 0])。
  • rotation (Array) : 回転 (デフォルト : [0, 0, 0])。
  • option (Object) : オプション (デフォルト : {color: Default.color })。
  • material (String | Material | Material[]) : マテリアルタイプ、またはマテリアルオブジェクト、またはマテリアルオブジェクトの配列 (デフォルト :Default.material)。
  • castShadow (Boolean) : 別のオブジェクトに影を落とすかどうか (デフォルト : true)。
  • receiveShadow (Boolean) : 別のオブジェクトからの影を受けるかどうか (デフォルト : true)。
  • doubleSide (Boolean) : 両面表示にするか？ (デフォルト : false)。
  • upsideDown (Boolean) : 裏面表示にするか？ (デフォルト : false)。
  • autoAdd (Boolean) : 自動でシーンに追加 (デフォルト : true)。

キューブ (立方体) を作成してシーンに追加します。
create.box は create.cube のエイリアスです。

size と segments については、通常3つの値を持つ配列で指定します。
配列でなく1つの数値を指定した場合、その値を3つ持つ配列として扱います。
(例 : size: 2 は [2, 2, 2] と同じ)

material には、マテリアルの種類を文字列で指定します。
マテリアルの種類については、Three.js で定義されているものから 「THREE.」と「Mesh」を除いたものになります。
(例 : "Physical" は THREE.MeshPhysicalMaterial を意味します。)
例外として、THREE.NormalMaterial は "Normal" として指定します。

角丸にする場合、segments をある程度高く設定することで、より滑らかな角丸になります。

option に指定する値は、基本的にThree.js のマテリアルのプロパティに対応しています。
詳細はcreate.material を参照してください (create.materialのオプションと同じオプションが指定できます)。

コードの例

立方体の作成

const { camera, create, animate } = init()
camera.position.set(0, 0, 2)
create.ambientLight()
create.directionalLight()

create.cube()

animate()

角丸の立方体

const { camera, create, animate } = init()
camera.position.set(0, 0, 2)
create.ambientLight()
create.directionalLight()

create.cube({
  rounded: true,
  radius: 0.2,
  segments: 16,
});

animate()

アニメーション

const { camera, create, animate } = init()
camera.position.set(0, 0, 2)
create.ambientLight()
create.directionalLight()

const cube = create.cube()

animate(({ delta }) => {
  cube.rotation.x += delta
})

オプションの変更

const { camera, create, animate } = init()
camera.position.set(0, 0, 4);
create.ambientLight();
create.directionalLight();

const cube1 = create.cube({
  size: 1,
  position: [-1, 0, 0],
  material: "Normal",
});

const cube2 = create.cube({
  size: 1.5,
  position: [1, 0, 0],
  option: {
    // material settings
    color: 0x00ff00,
    metalness: 0.6,
    roughness: 0,
    transparent: true,
    opacity: 0.5,
  },
});

const cube3 = create.cube({
  size: 3,
  position: [0, 0, -3],
});

animate(({ time, delta }) => {
  cube1.rotation.x += delta;
  cube2.rotation.y += delta;
  cube3.rotation.x += delta;
  cube3.rotation.z += delta;
  cube3.position.y = Math.sin(time) * 2;
});