【three.js】Blending Modeの種類とその見た目

Blending Modeの種類

THREE.NormalBlending // 線形合成 デフォルト
THREE.NoBlending // アルファブレンドなし
THREE.AdditiveBlending // 加算合成
THREE.SubtractiveBlending // 減算合成
THREE.MultiplyBlending // 積算合成
THREE.CustomBlending // カスタム合成

設定方法

// ex
const material = new THREE.MeshBasicMaterial({
  map: texture,
  blending: THREE.AdditiveBlending // ここ
  // transparent: true,
  // opacity: 0.5
});

注意

• 左側のオブジェクトは全てBlending modeはTHREE.NormalBlending
• それぞれ2枚目の画像は右側のオブジェクトがopacity: 0.5

NormalBlending（デフォルト）

↓opacity: 0.5

NoBlending（アルファブレンドなし）

↓opacity: 0.5

AdditiveBlending（加算合成）

↓opacity: 0.5

SubtractiveBlending（減算合成）

↓opacity: 0.5

MultiplyBlending（積算合成）

↓opacity: 0.5

CustomBlending（カスタム合成のデフォルト）

↓opacity: 0.5

---

• CusomBlending: https://threejs.org/docs/#api/en/constants/CustomBlendingEquations
• 使用画像: https://3.bp.blogspot.com/-R190ri21A2E/W-VEd-3fcEI/AAAAAAABQFw/oy6qtQL5hj0sctWBzol47jIAeOzizcpxwCLcBGAs/s400/kouyou_eda_momiji.png