Why isn't Bounds correctly centering the camera until I resize the element?

Questions
, , ,
1

I have a react app. I am using a drei Bounds element to fit the models to the view. It does not work when the view is first rendered, the models do not fit on the screen. But when I resize the view, Bounds adjusts the camera and the models fit as expected.

I have tried manually updating the fit, as shown at the bottom, but that also had no effect.
It is not a timing issue because I had a button hooked up to execute the manual fit and there was still no effect.

Can any one tell me why Bounds is not working correctly from the start?

        <Canvas id={canvasId}>
            <GizmoHelper alignment="top-right" margin={[60, 60]}>
                <GizmoViewport labelColor="white" axisHeadScale={1} />
            </GizmoHelper>
            <DreiCamera makeDefault position={[0, 0, 1000]}>
                <ambientLight intensity={0.1} />
                <directionalLight color="white" position={[0, 0, 1000]} />
            </DreiCamera>
            <OrbitControls
                makeDefault
                rotateSpeed={0.8}
                zoomSpeed={0.075}
                enablePan={true}
                enableZoom={true}
            />

            <Bounds fit clip observe>
                    {groups.map((group: Group) => {
                        return (
                           <PivotControls
                               key={group.id}
                                scale={20}
                                lineWidth={2}
                                activeAxes={[true, true, true]}
                                depthTest={false}
                                autoTransform={false}
                                anchor={[0, 0, 0]}
                                matrix={matrix}
                            >
                                <Clone object={group}></Clone>
                            </PivotControls>
                        );
                    })}
            </Bounds>
        </Canvas

    const bounds = useBounds();
    useEffect(() => {
        bounds?.refresh().reset().clip().fit();
    }, [
        bounds,
        groups,
        toggle,
        scene,
        camera,
    ]);
2

do you have a sandbox? it’s hard to guess from that code

3

This is still an issue: exact same symptom. I don’t have a sandbox right now, but has anyone else found a solution? (Or original poster?)