0

I have a Model that has a texture and a solid color using MeshFaceMaterials, But i read that BufferGeometry faces materials its not supported.

What options are there for keeping some parts of the model differnt colors or texture for each instance.

I have been following this example, wiht instancing selected. https://threejs.org/examples/#webgl_interactive_instances_gpu

I would be more then happy if my Track model could have 2 parts of it be solid black and 4 parts of it solid brown. But at the moment the only way i see to do that is to create two sets of instance and rip my model apart into two models.

Edited After reading reply

I think i mispoke I current have in array of MeshLambertMaterial called materials

    function makeInstanced(geo, materials) {

        //  var vert = document.getElementById( 'vertInstanced' ).textContent;
        //  var frag = document.getElementById( 'fragInstanced' ).textContent;

        //var material = new THREE.RawShaderMaterial({
        //    vertexShader: vert,
        //    fragmentShader: frag,
        //});

        var material = new THREE.MultiMaterial(materials);

        var bgeo = new THREE.BufferGeometry().fromGeometry(geo);
        geometryList.push(bgeo);

        var mcol0 = new THREE.InstancedBufferAttribute(
            new Float32Array(instanceCount * 3), 3, 1
        );
        var mcol1 = new THREE.InstancedBufferAttribute(
            new Float32Array(instanceCount * 3), 3, 1
        );
        var mcol2 = new THREE.InstancedBufferAttribute(
            new Float32Array(instanceCount * 3), 3, 1
        );
        var mcol3 = new THREE.InstancedBufferAttribute(
            new Float32Array(instanceCount * 3), 3, 1
        );

        var igeo = new THREE.InstancedBufferGeometry();
        geometryList.push(igeo);
        igeo.addAttribute('mcol0', mcol0);
        igeo.addAttribute('mcol1', mcol1);
        igeo.addAttribute('mcol2', mcol2);
        igeo.addAttribute('mcol3', mcol3)

        var vertices = bgeo.attributes.position.clone();
        igeo.addAttribute('position', vertices);

        // var matrices = new THREE.InstancedBufferAttribute(
        //  new Float32Array( instanceCount * 16 ), 16, 1
        // );

        var matrix = new THREE.Matrix4();
        var me = matrix.elements;
        for (var i = 0, ul = mcol0.count; i < ul; i++) {

            //Height Width X, Y, Z, ALPHA
            randomizeMatrix(matrix);

            //Create Object
            var object = new THREE.Object3D();
            objectCount++;
            object.applyMatrix(matrix);

            //Add Object To Matrix
            mcol0.setXYZ(i, me[0], me[1], me[2]);
            mcol1.setXYZ(i, me[4], me[5], me[6]);
            mcol2.setXYZ(i, me[8], me[9], me[10]);
            mcol3.setXYZ(i, me[12], me[13], me[14]);

        }

        var mesh = new THREE.Mesh(igeo, materials);
        scene.add(mesh);
    }
Mark Rover2341
  • 116
  • 1
  • 8
  • see https://stackoverflow.com/a/32824915/5250847. Instead of using `MultiMaterial` (which is deprecated) you can pass in a simple array of materials to the `Mesh` constructor. – Mugen87 Jul 05 '18 at 21:07
  • I dont understand the "geometry.clearGroups(); geometry.addGroup( start1, count1, 0 ); // zero geometry.addGroup( start2, count2, 0 ); // zero" from the link you added can you expand on that? – Mark Rover2341 Jul 05 '18 at 21:34
  • https://threejs.org/examples/#webgl_interactive_instances_gpu This has examples of doing it with multimaterials should i assume thats the most efficient way of doing it? and the approch i am going with so far is just incorrect for this? – Mark Rover2341 Jul 05 '18 at 21:44

0 Answers0