参考URL

https://ics.media/tutorial-three/material_variation/

様々なマテリアル

	// マテリアル生成
  const material = new THREE.Mesh~~~Material({
    color: 0x86A8E7,
  });

• Basic

ライティングの影響を受けない、塗りつぶされたマテリアル

• Normal

ノーマルカラーをRGBで可視化する。Obj発光でライティング不要。手軽な動作確認用

• Lambert

ランバートシェーディング。光沢感のないマットな質感。ライト必要で陰影による奥行きを表現

• Phong

フォンシェーディング。光沢感のある質感表現

• Toon

ライト必要。アニメのような

• Standard

ライト必要

現実的な物理現象の再現

prop roughness: 0 ~ 1

0: 光沢

1: マット

様々なライト

• 環境光源

THREE.AmbientLight(0xFFFFFF, 1.0) prop intensity

陰影ができない。立体感なし。他のライトと併用

• 平行光源

	const light = new THREE.DirectionalLight(0x5FFBF1);
  light.intensity = 1; // 光の強さを倍にする
  light.position.set(1, 1, 2); // ライトの方向、始点位置
  scene.add(light); // シーンに追加

特定方向からの光。太陽光のようなもの

• 半球光源；環境光＋反射光

new THREE.HemisphereLight(0xFFFFFF, 0xD16BA5, 1.0);
// props color, reflect-color, intensity

• 点光源；電球光

一点から360度照らす

	const pointLight = new THREE.PointLight(0xff0000, 5, 100, 1.0);
  pointLight.position.set(15, 15, 10);
	// props(color, intensity, distance:光の距離, dicay:減衰率)
	// new THREE.TorusGeometry(10, 3, 16, 40)
	// camera.position.set(0, 0, 200)

	// 照明の可視化ヘルパー
  const lightHelper = new THREE.PointLightHelper(pointLight);
  scene.add(lightHelper);

結構扱い難しい

単体だと周回させないと歪に見える

• スポットライト光源；懐中電灯のようなもの

立体感、臨場感の演出

https://threejs.org/docs/#api/en/lights/SpotLight

	const spotLight = new THREE.SpotLight(0xffffff, 4, 50, Math.PI / 6, 0, 0.5);
  scene.add(spotLight);
  spotLight.position.set(25, 25, 15)

  const lightHelper = new THREE.SpotLightHelper(spotLight);
  scene.add(lightHelper);

props(色, 強さ, 距離, angle(照射角), ボケ度合い:Float, 減衰率:Float)

減衰率が1に近づくほど弱くなる

床作って検証するとわかりやすい

ヘルパークラスのワイヤーフレームで範囲を可視化

Math.PIについて

https://www.javadrive.jp/javascript/math_class/index22.html

• 矩形光源

矩形平面に均一に放出される光源。明るい窓やストリップ照明のシミュレーション

props(color, intensity, width, height)

	const rectLight = new THREE.RectAreaLight(0xFFFFFF, 3.0, 20, 20); 
  rectLight.position.set(20, 20, 20);
  scene.add(rectLight)

補足

サイズ指定した場合、(0, 0, 0)はオブジェクトの中心に来る

影の落とし方

4つの手順

• レンダラーに対してシャドウ有効化

renderer.shadowMap.enabled = true;

• ライトに対して影を有効化：方向をもつライトを利用

spotLight.castShadow = true;

• 影を落とすメッシュに対して影を有効化

castObj.castShadow = true;

• 影を受けるメッシュに対して影を有効化

receiveObj.receiveShadow = true;

影の解像度を指定する：2の累乗

spotLight.shadow.mapSize.width = 2048;
spotLight.shadow.mapSize.height = 2048;

動的な影と静的な影

動的：シャドウマップサイズを利用した計算量が多く自由度の高い影。制度は低い

静的：テクスチャに作成しておくベイク。計算量が少なく高速

様々なカメラ

Perspective

fov = Field of View で視野角を調整　camera.fov = 60

数値が低ければ望遠、高ければ広角

// カメラ作成 params(画角, アスペクト, 描画開始距離, 描画終了距離)
  const camera = new THREE.PerspectiveCamera(
    45, // fov
    width / height,
    1,
    10000
  );

Orthographic：タクティクスゲームのようなビジュアル

	// カメラ作成 params(原点からの描画範囲-left,+right,top,-bottom, 描画開始距離, 描画終了距離)
  const camera = new THREE.OrthographicCamera(
    -240,
    +240,
    135,
    -135,
    1,
    1000
  );

クリッピング

near, far プロップのこと

レンダリングを行う区間距離を制御

フォグ（霧、濃霧）

ピント調整によるボケの演出

奥行きを表現する

具体的に

シーンのfogプロパティにカラー、開始距離、終点距離を指定したTHREE.Fogインスタンスを代入

	//シーン作成
  const scene = new THREE.Scene();
  scene.fog = new THREE.Fog(0x000000, 5, 2000);

Objのランダム追加

	// グループを作成
  const group = new THREE.Group();
  scene.add(group);
  // ジオメトリ生成 props(width, height, depth)
  const geometry = new THREE.TorusGeometry(10, 3, 16, 30);
  // マテリアル生成
  const material = new THREE.MeshStandardMaterial({
    color: 0xD16BA5,
    roughness: 0,
  });
  for (let i = 0; i < 1000; i++) {
    const mesh = new THREE.Mesh(geometry, material);
    mesh.position.x = (Math.random() - 0.5) * 1500;
    mesh.position.y = (Math.random() - 0.5) * 1500;
    mesh.position.z = (Math.random() - 0.5) * 1500;
    mesh.rotation.x = Math.random() * 2 * Math.PI;
    mesh.rotation.y = Math.random() * 2 * Math.PI;
    mesh.rotation.z = Math.random() * 2 * Math.PI;
    // グループに格納する
    group.add(mesh);
  }

スプライト

常に正面を向くオブジェクト ≒ ビルボード

ポリゴン数の節約に効果的。

煙などのパーティクル表現で負荷を抑えることができる

インスタンス化してマテリアルを作成する

// マテリアルを作成する
const material = new THREE.SpriteMaterial({
	map: new THREE.TextureLoader().load('画像パス'),
});

// フォグの適用
material.fog = true;

// マテリアルをコンストラクタで設定してadd()メソッドで追加する
const sprite = new THREE.Sprite(material);

// スケール調整
sprite.scale.set(10, 10, 10);

scene.add(sprite);

TOP PAGE