Environment map not working

Questions
1

I succesfully added an environment map. But what I ideally would like to is to have all the reflections on my model from the environment, but not being able to actually see the environment itself.

is that possible? cant find it on the net :frowning:

 var path = 'model/';
    var format = '.jpg';
    var envMap = new THREE.CubeTextureLoader().load( [
        path + 'posx' + format, path + 'negx' + format,
        path + 'posy' + format, path + 'negy' + format,
        path + 'posz' + format, path + 'negz' + format
    ] );

    scene = new THREE.Scene();
    scene.background = envMap;

    light = new THREE.HemisphereLight( 0xbbbbff, 0x444422 );
    light.position.set( 0, 1, 0 );
    scene.add( light );
2

Are you looking for something like this? https://jsfiddle.net/f2Lommf5/15357/

The idea is to assign the cube texture to the .envMap property of your material.

3

Oh man, you are the bomb! exactly what I was looking for. Weird I couldnt find it, been search for 2 hours and all I found were tutorials / examples with a background lol. Thanks so much (again) Mugen!

Last question if I may. How does one do something like this: https://marmoset.co/viewer/

(for example top row most right example e.g. Greater Demon)

What kind of light do they use so everything is equally visible, yet has 100% of the material quality as shown inside your 3d tool?

4

Try to load you model with a lighting setup like in this example: https://threejs.org/examples/#webgl_loader_fbx

In general, it can’t tell you something specific since the viewer does not use three.js. But the code used in the example is maybe a good starting point for you (a combination of a HemisphereLight and DirectionalLight).

1 Like
5

And THREE.AmbientLight() :slight_smile:

6

The example does not use an AmbientLight since HemisphereLight is already an indirect diffuse light source. In most cases, you don’t use both light types at the same time.

7

Yeah, there should be “or” instead of “and” :slight_smile:
Just to clarify, my reply is not related to that specific Three.js example.

1 Like