In this project the mesh of the soccer golie net uses a transparent material, the back part (the grey one) becomes incorrectly transparent only from the point of view of the camera (the background of the skybox is displayed) while the green part, which uses an image as background is rendered correctly.
It’s really hard to debug such a big application. It will be much easier to provide help if you isolate the problem in a small live demo. Use this as a starter template: https://jsfiddle.net/f2Lommf5/
The entire stadium is a single model right now. Can you tell me the name or uuid of the goal objects? In this way we can identify the respective material and check the related properties.
Um, what happens if you use glTFExporter instead? You can use GLTFLoader to import the glTF file into your scene. Unfortunately, the JSON exporter is somewhat buggy so maybe it helps to use a different exporter.
I would recommend to export .obj file from blender, import it from threejs editor, apply all the material, export it using ‘export object’ from its file menu. And use THREE.ObjectLoader to load the file in your application.
Regarding the transparency issue, I would recommend keeping the object ( Goalpost ) as a separate entity while exporting it from blender.
Change to object hierarchy in such a way that the transparent object, i.e the goal post, is at the very end of the object tree. Also use material.side = THREE.DoubleSide.
Or else used use .renderOrder property such that the goal post gets render only after all the other object get rendered for each rendering loop.
Try this edited model. model.json (1.2 MB)
Open it in threejs editor
Here’s the result:
Note: Materials are applied only for the parts that have textures on it. You’ll need to add materials for the rest of the parts. Once done use THREE.ObjectLoader instead of THREE.JSONLoader to load it in your application.
Additional tip: There seems to be a lot to subobjects with same materials and texture. The performant way would be to have all object merged as single objects
Don’t look for grouping but look to merge the geometry that has common materials and textures. This will reduce the number of draw calls and will enhance the performance.
Example : All seat area into one mesh, all stairs into one mesh, both goalpost into one mesh, etc.
Have a look at this method of merging meshes in blender.
Also, aware that not to use costly materials unnecessarily. You can opt for MeshBasicMaterial if you are not using any exclusive property of MeshLamberMaterial