Missing feature MeshFaceMaterial

[SkylightDev]

How is it possible to implement something like this: http://jsfiddle.net/oep968wh/ without having MeshFaceMaterial ?

I need to make some of the faces transparent and this was the only example I saw.

Thanks, Johnny

[toxicFork]

For now I'd do something like this:

componentDidMount(){
    const group = this.refs.group;

    // geometry
    var geometry = new THREE.BoxGeometry( 100, 100, 100, 4, 4, 4 );

    // materials
    materials = [
        new THREE.MeshLambertMaterial( { color: 0xffff00, side: THREE.DoubleSide } ),
        new THREE.MeshBasicMaterial( { transparent: true, opacity: 0 } )
    ];

    // assign material to each face
    for( var i = 0; i < geometry.faces.length; i++ ) {
        geometry.faces[ i ].materialIndex = THREE.Math.randInt( 0, 1 );
    }
    geometry.sortFacesByMaterialIndex(); // optional, to reduce draw calls

    // mesh
    mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ) );
    group.add( mesh );
}

render(){
    return (<group ref='group' />);
}

Ideal solution is not yet implemented (may take a bit to implement):

render() {
    return (<mesh>
        <boxGeometry
            sortFacesByMaterialIndex={true}
            width={100}
            height={100}
            length={100}>
            <faceInfo index={0} materialIndex={1} />
            <faceInfo index={1} materialIndex={0} />
            <faceInfo index={2} materialIndex={1} />
        </boxGeometry>
        <meshFaceMaterial>
            <meshLambertMaterial ... />
            <meshBasicMaterial ... />
        </meshFaceMaterial>
    </mesh>);
}

[justinjdickow]

The proposed solution doesn't work for me when I try to use

    for( var i = 0; i < geometry.faces.length; i++ ) {
        geometry.faces[ i ].materialIndex = THREE.Math.randInt( 0, 1 );
    }
    geometry.sortFacesByMaterialIndex(); 

Also wondering how I can use the rotation prop on the mesh component when using it in this way

update: I added rotation using <group ref='group' rotation={this.state.cubeRotation}/>

[milanzigmond]

hi, any progress on this issue? I'm in a situation where I need to change geometry through the props and using multiple materials. Since the workaround needs to be in componentDidMount && I can't use materials directly in render. Any suggestions? Thanks

[toxicFork]

Hi @milanzigmond a community member is working on a potential implementation of multi materials, but not sure when that would be completed and merged. For now you can use componentDidUpdate in a similar way to componentDidMount in order to update custom properties on the object whenever the state changes.