Making dynamic model during onclick

Hi friends, i am new and beginner to three js i was creating a static color customizing to my model object but i want to do some dynamic thing in model so that when ever i click any part of my gltf model color should change or give me some options of color to choose, please can anyone help me out in this. below is my static model source code

var theModel;
        var cameraFar = 5;

        const BACKGROUND_COLOR = 0xf1f1f1;
        const scene = new THREE.Scene();
        scene.background = new THREE.Color(BACKGROUND_COLOR );
        scene.fog = new THREE.Fog(BACKGROUND_COLOR, 20, 100);

camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.z = cameraFar;
        camera.position.x = 0;

        //render
        renderer = new THREE.WebGLRenderer({ antialias: true, });
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.shadowMap.enabled = true;
 document.body.appendChild(renderer.domElement);

const controls = new THREE.OrbitControls(camera, renderer.domElement);
        controls.minDistance = 3;
        controls.maxDistance = 5;

var dirLight = new THREE.DirectionalLight( 0xffffff, 0.54 );
            dirLight.position.set( -8, 12, 8 );
            dirLight.castShadow = true;
            dirLight.shadow.mapSize = new THREE.Vector2(1024, 1024);
        // Add directional Light to scene    
            scene.add( dirLight );
function init2(){

        const legsMaterial = new THREE.MeshPhysicalMaterial( {

            color: 0xff0000, metalness: 0.25, roughness: 0

       

        } );

        const cushionsMaterial = new THREE.MeshStandardMaterial( {

            color: 0xffffff, metalness: 0.25, roughness: 0

        } );

        const backMaterial = new THREE.MeshPhysicalMaterial( {

            color: 0xffffff, metalness: 0.25, roughness: 0

        } );

        const supportsMaterial = new THREE.MeshPhysicalMaterial( {

            color: 0xffffff, metalness: 0.25, roughness: 0

        } );

        const baseMaterial = new THREE.MeshPhysicalMaterial( {

            color: 0xffffff, metalness: 0.25, roughness: 0,

        } );

                const legsColorInput = document.getElementById( 'legs' );

                legsColorInput.addEventListener( 'input', function () {

                    theModel.getObjectByName( 'legs' ).material = legsMaterial;

                    legsMaterial.color.set( this.value );

                } );

                const cushionsColorInput = document.getElementById( 'cushions' );

                cushionsColorInput.addEventListener( 'input', function () {

                    theModel.getObjectByName( 'cushions' ).material = cushionsMaterial;

                    cushionsMaterial.color.set( this.value );

                } );

                const backColorInput = document.getElementById( 'back' );

                backColorInput.addEventListener( 'input', function () {

                    theModel.getObjectByName( 'back' ).material = backMaterial;

                    backMaterial.color.set( this.value );

                } );

                const supportsColorInput = document.getElementById( 'supports' );

                supportsColorInput.addEventListener( 'input', function () {

                    theModel.getObjectByName( 'supports' ).material = supportsMaterial;

                    supportsMaterial.color.set(this.value);

                } );

                const baseColorInput = document.getElementById( 'base' );

                baseColorInput.addEventListener( 'input', function () {

                    theModel.getObjectByName( 'base' ).material = baseMaterial;

                    baseMaterial.color.set(this.value );

                } );

            }

       

        function init(){

        var loader = new THREE.GLTFLoader();

       

        loader.load('assets/chair.glb', function(gltf) {

            gltf.scene.scale.set(1,1,1);

            gltf.scene.rotation.y = Math.PI/4;

            gltf.scene.position.y = -1;

            theModel = gltf.scene;

            scene.add( theModel );

        //console.log(theModel);

        theModel.traverse(function (child) {

       if (child instanceof THREE.Mesh) {

         console.log(child);

            }

        });

       

    });

}    

            function animate() {

                renderer.render(scene, camera);

                requestAnimationFrame(animate);

               

                if (resizeRendererToDisplaySize(renderer)) {

                    const canvas = renderer.domElement;

                    camera.aspect = canvas.clientWidth / canvas.clientHeight;

                    camera.updateProjectionMatrix();

                }

                }

            animate();

                // Function - New resizing method

                function resizeRendererToDisplaySize(renderer) {

                    const canvas = renderer.domElement;

                    var width = window.innerWidth;

                    var height = window.innerHeight;

                    var canvasPixelWidth = canvas.width / window.devicePixelRatio;

                    var canvasPixelHeight = canvas.height / window.devicePixelRatio;

                    const needResize = canvasPixelWidth !== width || canvasPixelHeight !== height;

                    if (needResize) {

                       

                        renderer.setSize(width, height, false);

                    }

                    return needResize;

                    }
           init();
            init2();

Hi!
For some ideas, have a look at this codepen:

yeah i got this but how to perform event for model children as i have use in static file getobjectbyname() then used colorpicker for all the child creating seperate functions for all child.

in the offchance that you can consider react + three, all this is natural. this is how it feels working with it, a click handler changing color is absolutely nothing, not even an afterthought you just do it in a second:

ps, this is the full app: Shoe configurator - CodeSandbox

1 Like

is it possible with only three js and not with react…?

sure, if you go by @prisoner849 demo you see all the fundamentals that you need, you just need to apply them to your use case. just mentioned it, sometimes people have worked with frameworks already.

1 Like

yeah i have seen using frameworks, but i just wanted to do in three js in some instance i have done but not getting how to call gltf model child in raycast intersection. bcz most of examples are creating different objects.