Scaling Issue with Child Objects and Performance Problem with Outline in React-Three-Fiber

Questions
, , ,
1

Hello Three.js Community,

I’m working on a project using React-Three-Fiber and encountering two main issues:

  1. Child Object Not Scaling: When I scale the parent object (gltf.scene), the child object doesn’t scale accordingly. It remains at its original size. This issue is evident because the outline effect, applied to the child object, retains the original size of the object. Here’s the relevant code snippet:
const gltf = useGLTF(url);
gltf.scene.scale.setScalar(10);

As seen, both the parent and the child object are intended to be scaled, but the child object doesn’t scale as expected.

2.Performance Issue with Outline and Select Tag: I’m also facing performance issues, particularly with the “Select” tag and the “Outline” effect in my implementation. The code related to this issue is:

<Selection>
  <primitive object={gltf.scene}/> 
  <EffectComposer multisampling={8} autoClear={false}>
    <Outline  visibleEdgeColor="green" edgeStrength={51}/>
  </EffectComposer>  

  {selectedChildCopy && (
    <Select enabled={true}>
      <primitive object={selectedChildCopy}/>
    </Select>     
  )}
</Selection>

The performance drops significantly when the outline is applied, especially with the “Select” component.

Could anyone provide insights or solutions to these problems? Specifically, how can I ensure that the child object scales with the parent and how to optimize the performance when using the “Select” and “Outline” components?

Any help or suggestions would be greatly appreciated!

2

Any suggestions or advice on this? I am pretty lost in this and i cant explain why… Can the Community help me out, why i am facing this issues ?

3

postpro can take a performance toll. it depends on how many passes, resolution, number of vertices etc. it would be best if you had a sandbox.

other than that i do not understand the code. you are putting the entire scene in, but how do you plan to highlight separate parts then? imo the correct way would be to use gltfjsx so that the scene is under your control. similar to this box: