ref
Three.js中文网
Three.js Journey — Learn WebGL with Three.js
Part 1 Fullscreen and resizing
When the double click happens, we will toggle the fullscreen —meaning that if the window is not in fullscreen, a double-click will enable fullscreen mode, and if the window is already in fullscreen, a double-click will exit fullscreen mode.
To make the canvas fit perfectly in the viewport, instead of using fixed numbers in the sizes variable, use the window.innerWidth and window.innerHeight:
// Sizes
const sizes = {width: window.innerWidth,height: window.innerHeight
}Handle resize
window.addEventListener('resize', () =>
{// Update sizessizes.width = window.innerWidthsizes.height = window.innerHeight
})Handle fullscreen
To know if we are already in fullscreen or not, we can use document.fullscreenElement:
window.addEventListener('dblclick', () =>
{if(!document.fullscreenElement){canvas.requestFullscreen()}else{document.exitFullscreen()}
})Part 2 Geometries
What is a geometry?
In Three.js, geometries are composed of vertices (point coordinates in 3D spaces) and faces (triangles that join those vertices to create a surface).
We use geometries to create meshes, but you can also use geometries to form particles. Each vertex (singular of vertices) will correspond to a particle, but this is for a future lesson.
We can store more data than the position in the vertices. A good example would be to talk about the UV coordinates or the normals.
The different built-in geometries
Three.js has many built-in geometries. While you don't need to know precisely how to instantiate each one, it is good to know that they exist.
All the built-in geometries we are going to see inherit from the BufferGeometry class. This class has many built in methods like translate(...), rotateX(...), normalize(), etc. but we are not going to use them in this lesson.
Most of the geometries documentation pages have examples.
- BoxGeometry To create a box.
- PlaneGeometry To create a rectangle plane.
- CircleGeometry To create a disc or a portion of a disc (like a pie chart).
- ConeGeometry To create a cone or a portion of a cone. You can open or close the base of the cone.
- CylinderGeometry To create a cylinder. You can open or close the ends of the cylinder and you can change the radius of each end.
- RingGeometry To create a flat ring or portion of a flat circle.
- TorusGeometry To create a ring that has a thickness (like a donut) or portion of a ring.
- TorusKnotGeometry To create some sort of knot geometry.
- DodecahedronGeometry To create a 12 faces sphere. You can add details for a rounder sphere.
- OctahedronGeometry To create a 8 faces sphere. You can add details for a rounder sphere.
- TetrahedronGeometry To create a 4 faces sphere (it won't be much of a sphere if you don't increase details). You can add details for a rounder sphere.
- IcosahedronGeometry To create a sphere composed of triangles that have roughly the same size.
- SphereGeometry To create the most popular type of sphere where faces looks like quads (quads are just a combination of two triangles).
- ShapeGeometry To create a shape based on a path.
- TubeGeometry To create a tube following a path.
- ExtrudeGeometry To create an extrusion based on a path. You can add and control the bevel.
- LatheGeometry To create a vase or portion of a vase (more like a revolution).
- TextGeometry To create a 3D text. You'll have to provide the font in typeface json format.
If you need a particular geometry that is not supported by Three.js, you can create your own geometry in JavaScript, or you can make it in a 3D software, export it and import it into your project. We will learn more about that later.
Box example
const geometry = new THREE.BoxGeometry(1, 1, 1, 2, 2, 2)
const material = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true })Creating your own buffer geometry
To create your own buffer geometry, start by instantiating an empty BufferGeometry. We will create a simple triangle.
To add vertices to a BufferGeometry you must start with a Float32Array.
Float32Array are native JavaScript typed array. You can only store floats inside, and the length of that array is fixed.
To create a Float32Array, you can specify its length and then fill it later:
// Create an empty BufferGeometry
const geometry = new THREE.BufferGeometry()// Create a Float32Array containing the vertices position (3 by 3)
const positionsArray = new Float32Array([0, 0, 0, // First vertex0, 1, 0, // Second vertex1, 0, 0 // Third vertex
])// Create the attribute and name it 'position'
/*
The first parameter corresponds to your typed array and
the second parameter corresponds to how much values make one vertex attribute.
As we saw earlier, to read this array,
we have to go 3 by 3 because a vertex position is composed of 3 values (x, y and z):
*/
const positionsAttribute = new THREE.BufferAttribute(positionsArray, 3)
geometry.setAttribute('position', positionsAttribute)We can also create a bunch of random triangles:
// Create an empty BufferGeometry
const geometry = new THREE.BufferGeometry()// Create 50 triangles (450 values)
const count = 50
const positionsArray = new Float32Array(count * 3 * 3)
for(let i = 0; i < count * 3 * 3; i++)
{positionsArray[i] = (Math.random() - 0.5) * 4
}// Create the attribute and name it 'position'
const positionsAttribute = new THREE.BufferAttribute(positionsArray, 3)
geometry.setAttribute('position', positionsAttribute)Part 3 Debug UI
While you can create your own debug UI using HTML / CSS / JS, there are already multiple libraries:
- dat.GUI
- lil-gui
- control-panel
- ControlKit
- Uil
- Tweakpane
- Guify
- Oui
All of these can do what we want, but we will use lil-gui because it’s popular, maintained, and easy to use.
Instantiating lil-gui
To add lil-gui to our project, we can use the dependency manager provided with Node.js called NPM (just like we did for GSAP in a previous lesson).
In your terminal (while the server is not running or by using another terminal window in the same folder) run npm install lil-gui
lil-gui is now available in the node_modules/ folder and we can import it into our script.js. Don't forget to relaunch the server:
import GUI from 'lil-gui' You can now instantiate lil-gui in a gui variable and we can do that at the very beginning, right after the imports:
/*** Debug*/
const gui = new GUI()The different types of tweaks
On the top right corner of the experience, you can see an empty panel. There are different types of tweaks you can add to that panel:
- Range —for numbers with minimum and maximum value
- Color —for colors with various formats
- Text —for simple texts
- Checkbox —for booleans (
trueorfalse) - Select —for a choice from a list of values
- Button —to trigger functions
Range
The first tweak we are going to add is the range.
Most of the tweaks can be added using gui.add(...). The first parameter is the object and the second parameter is the property of that object you want to tweak.
You need to add the gui.add(...) after you’ve created the object and its property. Otherwise, you will ask lil-gui to tweak something that doesn’t exist yet.
Let’s try with the mesh.position.y:
const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)gui.add(mesh.position, 'y', - 3, 3, 0.01)If you don’t like to have that many parameters, you can use the methods min(...), max(...), and step(...) by chaining directly after the add(...) method:
gui.add(mesh.position, 'y').min(- 3).max(3).step(0.01)Tweaks for non-properties
One important thing to note here is that lil-gui can only modify properties.you can use some tricks to do so, such as creating an object whose purpose is to hold properties for lil-gui to be used on the object:
//If you want to update a variable, you can’t:
let myVariable = 1337
gui.add(myVariable, '???')//But you can use some tricks to do soconst myObject = {myVariable: 1337
}
gui.add(myObject, 'myVariable')Checkbox
lil-gui will automatically detect what kind of property you want to tweak and use the corresponding interface. A good example is the visible property of Object3D. It is a boolean that, if false, will hide the object:
gui.add(mesh, 'visible')
gui.add(material, 'wireframe')Colors
Handling colors is a little harder. Let’s try modifying the color property of the material.
First, we need to use addColor(...) instead of add(...) because the color property is not a string, a boolean, or a number. It’s an object with various properties because it’s an instance of the Three.js Color class. Among those properties are r, g and b , which lil-gui can use to display a nice tweak:
gui.addColor(material, 'color')Next, we need to access the Color instance and we can use the classic material.color or we can retrieve a value directly as a parameter of the function:
gui.addColor(material, 'color').onChange((value) =>{console.log(material.color)console.log(value)})
Function / Button
Sometimes, we just want to trigger instructions on demand. Right now, we want to make the cube perform a little spin animation when we click somewhere in our debug UI.
const myFunction = () => {console.log('do something')
}
gui.add(myFunction, '???')Folders
Let’s imagine that we have a lot more tweaks and the debug UI starts to get crowded. We can separate them into folders by using the addFolder() method.
To create a folder, call addFolder() and send the name you want for it as the parameter. Make sure to do it before the tweaks and save it as cubeTweaks:
const cubeTweaks = gui.addFolder('Awesome cube')GUI setup
const gui = new GUI({width: 300,title: 'Nice debug UI',closeFolders: false,
})
// gui.close()
gui.hide()Part 4 Textures
PBR
Those textures (especially the metalness and the roughness) follow what we call PBR principles. PBR stands for Physically Based Rendering. It regroups many techniques that tend to follow real-life directions to get realistic results.
While there are many other techniques, PBR is becoming the standard for realistic renders, and many software, engines, and libraries are using it.
For now, we will simply focus on how to load textures, how to use them, what transformations we can apply, and how to optimize them. We will see more about PBR in later lessons, but if you're curious, you can learn more about it here:
- https://marmoset.co/posts/basic-theory-of-physically-based-rendering/
- https://marmoset.co/posts/physically-based-rendering-and-you-can-too/
How to load textures
1.Getting the URL of the image
//You can put the image texture in the /src/ folder and
//import it like you would import a JavaScript dependency
import imageSource from './image.png'console.log(imageSource)//Or you can put that image in the /static/ folder
//and access it just by adding the path of the image (without /static) to the URL:const imageSource = '/image.png'console.log(imageSource)2.Loading the image
①Using native JavaScript
With native JavaScript, first, you must create an Image instance, listen to the load event, and then change its src property to start loading the image:
const image = new Image()
image.onload = () =>
{console.log('image loaded')
}
image.src = '/textures/door/color.jpg'Unfortunately, the texture variable has been declared in a function and we can not access it outside of this function. This is a JavaScript limitation called scope.
We could create the mesh inside the function, but there is a better solution consisting on creating the texture outside of the function and then updating it once the image is loaded by setting the texture needsUpdate property to true:
const image = new Image()
const texture = new THREE.Texture(image)
image.addEventListener('load', () =>
{texture.needsUpdate = true
})
image.src = '/textures/door/color.jpg'To see the texture on the cube, replace the color property by map and use the texture as value:
const material = new THREE.MeshBasicMaterial({ map: texture })You should see the door texture on each side of your cube. but, the texture looks oddly greyish.
It’s because the image has been encoded using the sRGB color space but Three.js isn’t aware of this.
To fix that, you need to set their colorSpace to THREE.sRGBColorSpace:
const texture = new THREE.Texture(image)
texture.colorSpace = THREE.SRGBColorSpaceThe general idea is that textures that are used on the map or matcap (that you’ll see later) properties of a material are supposed to be encoded in sRGB and we need to set the colorSpace to THREE.sRGBColorSpace but only for those.
②Using TextureLoader
Instantiate a variable using the TextureLoader class and use its .load(...) method to create a texture.
You can send 3 functions after the path. They will be called for the following events:
loadwhen the image loaded successfullyprogresswhen the loading is progressingerrorif something went wrong
const textureLoader = new THREE.TextureLoader()
const texture = textureLoader.load('/textures/door/color.jpg',() =>{console.log('loading finished')},() =>{console.log('loading progressing')},() =>{console.log('loading error')}
)
texture.colorSpace = THREE.SRGBColorSpace③Using the LoadingManager
const loadingManager = new THREE.LoadingManager()
loadingManager.onStart = () =>
{console.log('loading started')
}
loadingManager.onLoad = () =>
{console.log('loading finished')
}
loadingManager.onProgress = () =>
{console.log('loading progressing')
}
loadingManager.onError = () =>
{console.log('loading error')
}const textureLoader = new THREE.TextureLoader(loadingManager)// ...const colorTexture = textureLoader.load('/textures/door/color.jpg')
colorTexture.colorSpace = THREE.SRGBColorSpace
const alphaTexture = textureLoader.load('/textures/door/alpha.jpg')
const heightTexture = textureLoader.load('/textures/door/height.jpg')
const normalTexture = textureLoader.load('/textures/door/normal.jpg')
const ambientOcclusionTexture = textureLoader.load('/textures/door/ambientOcclusion.jpg')
const metalnessTexture = textureLoader.load('/textures/door/metalness.jpg')
const roughnessTexture = textureLoader.load('/textures/door/roughness.jpg')As you can see here, we renamed the texture variable colorTexture so don't forget to change it in the material too:
const material = new THREE.MeshBasicMaterial({ map: colorTexture })UV unwrapping
You can actually see those UV 2D coordinates in the geometry.attributes.uv property:
console.log(geometry.attributes.uv)Transforming the texture
Repeat
you have to update the wrapS and wrapT properties using the THREE.RepeatWrapping constant.
wrapSis for thexaxiswrapTis for theyaxis
const colorTexture = textureLoader.load('/textures/door/color.jpg')
colorTexture.colorSpace = THREE.SRGBColorSpace
colorTexture.wrapS = THREE.RepeatWrapping
colorTexture.wrapT = THREE.RepeatWrapping You can also alternate the direction with THREE.MirroredRepeatWrapping:
colorTexture.wrapS = THREE.MirroredRepeatWrapping
colorTexture.wrapT = THREE.MirroredRepeatWrappingOffset
You can offset the texture using the offset property that is also a Vector2 with x and y properties. Changing these will simply offset the UV coordinates:
colorTexture.offset.x = 0.5
colorTexture.offset.y = 0.5Rotation
You can rotate the texture using the rotation property, which is a simple number corresponding to the angle in radians:
colorTexture.rotation = Math.PI * 0.25That is, in fact, the 0, 0 UV coordinates. If you want to change the pivot of that rotation, you can do it using the center property which is also a Vector2:
colorTexture.rotation = Math.PI * 0.25
colorTexture.center.x = 0.5
colorTexture.center.y = 0.5Part 5 Materials
Materials are used to put a color on each visible pixel of the geometries.
The algorithms that decide on the color of each pixel are written in programs called shaders. Writing shaders is one of the most challenging parts of WebGL and Three.js, but don't worry; Three.js has many built-in materials with pre-made shaders.
// MeshBasicMaterial
const material = new THREE.MeshBasicMaterial()const sphere = new THREE.Mesh(new THREE.SphereGeometry(0.5, 16, 16),material
)We can now rotate our objects on our tick function, as we did in the Animation lesson:
/*** Animate*/
const clock = new THREE.Clock()const tick = () =>
{const elapsedTime = clock.getElapsedTime()// Update objectssphere.rotation.y = 0.1 * elapsedTimeplane.rotation.y = 0.1 * elapsedTimetorus.rotation.y = 0.1 * elapsedTimesphere.rotation.x = 0.15 * elapsedTimeplane.rotation.x = 0.15 * elapsedTimetorus.rotation.x = 0.15 * elapsedTime// ...
}tick()All the texture images are located in the static/textures/ folder. For now, we will load all the door textures located in the static/textures/door/ folder, the first matcap texture located in the static/textures/matcaps/ folder, and the first gradient texture located in the static/textures/gradients/ folder.
Make sure to do that before instantiating the material:
/*** Textures*/
const textureLoader = new THREE.TextureLoader()const doorColorTexture = textureLoader.load('./textures/door/color.jpg')
const doorAlphaTexture = textureLoader.load('./textures/door/alpha.jpg')
const doorAmbientOcclusionTexture = textureLoader.load('./textures/door/ambientOcclusion.jpg')
const doorHeightTexture = textureLoader.load('./textures/door/height.jpg')
const doorNormalTexture = textureLoader.load('./textures/door/normal.jpg')
const doorMetalnessTexture = textureLoader.load('./textures/door/metalness.jpg')
const doorRoughnessTexture = textureLoader.load('./textures/door/roughness.jpg')
const matcapTexture = textureLoader.load('./textures/matcaps/1.png')
const gradientTexture = textureLoader.load('./textures/gradients/3.jpg') As we’ve seen previously, textures used as map and matcap are supposed to be encoded in sRGB and we need to inform Three.js of this by setting their colorSpace to THREE.SRGBColorSpace:
doorColorTexture.colorSpace = THREE.SRGBColorSpace
matcapTexture.colorSpace = THREE.SRGBColorSpaceTo ensure that all the textures are well loaded, you can use them on your material with the map property, as we saw in the Textures lesson.
const material = new THREE.MeshBasicMaterial({ map: doorColorTexture })MeshBasicMaterial
MeshBasicMaterial is probably the most "basic" material... But there are multiple properties that we haven't covered yet.
You can set most of those properties while instancing the material in the object we send as a parameter, but you can also change those properties in the instance directly:
const material = new THREE.MeshBasicMaterial({map: doorColorTexture
})// Equivalent
const material = new THREE.MeshBasicMaterial()
material.map = doorColorTextureMap
The map property will apply a texture on the surface of the geometry:
material.map = doorColorTextureColor
The color property will apply a uniform color on the surface of the geometry. When you are changing the color property directly, you must instantiate a Color class. You can use many different formats.
Try commenting on the map first and test those color formats:
// material.map = doorColorTexture
material.color = new THREE.Color('#ff0000')
material.color = new THREE.Color('#f00')
material.color = new THREE.Color('red')
material.color = new THREE.Color('rgb(255, 0, 0)')
material.color = new THREE.Color(0xff0000)Combining color and map will tint the texture with the color:
material.map = doorColorTexture
material.color = new THREE.Color('#ff0000')Wireframe
// material.map = doorColorTexture
// material.color = new THREE.Color('#ff0000')
material.wireframe = trueOpacity
The opacity property controls the transparency but, to work, you need to set the transparent property to true in order to inform Three.js that this material now supports transparency.
// material.map = doorColorTexture
// material.color = new THREE.Color('#ff0000')
// material.wireframe = true
material.transparent = true
material.opacity = 0.5AlphaMap
Now that the transparency is working, we can use the alphaMap property to control the transparency with a texture:
// material.map = doorColorTexture
// material.color = new THREE.Color('#ff0000')
// material.wireframe = true
material.transparent = true
// material.opacity = 0.5
material.alphaMap = doorAlphaTextureSide
The side property lets you decide which side of the faces is visible. By default, the front side is visible (THREE.FrontSide), but you can show the backside instead (THREE.BackSide) or both (THREE.DoubleSide):
// material.map = doorColorTexture
// material.color = new THREE.Color('#ff0000')
// material.wireframe = true
// material.transparent = true
// material.opacity = 0.5
// material.alphaMap = doorAlphaTexture
material.side = THREE.DoubleSideYou should see both the front and the back of the plane.
Try to avoid using THREE.DoubleSide whenever possible because it actually requires more resources when rendering, even though the side isn’t visible.
Some of these properties like wireframe or opacity can be used with most following materials. We won't repeat those every time.
MeshNormalMaterial
Normals are information encoded in each vertex that contains the direction of the outside of the face. If you displayed those normals as arrows, you would get straight lines coming out of each vertex that compose your geometry.
// MeshNormalMaterial
const material = new THREE.MeshNormalMaterial()You can use Normals for many things like calculating how to illuminate the face or how the environment should reflect or refract on the geometries' surface.
When using the MeshNormalMaterial, the color will just display the normal orientation relative to the camera. If you rotate around the sphere, you'll see that the color is always the same, regardless of which part of the sphere you're looking at.
While you can use some of the properties we discovered with the MeshBasicMaterial like wireframe, transparent, opacity, and side, there is also a new property that you can use, which is called flatShading:
material.flatShading = true flatShading will flatten the faces, meaning that the normals won't be interpolated between the vertices.
MeshNormalMaterial can be useful to debug the normals, but it also looks great, and you can use it just the way it is, similar to what ilithya did on her portfolio https://www.ilithya.rocks.
MeshDepthMaterial
The MeshDepthMaterial will simply color the geometry in white if it's close to the camera's near value and in black if it's close to the far value of the camera:
// MeshDepthMaterial
const material = new THREE.MeshDepthMaterial()Adding a few lights
We are going to add two simple lights to our scene but we are not going to dive too deep into the topic because there is a whole lesson dedicated to lights.
/*** Lights*/
const ambientLight = new THREE.AmbientLight(0xffffff, 1)
scene.add(ambientLight)// ...const pointLight = new THREE.PointLight(0xffffff, 30)
pointLight.position.x = 2
pointLight.position.y = 3
pointLight.position.z = 4
scene.add(pointLight)MeshPhongMaterial
The MeshPhongMaterial is very similar to the MeshLambertMaterial, but the strange patterns are less visible, and you can also see the light reflection on the surface of the geometry:
// // MeshLambertMaterial
// const material = new THREE.MeshLambertMaterial()// MeshPhongMaterial
const material = new THREE.MeshPhongMaterial()MeshPhongMaterial is less performant than MeshLambertMaterial. However, it doesn't really matter at this level.
You can control the light reflection with the shininess property. The higher the value, the shinier the surface. You can also change the color of the reflection by using the specular property:
material.shininess = 100
material.specular = new THREE.Color(0x1188ff)Fortunately, we can control how the GPU handles such texture thanks to the minFilter, magFilter, similar to what we saw in the Textures lesson when talking about mipmapping.
Change the minFilter and magFilter to THREE.NearestFilter.
// MeshToonMaterial
const material = new THREE.MeshToonMaterial()
gradientTexture.minFilter = THREE.NearestFilter
gradientTexture.magFilter = THREE.NearestFilter
material.gradientMap = gradientTextureYou should now see the cartoon effect with an intermediate step.
And because the THREE.NearestFilter isn’t actually using any mipmap versions of the texture, we can deactivate the generation of the mipmaps in order to free some memory by setting gradientTexture.generateMipmaps to alse:
gradientTexture.minFilter = THREE.NearestFilter
gradientTexture.magFilter = THREE.NearestFilter
gradientTexture.generateMipmaps = false You can try out even more steps by using the image located in static/textures/gradients.5.jpg:
const gradientTexture = textureLoader.load('/textures/gradients/5.jpg')MeshStandardMaterial
The MeshStandardMaterial uses physically based rendering principles. Yes, we are talking about the PBR we saw in the Textures lesson. Like the MeshLambertMaterial and the MeshPhongMaterial, it supports lights but with a more realistic algorithm and better parameters like roughness and metalness.
It's called "standard" because the PBR has become the standard in many software, engines, and libraries. The idea is to have a realistic result with realistic parameters, and you should have a very similar result, regardless of the technology you are using:
// // MeshToonMaterial
// const material = new THREE.MeshToonMaterial()
// gradientTexture.minFilter = THREE.NearestFilter
// gradientTexture.magFilter = THREE.NearestFilter
// gradientTexture.generateMipmaps = false
// material.gradientMap = gradientTexture// MeshStandardMaterial
const material = new THREE.MeshStandardMaterial()
material.metalness = 0.45
material.roughness = 0.65Add a debug UI
Now would be an excellent time to add a debug UI. This will be very useful to test the different properties.
First, we must add the lil-gui dependency to our project. In the terminal, in the project folder (where the server should be currently running), use the following command:
/*** Debug*/
const gui = new GUI()
const material = new THREE.MeshStandardMaterial()
material.metalness = 0.45
material.roughness = 0.65gui.add(material, 'metalness').min(0).max(1).step(0.0001)
gui.add(material, 'roughness').min(0).max(1).step(0.0001)Adding an environment map
We are not done with the MeshStandardMaterial, but before going any further, we are going to add an additional feature called environment map.
The environment map is like an image of what's surrounding the scene and you can find it in /static/textures/environmentMap/2k.hdr. You might be able to preview it if your OS supports it. If not, don’t worry, as it’s not important and Three.js will be able to handle it.
You can use it to add reflection, refraction but also lighting to your objects, in addition to the current DirectionalLight and AmbientLight.
Just like for the lights, we are not going to cover this in detail because there is a lesson dedicated to it in which you’ll also learn a bunch of ways to create your own environment maps.
Let's start by changing the metalness and the roughness of MeshStandardMaterial so that we can appreciate the upcoming environment map:
const material = new THREE.MeshStandardMaterial()
material.metalness = 0.7
material.roughness = 0.2 To load the previously mentioned environment map file, we need to use the RGBELoader. Import RGBELoader from three/examples/jsm/loaders/RGBELoader.js:
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js' Next, we need to instantiate it as rgbeLoader and use its load() method to load the ./textures/environmentMap/2k.hdr file:
/*** Environment map*/
const rgbeLoader = new RGBELoader()
rgbeLoader.load('./textures/environmentMap/2k.hdr', (environmentMap) =>
{console.log(environmentMap)
}) Unlike the textureLoader, we need to send a callback function as the second parameter. We can retrieve the loaded environment map as the parameter of that function.
To apply it to our scene, we need to change its mapping property to THREE.EquirectangularReflectionMapping and then assign it to the background and environment properties of the scene:
rgbeLoader.load('/environmentMaps/0/2k.hdr', (environmentMap) =>
{environmentMap.mapping = THREE.EquirectangularReflectionMappingscene.background = environmentMapscene.environment = environmentMap
})