【初学者向け】Three.jsで3D空間に光源を追加する

let scene, camera, renderer
 
window.addEventListener("load", init)
 
function init() {
  // シーン
  scene = new THREE.Scene()
 
  // カメラ
  camera = new THREE.PerspectiveCamera(
    50, //視野角
    window.innerWidth / window.innerHeight, //アスペクト比
    0.1, //開始地点
    1000, //終了地点
  )
 
  //レンダラー
  renderer = new THREE.WebGLRenderer()
  renderer.setSize(window.innerWidth, window.innerHeight)
  document.body.appendChild(renderer.domElement)
  renderer.setPixelRatio(devicePixelRatio) //デバイスの解像度に最適化する
  renderer.setClearColor(0x000000, 1) //背景色を黒に設定（第1引数：色、第2引数：透明度）
 
  //ジオメトリ
  let ballGeometry = new THREE.SphereGeometry(100, 64, 32) //球体のジオメトリの設定
 
  //マテリアル
  let texture = new THREE.TextureLoader().load("./textures/Water.jpg") //画像の読み込み
  let ballMaterial = new THREE.MeshPhysicalMaterial({
    map: texture, // 画像の指定
    color: 0x66ffff, // 青色を追加
    metalness: 0.4, // 金属度を低く設定
    roughness: 0.5, // 粗さを中程度に設定
  })
}
 
function animate() {
  // フレーム単位でアニメーションを読み込む
  requestAnimationFrame(animate)
  //レンダリングの記述
  renderer.render(scene, camera)
}

//環境光の追加
const ambientLight = new THREE.AmbientLight(0xffffff, 0.8) //環境光源の呼び出し、第一引数:光源の色、第二引数:光の強さ
scene.add(ambientLight) //Sceneに追加

//平行光源の追加
const directionalLight = new THREE.DirectionalLight(0xffffff, 3) //平行光源の呼び出し、第一引数:光源の色、第二引数:光の強さ
directionalLight.position.set(5, 10, 7.5) //光源の位置の指定、第一引数:X軸、第二引数:Y軸、第三引数:Z軸
scene.add(directionalLight) //Sceneに追加

const pointLight = new THREE.PointLight(0xffffff, 5, 1000, 1.0) //点光源の呼び出し、第一引数:光源の色、第二引数:光の強さ、第三引数:距離、第四引数:減衰率
pointLight.position.set(0, 0, 500) //光源の位置の指定、第一引数:X軸、第二引数:Y軸、第三引数:Z軸
scene.add(pointLight) //Sceneに追加

const spotLight = new THREE.SpotLight( //スポット光源の呼び出し
  0xffffff, // 第一引数:光源の色、
  1, // 第二引数:光の強さ
  500, // 第三引数:最大距離
  Math.PI / 10, // 第四引数:角度
  0.5, // 第五引数:エッジのぼかし具合
  0, // 第六引数:減衰率
)
spotLight.position.set(100, 100, 300) //光源の位置の指定、第一引数:X軸、第二引数:Y軸、第三引数:Z軸
scene.add(spotLight) //Sceneに追加

const spotLightHelper = new THREE.SpotLightHelper(spotLight) //スポット光源のHelper関数の呼び出し
scene.add(spotLightHelper) //Sceneに追加

const hemisphereLight = new THREE.HemisphereLight(0x0000ff, 0x00ff00, 1) //半球光源の呼び出し、第一引数:上方向の光源の色、第二引数:下方向の光源の色、第三引数:光の強さ
hemisphereLight.position.set(0, 10, 0) //光源の位置の指定、第一引数:X軸、第二引数:Y軸、第三引数:Z軸
scene.add(hemisphereLight) //Sceneに追加

const rectLight = new THREE.RectAreaLight( //矩形光源の呼び出し
  0xffffff, // 第一引数:光源の色
  2, // 第二引数:光の強さ
  100, // 第三引数:光源幅
  100, // 第四引数:光源高さ
)
rectLight.position.set(0, -100, 100) //光源の位置の指定、第一引数:X軸、第二引数:Y軸、第三引数:Z軸今回は下から照らしています
rectLight.rotation.x = Math.PI * 0.5 // 光源の角度
scene.add(rectLight) // 光源をシーンに追加

