The image on the left is in a html document, the one on the right is in angular.
LEFT: I generate the buffergeometry and store it as a Group, which is then constructed into the larger structure. From there it is compiled using browserify (from a typescript project) and the resulting image is from an example html file.
The same data is also added to an npm module and imported in an angular project, where the result is as in the RIGHT screenshot. (As you can see the corners are missing). The only difference between the 2 render setups is that one of them is typescript with browserify, and the other is webpacked by angular…
Does anyone know what might be causing something like this?
I’m not sure but the problem could be related to same issue we’ve lately discussed in WebGL: INVALID_ENUM: bufferData: invalid usage with model from external source. If the imported data are three.js entities (Mesh, BufferGeometry etc.) created with a separate copy of the three.js library, the engine will have problems to process these data.
Can you please describe in more detail how the data are imported from the npm module?
Here is the exact code we are using to convert the custom object names Group to a three.js THREE.Group We are using a 2D library that generates the 3D meshes for us, but the format is converted to threejs objects for rendering at runtime initialization. From the html I can say that the generated geometry is valid, and both projects use the same version of threejs
the exact code I am executing to put it in the scene is hatebin