ThreeJS Cone Material Issue

The issue you're experiencing with your cone having three materials instead of two after loading from the database is likely related to how Three.js serializes and deserializes objects, and how material groups are handled in the ConeGeometry.

Possible Causes

1. Material Group Mismatch: ConeGeometry typically has two material groups - one for the conical sides and one for the base. Your code is correctly assigning materials to these groups, but during serialization/deserialization, the material assignments might be getting altered.

2. Serialization Issues: When saving to and loading from a database, Three.js objects need to be properly serialized and deserialized. If this process isn't handled correctly, it can lead to unexpected behavior like additional materials.

3. Outline Service Effect: The outlineService.addOutline() method might be modifying the mesh's material structure, potentially adding an additional material for the outline effect.

Solutions

Here are some approaches to resolve this issue:

1. Explicitly Set Material Indices

Make sure your ConeGeometry groups have the correct material indices explicitly set:

TYPESCRIPTCopied
const geometry = new THREE.ConeGeometry(isForSelector ? 1.5 : 10, isForSelector ? 3 : 20, 32);

// ConeGeometry typically has 2 groups - sides (0) and base (1)
if (geometry.groups.length === 2) {
    geometry.groups[0].materialIndex = 0; // Side material
    geometry.groups[1].materialIndex = 1; // Base material
}

const mesh = new THREE.Mesh(geometry, materials);

2. Inspect and Fix After Loading

After loading from the database, inspect and fix the material assignments:

TYPESCRIPTCopied
function fixConeAfterLoading(coneMesh) {
    // Reset to only two materials if there are more
    if (Array.isArray(coneMesh.material) && coneMesh.material.length > 2) {
        // Keep only the first two materials
        coneMesh.material = [coneMesh.material[0], coneMesh.material[1]];
    }
    
    // Ensure geometry groups have correct material indices
    if (coneMesh.geometry.groups.length === 2) {
        coneMesh.geometry.groups[0].materialIndex = 0;
        coneMesh.geometry.groups[1].materialIndex = 1;
    }
}

3. Check Your Serialization Process

Ensure your serialization/deserialization process correctly handles material arrays:

TYPESCRIPTCopied
// When saving to database
function serializeMesh(mesh) {
    const data = {
        geometry: mesh.geometry.toJSON(),
        materials: Array.isArray(mesh.material) 
            ? mesh.material.map(m => m.toJSON()) 
            : [mesh.material.toJSON()]
        // Add other properties as needed
    };
    return JSON.stringify(data);
}

// When loading from database
function deserializeMesh(jsonData) {
    const data = JSON.parse(jsonData);
    const geometry = new THREE.BufferGeometry().fromJSON(data.geometry);
    const materials = data.materials.map(m => new THREE.MeshBasicMaterial().fromJSON(m));
    
    return new THREE.Mesh(geometry, materials);
}

4. Check the Outline Service

Review how your outline service is modifying the mesh. It might be adding an additional material for the outline effect. You may need to adjust how outlines are applied or reapply them after loading from the database.

By implementing these solutions, you should be able to resolve the issue with the extra material and ensure your cone displays correctly after loading from the database.