Generating an environment map from scratch

Hello everyone,

I’m working on a project where I cannot use any assets, so I cannot load any images or textures from disk, and I’m puzzled about how to create an environment map from scratch in code. I’ve searched for a similar topic but I could not find any examples on this. Could someone point me in the right direction?

What I’m looking for is for a way to create my own cube-map without any assets, so that I can pass it to a Standard Material via the envMap option. I figured I could create my own map in a shader and pass the texture through. I’m fairly proficient with GLSL, but I’m not familiar enough with Three.js yet to figure out how to set that up.

Many thanks!

THREE.RoomEnvironment would be a good starting point – see this example three.js examples and the RoomEnvironment.js source.

1 Like

this is react but it could give you some hints as to how to shape the api perhaps: Building live envmaps - CodeSandbox this lets me define the environment with real threejs primitives, and suddenly planes become light-formers/area-lights, circlegeometry becomes a ring-light, etc. you’re painting form with lights and shadows. btw in threejs the environment can also be “live”, so you can move things in it.

1 Like

You can use for environment
new THREE.PMREMGenerator(renderer).fromScene(scene).texture

I used it here for reflection on the balls in “moleculas” (in the page bottom)

1 Like

Thank you everyone! I have now a clear idea of how to set it up :smiley: