How to create metalic object imported from blender


how to create metalic object imported from blender?

so the environnement is a garden + skybox created with blender and exported in gltf .

the metalic object have been created too with blender ( with metal at 1 roughness 0 ) but the object is black when is imported .

i ve read the solution is around envmap property but i dont understand what i have to do and i didn’t find any tutorial about how to create metallic object with three js .
thank you very much

Try loading your model in some other viewer first. Make sure the model looks right there.

Once you’ve done that, work on getting your code to look the same. You will always need to load an environment map with metallic objects. This is a good example for it: three.js examples

i try to add something like that

const generator = new THREE.PMREMGenerator( renderer );
const envMap = generator.fromScene( scene ,0 ,0.1,1300 );

              scene.environment = envMap.texture ; 

but it doesn’t work as i wish . I understand that everything around material and light are very hard and complex , and probably i havent the good level yet . I need to learn and read lot of tutorial before to be able to do metalic objet .


i have discovered why the bottom of object with metalic matérial are black , the top was strange , and found some plant on side .

it is because when i use to const envMap = generator.fromScene( scene ,0,0.1,1300 );

it is create an envMap like it was in the center of the world ( = 0 ,0 ,0 ) and not in the center of the object

but my scene i need is at 160 meter of altitude and my metallic objet is above 160 meter .

so how can i use PMREMGenerator to do like it is at the same position of my metallic object ?


Edit : i ve found a solution which is not the best practice but it is working . so i take the position of my metal objet , i translates all the scene like this objet is in the center of the world and after i do inverse translation .

var sphereTest  = scene.getObjectByName('spheretest');
            var metalx = sphereTest.position.x ;
            var metaly = sphereTest.position.y;
            var metalz = sphereTest.position.z;
             const generator = new THREE.PMREMGenerator( renderer );
             const envMap = generator.fromScene( scene ,0,0.1,1300 );
             envMap.mapping = THREE.CubeRefractionMapping;;
            envMap.texture.encoding  = THREE.sRGBEEncoding ;
            sphereTest.material.envMap = envMap.texture; 
            sphereTest.material.envMapIntensity = 1 ;
 see the result 

Edit 2 : i want to say that i dont really understand what i m doing , i try and see the result until something working . I ve just discovered that the line envMap.mapping = THREE.CubeRefractionMapping;
is not good , change Refraction by Reflection , no change , remove the line and get same result see the result without this line ( same result that above picture )

edit3 : it is very great , i have used a cube , apply quaternion and it look like a mirror which spinning . It is like envMap stay at the same position and the object3D can turn .
to simulate night i decrease intensity cube.material.envMapIntensity

Hey @donmccurdy, a lockdown project for you if the time allows is to add a test texture to test your UVs to this viewer one day. Something like this texture. (Ignore the KK)

hello ,

i ve tried now to do two envMap for two different object which are not next , but when i does create a second envMap2 , and assign it to the second object , even if all variable are different the first get the envMap of the second object .

question : how to assign two different envMap at two different object ?


i ve found the solution and it was my fault because under blender i have assigned the same material for the two sphere , so when i have assigned the second envMap to the second sphere , it was like i assigned the same envMap to the first sphere . So the solution was under blender to duplicate material for the second sphere and it is working great , now the two sphere have their own envMap . It is marvellous !! see result

thank you very much for the help ( three js is very great ! )