Use the command http-server to run this code
From left to right: no environment map, recursive method that iterates through all objects in the scene, three.js scene property that sets a global enviornment map that is applied to all objects.
Here is a close-up:
Some resources that I used:
- https://glitch.com/edit/#!/street-flyer
- https://github.com/3DStreet/3dstreet/blob/main/assets/CGSkies_0343_doubled_2048.jpg
- https://github.com/3DStreet/3dstreet/blob/main/index.html
- https://github.com/3DStreet/3dstreet/tree/main/assets/images/skybox
- https://aframe.io/docs/1.2.0/primitives/a-sky.html#attributes_theta_length
- https://coeleveld.com/spherical-equirectangular-environment-textures-and-hdri/
- https://aframe.io/docs/1.2.0/components/gltf-model.html
- I'm not sure if there is a simple way to load an HDR file into three.js. It seems like you need to use a RGBELoader. https://discourse.threejs.org/t/hdri-background-position/13602/5
- https://threejs.org/docs/index.html#api/en/loaders/CubeTextureLoader
- https://discourse.threejs.org/t/hdri-background-position/13602/5
- https://github.com/mrdoob/three.js/blob/master/examples/jsm/loaders/RGBELoader.js