// 環境光源
const ambientLight = new THREE.AmbientLight(0x404040, 0.5)
scene.add(ambientLight)
 
// 平行光源
const mainLight = new THREE.DirectionalLight(0xffffff, 1)
mainLight.position.set(5, 10, 7.5)
scene.add(mainLight)
 
// 半球光源
const hemisphereLight = new THREE.HemisphereLight(0x8888ff, 0x444422, 0.5)
scene.add(hemisphereLight)
 
// 点光源
const pointLight = new THREE.PointLight(0xffffff, 5, 2000, 0.5)
pointLight.position.set(200, 200, 200)
scene.add(pointLight)

let scene, camera, renderer, controls, pointLight //pointLightをグローバルに扱うようにする
 
function init() {
  //省略
  pointLight = new THREE.PointLight(0xffffff, 5, 2000, 0.5)
  //pointLight.position.set(200, 200, 200); positionを削除
  scene.add(pointLight)
 
  //Helper関数
  //const pointLightHelper = new THREE.PointLightHelper(pointLight, 20);
  //scene.add(pointLightHelper);
 
  //省略
}
 
function animate() {
  //ポイント光源の座標を動かす
  pointLight.position.set(
    200 * Math.sin(Date.now() / 1000),
    200 * Math.sin(Date.now() / 1000),
    200 * Math.cos(Date.now() / 1000),
  )
 
  //省略
}

let scene, camera, renderer, pointLight
 
window.addEventListener("load", init)
 
function init() {
  // シーン
  scene = new THREE.Scene()
 
  // カメラ
  camera = new THREE.PerspectiveCamera(
    50, //視野角
    window.innerWidth / window.innerHeight, //アスペクト比
    0.1, //開始地点
    1000, //終了地点
  )
  //カメラの位置の変更
  camera.position.set(0, 0, +500)
 
  //レンダラー
  renderer = new THREE.WebGLRenderer()
  renderer.setSize(window.innerWidth, window.innerHeight)
  document.body.appendChild(renderer.domElement)
  renderer.setPixelRatio(devicePixelRatio) //デバイスの解像度に最適化する
  renderer.setClearColor(0x000000, 1) //背景色を黒に設定（第1引数：色、第2引数：透明度）
 
  //ジオメトリ
  let ballGeometry = new THREE.SphereGeometry(100, 64, 32) //球体のジオメトリの設定
 
  //マテリアル
  let texture = new THREE.TextureLoader().load("./textures/Water.jpg") //画像の読み込み
  let ballMaterial = new THREE.MeshPhysicalMaterial({
    map: texture, // 画像の指定
    color: 0x66ffff, // 青色を追加
    metalness: 0.4, // 金属度を低く設定
    roughness: 0.5, // 粗さを中程度に設定
  })
 
  //メッシュ = ジオメトリ + マテリアル
  let ballMesh = new THREE.Mesh(ballGeometry, ballMaterial)
  //シーンに追加
  scene.add(ballMesh)
 
  // 環境光源
  const ambientLight = new THREE.AmbientLight(0x404040, 0.5)
  scene.add(ambientLight)
 
  // 平行光源
  const mainLight = new THREE.DirectionalLight(0xffffff, 1)
  mainLight.position.set(5, 10, 7.5)
  scene.add(mainLight)
 
  // 半球光源
  const hemisphereLight = new THREE.HemisphereLight(0x8888ff, 0x444422, 0.5)
  scene.add(hemisphereLight)
 
  // 点光源
  pointLight = new THREE.PointLight(0xffffff, 5, 2000, 0.5)
  pointLight.position.set(200, 200, 200)
  scene.add(pointLight)
 
  animate()
}
 
function animate() {
  //ポイント光源の座標を動かす
  pointLight.position.set(
    200 * Math.sin(Date.now() / 1000),
    200 * Math.sin(Date.now() / 1000),
    200 * Math.cos(Date.now() / 1000),
  )
 
  // フレーム単位でアニメーションを読み込む
  requestAnimationFrame(animate)
  //レンダリングの記述
  renderer.render(scene, camera)
}