Environment reflection in gltf model

hi… how can i get environment reflection in my gltf model. First picture is from my script file. Second picture is from this website https://gltf-viewer.donmccurdy.com/

here is my code, what am i missing in here??
Do i need to include rgbeloader for this??

var path = './model/canary/';
	var format = '.png';
	var urls = [
				path + 'pos-x' + format,
				path + 'neg-x' + format,
				path + 'pos-y' + format, 
				path + 'neg-y' + format,
				path + 'pos-z' + format,
				path + 'neg-z' + format
				];
	
	var reflectionCube = new THREE.CubeTextureLoader().load( urls );
	var refractionCube = new THREE.CubeTextureLoader().load( urls );
	refractionCube.mapping = THREE.CubeRefractionMapping;
	
	scene.background = texture
	
	const loader = new THREE.GLTFLoader();
	loader.load( './model/goggles.glb', function (glassesFramesGeometry){
		var model = glassesFramesGeometry.scene;
		model.traverse ( ( o ) => {
			if ( o.isMesh ) {
			//o.material.map = refractionCube;
			o.material.metalness = 1;
			o.material.roughness = 1;
			}
		} );
		threeGlasses.add(model);
		threeGlasses.scale.set( 0.08, 0.08, 0.08);
		threeGlasses.rotation.x = 70*Math.PI/180;
		threeGlasses.position.z=0.5;
	});		
	scene.add(threeGlasses);

I suggest you use the same code like in this example: https://threejs.org/examples/webgl_loader_gltf

For proper output, it’s important to use a HDR environment map in combination with PMREMGenerator. You also want to configure proper output encoding and tone mapping. Besides, assigning the env map to Scene.background only produces the skybox. You have to assign it to Scene.environment.

1 Like