How to add Environment map

Questions
, ,
1

Hi i need to add an environment map to my model, ( i am a programmer with limited knowledge of 3D art )

Working demo of the Model is found here: http://a3d.joladev2.com/webgl-env-map/index.html

Environment map is here: /webgl-env-map/assets/env.jpg

Code for the model is here: https://jsfiddle.net/xk12n88z/4/

If it is not possible to add this jpg map, then i need a map that makes this lamp looks like chrome, thank you i appreciate any help

2

Ok i used FBX loader and it loads normally,

so mtl and obj loaders will not load normal map

json loader will not load environment map,

but fbx loads everything, and works fine

1 Like
3

For future readers, it’s also fairly easy to add the environment map after loading the model, e.g. if you want the same model to have a different environment map in different contexts.

// Load envMap.
var textureLoader = new THREE.TextureLoader();
var texture = textureLoader.load('/path/to/env.jpg');

// Load model.
modelLoader.load('/path/to/model.foo', (object) => {
  // Apply envMap to model.
  object.traverse((node) => {
    if (node.isMesh) node.material.envMap = texture;
  });
});
3 Likes
4

I have to set texture.mapping = THREE.EquirectangularReflectionMapping; to make it working.

3 Likes
5

Saved my day :slight_smile: