Help with adding environment map for lighting?

Questions
, ,
1

Hi, I’ve been trying to add an environment map to my scene on my webpage since my model itself is lacking lighting when compared to online viewers.

I’ve been trying to implement the following code to my project:
image

But however I seem to implement it, it doesn’t seem to work and I can’t really figure out why, so maybe some smart people here would be able to assist?

import { useState, useEffect, useRef, useCallback } from ‘react’
import * as THREE from ‘three’
import { OrbitControls } from ‘three/examples/jsm/controls/OrbitControls’
import { loadGLTFModel } from ‘…/lib/model’
import { RoomSpinner, RoomContainer } from ‘./my-room-loader’
import { /LinearEncoding,/ sRGBEncoding } from ‘three’
import { RGBELoader } from ‘three/examples/jsm/loaders/RGBELoader’
//import { Th } from ‘@chakra-ui/react’
//import { render } from ‘react-dom’
function easeOutCirc(x) {
return Math.sqrt(1 - Math.pow(x - 1, 4))
}

const MyRoom = () => {
const refContainer = useRef()
const [loading, setLoading] = useState(true)
const [renderer, setRenderer] = useState()
const [_camera, setCamera] = useState()
const [target] = useState(new THREE.Vector3(-0.5, 1.2, 0))
const [initialCameraPosition] = useState(
new THREE.Vector3(
20 * Math.sin(0.2 * Math.PI),
10,
20 * Math.cos(0.2 * Math.PI)
)
)
const [scene] = useState(new THREE.Scene())
const [_controls, setControls] = useState()
const handleWindowResize = useCallback(() => {
const { current: container } = refContainer
if (container && renderer) {
const scW = container.clientWidth
const scH = container.clientHeight
renderer.setSize(scW, scH)
}
}, [renderer])

/* eslint-disable react-hooks/exhaustive-deps */
useEffect(() => {
const { current: container } = refContainer
if (container && !renderer) {
const scW = container.clientWidth
const scH = container.clientHeight
const renderer = new THREE.WebGLRenderer({
antialias: true,
alpha: true
})

  renderer.setPixelRatio(window.devicePixelRatio)
  renderer.setSize(scW, scH)
  renderer.physicallyCorrectLights = true
  // renderer.toneMapping = THREE.ACESFilmicToneMapping
  // renderer.toneMappingExposure = 1
  renderer.outputEncoding = sRGBEncoding
  container.appendChild(renderer.domElement)
  setRenderer(renderer)
  // 640 -> 240
  // 8   -> 6
  const scale = scH * 0.005 + 4.2
  const camera = new THREE.OrthographicCamera(
    -scale,
    scale,
    scale,
    -scale,
    0.01,
    50000
  )

  camera.position.copy(initialCameraPosition)
  camera.lookAt(target)
  setCamera(camera)
  const ambientLight = new THREE.AmbientLight(0xcccccc, 1)
  scene.add(ambientLight)
  const controls = new OrbitControls(camera, renderer.domElement)
  controls.autoRotate = true
  controls.target = target
  setControls(controls)

 

  new RGBELoader()
    .setPath( 'textures/equirectangular/' )
    .load( 'footprint_court_2k.hdr', function ( texture ){
      texture.mapping = THREE.EquirectangularReflectionMapping
      scene.background = texture
      scene.environment = texture
      renderer.render()
    } )

  {/* LOADS THE GLB MODEL */}
  loadGLTFModel(scene, '/model.glb', {
    receiveShadow: false,
    castShadow: false
  }).then(() => {
    animate()
    setLoading(false)
  })

  let req = null
  let frame = 0
  const animate = () => {
    req = requestAnimationFrame(animate)
    frame = frame <= 100 ? frame + 1 : frame
    if (frame <= 100) {
      const p = initialCameraPosition
      const rotSpeed = -easeOutCirc(frame / 120) * Math.PI * 10
      camera.position.y = 10
      camera.position.x =
        p.x * Math.cos(rotSpeed) + p.z * Math.sin(rotSpeed)
      camera.position.z =
        p.z * Math.cos(rotSpeed) - p.x * Math.sin(rotSpeed)
      camera.lookAt(target)
    } else {
      controls.update()
      let ang = controls.getAzimuthalAngle();
      if (ang < Math.PI * 0.01 || ang > 1.5 ) controls.autoRotateSpeed *= -1;
    }
    renderer.render(scene, camera)
  }
  return () => {
    console.log('unmount')
    cancelAnimationFrame(req)
    renderer.dispose()
  }
}

}, )

useEffect(() => {
window.addEventListener(‘resize’, handleWindowResize, false)
return () => {
window.removeEventListener(‘resize’, handleWindowResize, false)
}
}, [renderer, handleWindowResize])
return (
{loading && }
)

}

export default MyRoom

2

Here’s a working demo with the steps in order in a single file.
Uses both cube maps and hdr.
GitHub - epreston/environment-lighting-three: Environment lighting with three.js