metalness | derive parameters for various metals | GPU library

That happens because you are using a PBR material in your code since the default material of A-Frame is MeshStandardMaterial. Meaning a material that tries to render physically correct. The official three.js example uses MeshLambertMaterial which is no PBR material. Both type of materials implement environment maps differently.

When using a PBR material, it's recommended to use a HDR environment map which is also pre-processed with PMREMGenerator like in this example: https://threejs.org/examples/webgl_loader_gltf

You have used MeshBasicMaterial for your plane mesh which is a unlit material. So it does not receive shadpws. Using a lit material like MeshStandardMaterial solves the issue.

That's because your geometry doesn't have normals, and PhongMaterial needs normals to calculate its color. Simply adding the default [0, 0, 1] normal in you xyzSet() function renders the red color you're expecting:

You render the scene with a normal map which is not yet fully loaded. Try it like so:

require() in const fs = require('fs') is not part of the standard JavaScript API, it buit in Node JS. If you want to import some file, it can use tag in html, for example

MeshParent.geometry.applyMatrix(m);

Transforming the geometry of a 3D object has no effect on the descendants's transformation. So you have to change the position, rotation or scale properties. Or alternatively, set matrixAutoUpdate to false and modify Object3D.matrix directly. Just keep in mind that in this case, you don't want to call updateMatrix() (since you already set it manually).

There's not much you need to change to make it metallic:

I'm afraid you can't compare the environment map implementation between MeshBasicMaterial and MeshStandardMaterial (which is a PBR material). As mentioned by the documentation, a texture applied to MeshStandardMaterial.envMap should be pre-processed by PMREMGenerator. The editor does not do this for the envMap property right now.

Try it with this code: