Rect Area Light not lighting up the fabric of Character model properly compared to the rest of the body

[beanladder]

In these 2 images, I have used RectAreaLight for the first image, and SpotLight for the 2nd image. The RectAreaLight is not lighting up the fabric properly, I am not sure of what is the problem here, is it because of a material issue or something ?

This is how the RectAreaLight for the Girl has been set up in the scene

{/* Girl Fill Light */}

            <rectAreaLight

                ref={girlRectFillRef}

                position={[60.5, 1.75, -3.7]}

                width={0.75}

                height={2}

                color="#a5c0d5"

                intensity={0.8}

            />

This is how the Girl Character’s material structure is setup in the .jsx file that has been generated through gltfjsx, not sure if it would help or not

<skinnedMesh

                    name="Body"

                    geometry={nodes.Body.geometry}

                    material={materials.Skin_Mat}

                    skeleton={nodes.Body.skeleton}

                    rotation={[Math.PI / 2, 0, 0]}

                    scale={0.01}

                    frustumCulled={false}

                />

                <skinnedMesh

                    name="cloth_low"

                    geometry={nodes.cloth_low.geometry}

                    material={materials.Cloth_Mat}

                    skeleton={nodes.cloth_low.skeleton}

                    rotation={[Math.PI / 2, 0, 0]}

                    scale={0.01}

                    frustumCulled={false}

                />

                <skinnedMesh

                    name="Face"

                    geometry={nodes.Face.geometry}

                    material={materials.Skin_Mat}

                    skeleton={nodes.Face.skeleton}

                    rotation={[Math.PI / 2, 0, 0]}

                    scale={0.01}

                    frustumCulled={false}

                />

                <skinnedMesh

                    name="Hair"

                    geometry={nodes.Hair.geometry}

                    material={materials['Hair&Shoes_Mat']}

                    skeleton={nodes.Hair.skeleton}

                    rotation={[Math.PI / 2, 0, 0]}

                    scale={0.01}

                    frustumCulled={false}

                />

                <skinnedMesh

                    name="L_Eye_Ball"

                    geometry={nodes.L_Eye_Ball.geometry}

                    material={materials.Skin_Mat}

                    skeleton={nodes.L_Eye_Ball.skeleton}

                    rotation={[Math.PI / 2, 0, 0]}

                    scale={0.01}

                    frustumCulled={false}

                />

                <skinnedMesh

                    name="L_Eye_Brow"

                    geometry={nodes.L_Eye_Brow.geometry}

                    material={materials.Skin_Mat}

                    skeleton={nodes.L_Eye_Brow.skeleton}

                    rotation={[Math.PI / 2, 0, 0]}

                    scale={0.01}

                    frustumCulled={false}

                />

                <skinnedMesh

                    name="L_Eye_lash"

                    geometry={nodes.L_Eye_lash.geometry}

                    material={materials.Skin_Mat}

                    skeleton={nodes.L_Eye_lash.skeleton}

                    rotation={[Math.PI / 2, 0, 0]}

                    scale={0.01}

                    frustumCulled={false}

                />

                <skinnedMesh

                    name="L_shoes"

                    geometry={nodes.L_shoes.geometry}

                    material={materials['Hair&Shoes_Mat']}

                    skeleton={nodes.L_shoes.skeleton}

                    rotation={[Math.PI / 2, 0, 0]}

                    scale={0.01}

                    frustumCulled={false}

                />

                <skinnedMesh

                    name="Lower_teeth"

                    geometry={nodes.Lower_teeth.geometry}

                    material={materials.Skin_Mat}

                    skeleton={nodes.Lower_teeth.skeleton}

                    rotation={[Math.PI / 2, 0, 0]}

                    scale={0.01}

                    frustumCulled={false}

                />

                <skinnedMesh

                    name="R_Eye_Ball"

                    geometry={nodes.R_Eye_Ball.geometry}

                    material={materials.Skin_Mat}

                    skeleton={nodes.R_Eye_Ball.skeleton}

                    rotation={[Math.PI / 2, 0, 0]}

                    scale={0.01}

                    frustumCulled={false}

                />

                <skinnedMesh

                    name="R_Eye_Brow"

                    geometry={nodes.R_Eye_Brow.geometry}

                    material={materials.Skin_Mat}

                    skeleton={nodes.R_Eye_Brow.skeleton}

                    rotation={[Math.PI / 2, 0, 0]}

                    scale={0.01}

                    frustumCulled={false}

                />

                <skinnedMesh

                    name="R_Eye_lash"

                    geometry={nodes.R_Eye_lash.geometry}

                    material={materials.Skin_Mat}

                    skeleton={nodes.R_Eye_lash.skeleton}

                    rotation={[Math.PI / 2, 0, 0]}

                    scale={0.01}

                    frustumCulled={false}

                />

                <skinnedMesh

                    name="R_shoes"

                    geometry={nodes.R_shoes.geometry}

                    material={materials['Hair&Shoes_Mat']}

                    skeleton={nodes.R_shoes.skeleton}

                    rotation={[Math.PI / 2, 0, 0]}

                    scale={0.01}

                    frustumCulled={false}

                />

                <skinnedMesh

                    name="Tounge"

                    geometry={nodes.Tounge.geometry}

                    material={materials.Skin_Mat}

                    skeleton={nodes.Tounge.skeleton}

                    rotation={[Math.PI / 2, 0, 0]}

                    scale={0.01}

                    frustumCulled={false}

                />

                <skinnedMesh

                    name="Upper_teeth"

                    geometry={nodes.Upper_teeth.geometry}

                    material={materials.Skin_Mat}

                    skeleton={nodes.Upper_teeth.skeleton}

                    rotation={[Math.PI / 2, 0, 0]}

                    scale={0.01}

                    frustumCulled={false}

                />

[Chaser_Code]

RectAreaLight work with units where 1 is 1 meter, not santimeter. Increasing intensity will give not good result. Try set scale of girl to 0.1 or 0.01

[beanladder]

Okay, but if it is properly lighting the skin of the character and the issue is only happening with the fabric, are you sure the problem is with the scale of the model ?

[Chaser_Code]

Not sure. I just remember that rectarealight love small objects and to be close to them.

[Chaser_Code]

RectAreaLight only MeshStandardMaterial and MeshPhysicalMaterial are supported.

[beanladder]

Okay, Yeah this could be one of the reasons, I checked the material property differences between all the present materials, seems like it only consists of the materials supported by the rect area light.

In the image that you shared with the last response, the first image ? Is the character using MeshPhysicalMaterial?

[Chaser_Code]

MeshPhongMaterial. Can you send model?
My material: model.material=new THREE.MeshStandardMaterial({});

[beanladder]

Hey man, I fixed it, I just had to play around with the metalness and roughness of the cloth material for it to work.I feel pretty dumb but thanks for reaching out to help me!!