Reflections in Three Js - reactjs

Question

I have a bad problem to solve in an application react-based written with typescript that should manage 3D shapes.
The problem is that the reflections don't look good at all. I tried everything I can to better the code but nothing was successful.
The workflow is to create a material holder in a blender, export it and to apply to an empty shape imported from another gltf.
For all the materials I tried (paper, with normal map structure) everything works fine.
with simple paper material
In case the material is reflective (roughness 0.2 and metalness 0.8) this is the result:
with reflective material
As you can see the portion of the environment reflected is dramatically wrong if you think that the cube is a placeholder so done:
one of the six images of the cube map
The code is very simple, here I create the cube Map:
const loader = new THREE.CubeTextureLoader();
const path = `${this.props.baseUrl}backgrounds/${background.value}`;
const ext = background.value === "test" ? "jpg" : "png";
const bkcg = [
`${path}/py.${ext}`,
`${path}/nz.${ext}`,
`${path}/px.${ext}`,
`${path}/ny.${ext}`,
`${path}/pz.${ext}`,
`${path}/nx.${ext}`,
];
// const loader = new THREE.TextureLoader();
// const bkcg = `${this.props.baseUrl}backgrounds/test_texture.jpg`;
loader.load(bkcg, async (t) => {
t.minFilter = THREE.LinearFilter;
t.magFilter = THREE.LinearFilter;
t.encoding = THREE.sRGBEncoding;
t.format = THREE.RGBFormat;
this.setState({
background: t,
bckgLoaded: true,
});
Here I assign the material to the different meshes:
public editMeshes = (
item: THREE.Mesh,
isOrderPage: boolean,
design: IDesign,
materials: {[name: string]: THREE.MeshStandardMaterial | string},
textures: ITextures,
renderer: THREE.WebGLRenderer,
scene: THREE.Scene,
) => {
if (item.name === "Ground" || item.name === "X_Ground_Freigabe") {
const color = isOrderPage ? new THREE.Color("#ffffff") : new THREE.Color("#aaaaaa"); // #8f8f8f
const groundMaterial = new THREE.MeshBasicMaterial({ color });
item.material = groundMaterial;
} else {
item.scale.x = item.scale.x + 0;
item.scale.y = item.scale.y + 0;
item.scale.z = item.scale.z + 0;
if (Object.keys(design).indexOf(item.name) !== -1 || Object.keys(materials).indexOf(item.name) !== -1) {
if (Object.keys(design).indexOf(item.name) === -1 && Object.keys(materials).indexOf(item.name) !== -1) {
if (item.material instanceof THREE.MeshStandardMaterial) {
item.material.color = new THREE.Color(`${materials[item.name]}`);
}
} else {
if (typeof(materials[item.name]) !== "string") {
item.material = materials[item.name] as THREE.MeshStandardMaterial;
if (item.material instanceof THREE.MeshStandardMaterial) {
if (shinyMaterials.indexOf((item.material as THREE.MeshStandardMaterial).name) !== -1) {
this.createCubeCamera(item, textures, scene, renderer);
item.material.needsUpdate = true;
} else {
(item.material as THREE.MeshStandardMaterial).map = textures ? textures[item.name] :
(item.material as THREE.MeshStandardMaterial).map;
(item.material as THREE.MeshStandardMaterial).envMapIntensity = 4;
(item.material as THREE.MeshStandardMaterial).needsUpdate = true;
item.material.flatShading = false;
}
}
}
}
} else {
if (shinyMaterials.indexOf((item.material as THREE.MeshStandardMaterial).name) !== -1) {
this.createCubeCamera(item, textures, scene, renderer);
}
}
}
}
}
here I create the camera for the reflections:
public createCubeCamera = (
item: THREE.Mesh,
textures: ITextures,
scene: THREE.Scene,
renderer: THREE.WebGLRenderer) => {
const cubeCamera = new THREE.CubeCamera(0.001, 10000, 2048);
scene.add(cubeCamera);
cubeCamera.name = `cubeCamera_${item.name}`;
cubeCamera.position.set(item.position.x, item.position.y, item.position.z);
item.visible = false;
cubeCamera.update(renderer, scene);
item.visible = true;
const renderCamera = cubeCamera.renderTarget.texture as THREE.CubeTexture; // scene.background as THREE.CubeTexture
(item.material as THREE.MeshStandardMaterial).map =
textures ? textures[item.name] : (item.material as THREE.MeshStandardMaterial).map;
(item.material as THREE.MeshStandardMaterial).envMap = renderCamera;
(item.material as THREE.MeshStandardMaterial).envMapIntensity = 1;
(item.material as THREE.MeshStandardMaterial).flatShading = false;
(item.material as THREE.MeshStandardMaterial).needsUpdate = true;
}
and here I render the scene:
if (this.props.background) {
scene.background = this.props.background;
const camera = this.props.mainScene.cameras[0];
scene.children[0].children.map((item: THREE.Object3D) => {
if (item instanceof THREE.Light) {
this.props.mockUtils.editLights(
item as THREE.SpotLight | THREE.DirectionalLight,
this.props.scene.lights_intensity,
scene,
);
}
if (item instanceof THREE.Mesh) {
this.props.mockUtils.editMeshes(
item,
this.props.isOrderPage,
this.props.design,
this.props.materials,
this.props.textures,
// this.props.background,
renderer,
scene,
);
}
});
this.props.mockUtils.addAmbientLight(scene, this.props.scene.ambient_light);
scene.children.map((obj: THREE.Object3D) => {
if (obj instanceof THREE.CubeCamera) {
obj.update(renderer, scene);
}
});
renderer.render(scene, camera);
if (this.design.current) {
this.props.mockUtils.finish(
renderer,
FinalImage,
id,
`${this.props.baseUrl}products/${this.props.scene.product_name}.jpg`,
this.props.isOrderPage,
this.props.scene.zoomFactor,
this.design.current,
this.assetsLoaderCallback,
);
}
}
}
Can anyone help me to understand how to receive a normal reflection of the cube map that is applied to the scene background?
Thank you
Michael Moretti