ArcballControls no gizmos visible

Questions
,
1

Hey there,

I am trying to implement ArcballControls into a react project. Everything works fine except showing the gizmos.

I am setting the values to true and they are still not visible. Here you can find a reproduction:
https://codesandbox.io/p/sandbox/react-pp-outlines-forked-kwgwxy

And this should be the expected behavior (with gizmos): three.js examples

What am I doing wrong?

2

Have you tried .setGizmosVisible

3

Yes, I just added it to the codesandbox, but unfortunately it still doesn’t show the gizmos

4

Notice, you import the Gizmo but you don’t render it anywhere. (A little hint - when the import is grayish…)

Also, the problem is the Composer and its rendering order. Try this

<Suspense fallback={null}>
        // ...
</Suspense>
<GizmoHelper renderPriority={2} alignment="bottom-right" margin={[80, 80]}>
       <GizmoViewport axisColors={["red", "green", "blue"]} labelColor="black" />
</GizmoHelper>
5

This is only going to display the helper. I think he wants to see the two great circles from the ArcballControls.

I would also update the versions of the packages (the only way I could build the project locally):

"dependencies": {
    "@react-three/drei": "9.114.0",
    "@react-three/fiber": "8.17.8",
    "@react-three/postprocessing": "2.16.2",
    "leva": "0.9.28",
    "lodash-es": "4.17.21",
    "react": "18.2.0",
    "react-colorful": "5.5.1",
    "react-dom": "18.2.0",
    "react-scripts": "5.0.1",
    "three": "0.168.0",
    "valtio": "1.6.1"
  },

Note that three 0.169.0 does not work. I used the previous one: 0.168.0

6

I just added it to the sandbox and it works fine. However, not like I expected.

As @promac already said: I am looking for the 3 cycles around the model (see here)
I checked the code from the provided example from three.js itself, and it looks like they’re just setting the variable to true (see here) . So for me, it’s very confusing why it works for them and not for me.

@promac I just checked your dependencies, and it looks like it won’t render anymore. You can see a nearly created devbox (with your dependencies) here: https://codesandbox.io/p/devbox/j59hcd

Can you provide a working example with the cycle gizmos?

7

The zoom is not working, because of the clipping planes:

camera={{ position: [0, 0, 100], fov: 35, near: 0.001, far: 2000 }}

I have never used react-fiber before. I just downloaded your project and then used:

npm install
npm start

Screen Shot 2024-09-27 at 8.33.52 AM
Screen Shot 2024-09-27 at 8.33.52 AM1920Ă—969 70.4 KB

However, it is just a question of making the Gizmos visible/invisible.

You can take a look at the viewer I was working on.

Viewer

You just need to press “s” (or check the Stats checkbox) to behold the Gizmos in action. You can use the “Arrow Down” in the keyboard to see the menu in the desktop. Then you can browse the Documentation and see the source.

8

I just checked your provided stats example and it looks like you are also just using the

controls.setGizmosVisible(visible);

(see here)

Maybe I am missing something, but I guess I am doing the same:
image

9

Yes, exactly. I also tried changing your code, but no joy. However, the zoom and pan is working fine now, using the new clipping planes…

As I told you, I am seeing react-fiber for the first time. I can not tell you whether this feature has ever worked. Nonetheless, learning react-fiber is on my todo list, and your code is a good starting point for me…

1 Like