How to create metalic object imported from blender

Hello,

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.

gltf-viewer.donmccurdy.com/

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 ; 
              generator.dispose();

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 .

thank

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 ?

thanks

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;
             scene.translateX(-metalx);
             scene.translateY(-metaly);
             scene.translateZ(-metalz);
             
             
             
             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 ;
        
              generator.dispose();
             scene.translateX(metalx);
             scene.translateY(metaly);
             scene.translateZ(metalz);
             
 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 ?

thank

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 ! )