I’m working on a project where I’m rendering a 3D mesh with vertex colors using Three.js and React. The mesh is displayed correctly with colors in my application. However, when I export this mesh to the USDZ format using the USDZExporter from Three.js, the resulting USDZ model appears without any colors when viewed in an external USDZ viewer (e.g., https://www.usdz-viewer.net/).
Here’s a visual representation of the issue:
Colored mesh rendered correctly in my application
I’m following the recommended steps to set up vertex colors, normals, and proper lighting in my Three.js scene:
Using THREE.MeshStandardMaterial with vertexColors: true and blending: THREE.NormalBlending.
Adding an ambient light to the scene for proper illumination.
Computing and setting vertex normals for the geometry.
This is the code for the download USDZ function
And this is the Material using the color from the geometry
I tried to use GLTF Exporter and it works pretty well (showing the colors) but not with exported USDZ mesh appear colorless.
Why would that be a case?
It could be so that the USDZExporter does not process vertex colors at all. When you try with a texture instead of vertex colors, does it work?
If you can drop the same model into the three.js editor ( three.js editor), export to USDZ, and have the same issue, then I’d recommend filing a bug. This should be supported but there can be issues with different Apple USDZ viewers, or normalized vs non-normalized color attributes, etc.
1 Like
So I tried this before and I must be failing at some aspect as it gave me greenish effect on application surface.
I added map: texture (in the meshStandardMaterial)
I reverted back to original code
Can you explain what I could use instead of vertexColors:true, to add the geometry colors to the material?
@Sahaj_singh Most likely you have not set any UV coordinates for the vertices (and the color of one of the corners of the texture is used across the whole object).
I had a quick look in the USDZExporter code, I saw that positions, normals, material colors, textures are processed, but I didn’t see anything about vertex colors. Maybe this it is just a missing feature, not a bug. Or I might be too tired and didn’t see the vertex colors.
2 Likes
Hey thanks a ton Pavel, You pivoted me into the right direction with the idea of looking into the USDZExporter codebase, apparently it didn’t have the support for vertex colors as expected.
I have raised a pull request and the issue USDZExporter - Support for exporting vertex colours in USDZ format · Issue #27942 · mrdoob/three.js · GitHub for the solution that works for me (albeit on the online viewers).
like
- https://www.usdz-viewer.net/
- 3D Model Converter Online (Free) | Convert 3D
However, Mugen (one of the maintainers) noted that the generated USDZ meshes still don’t display colors properly in macOS Preview. Since I’m on Windows, I’m unable to replicate and troubleshoot this directly.
If anyone in the community has insights into why this discrepancy across viewers might be happening, I’d be very interested to learn more
1 Like
@Sahaj_singh your proposed changes seem to work fine, at least on my end.
I have updated both USDZ exporter and loader in my repository and if you would care to test it here is the link to my USDZ Viewer.
EDIT:
Just to mention that my versions of USDZ exporter and loader are slightly different than those in three.js repository. Some models might need flatShading turned on (button F in the viewer) to become visible.
1 Like
