Hello Everyone I am Creating text in my Scene
const options = {
size: 1,
height: 0.5,
curveSegments: 3,
bevelEnabled: true,
bevelThickness: 0.01, //10
bevelSize: 0.01, //8
bevelOffset: 0,
bevelSegments: 5
}
const geometry = new THREE.TextBufferGeometry(text, {font: font, ...options});
const material = [ new THREE.MeshPhongMaterial({color: 0x000000 }), // front
new THREE.MeshPhongMaterial({color: 0x072F5F }), // side ];
const text_mesh = new THREE.Mesh(geometry, material);
and getting this result
and after exporting this model and opening with Three.js Editor I am getting only one color
This is a known issue. More details here:
opened 06:14PM - 28 Mar 21 UTC
Enhancement
**Describe the bug**
A model that uses multiple materials on a single mesh do… es not always export to glTF in a way that preserves the multiple materials.
Specifically, I noticed the problem with non-indexed geometry. It looks like it does work for indexed geometry.
**To Reproduce**
Steps to reproduce the behavior:
1. Go to https://codesandbox.io/s/pensive-microservice-iq2vp
2. See that the cube has different colors on each side, due to multiple materials each assigned to a group on the geometry.
3. Click the "Download .gltf" button. (Unfortunately couldn't get the fancy download button to work. But it logs the glTF JSON to the console in the code sandbox. And [here's a gist](https://gist.github.com/wnayes/da34358701951667cf8407d10a10bba4) with what the JSON result is.
3. Import the cube gltf into something like Blender and observe that all sides are one color.
***Code***
The full example is in the sandbox:
https://codesandbox.io/s/pensive-microservice-iq2vp
But the important parts are as follows:
```js
const geometry = new THREE.BoxBufferGeometry( 10, 10, 10 );
geometry.clearGroups();
geometry.addGroup( 0, 6, 0 );
geometry.addGroup( 6, 6, 1 );
geometry.addGroup( 12, 6, 2 );
geometry.addGroup( 18, 6, 3 );
geometry.addGroup( 24, 6, 4 );
geometry.addGroup( 30, 6, 5 );
geometry = geometry.toNonIndexed(); // Important for repro
const materials = [
new THREE.MeshBasicMaterial( { color: 0xFFFFFF, visible: true } ),
new THREE.MeshBasicMaterial( { color: 0xFF0000, visible: true } ),
new THREE.MeshBasicMaterial( { color: 0x00FF00, visible: true } ),
new THREE.MeshBasicMaterial( { color: 0x0000FF, visible: true } ),
new THREE.MeshBasicMaterial( { color: 0xFFFF00, visible: true } ),
new THREE.MeshBasicMaterial( { color: 0x00FFFF, visible: true } )
];
const mesh = new THREE.Mesh(geometry, materials );
scene.add( mesh );
```
```js
const exporter = new GLTFExporter();
exporter.parse(scene, function (gltfJson) {
console.log(gltfJson);
}, { binary: false });
```
**Screenshots**
Cube in code sandbox rendered by three.js:
Cube in Blender after glTF export with GLTFExporter:
**Platform:**
- Browser: [Chrome]
- Three.js version: [0.126.1]
**Observations**
In the glTF file that is created, the primitives of the mesh all use different `material`s as expected, but they all share the same `attributes` which appears to be the cause of the render issue.
In GLTFExporter `processMesh`, I think we'd need to create separate accessors for each group. This is done when `geometry.index !== null` in the groups loop towards the bottom of `processMesh`, but for non-indexed there is no equivalent handling.
Is there any solution for this ?
