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.

1 Like
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
10

I think I learned the very basic of R3F now. The two great circles really do not appear, but I changed your code to using OrbitControls and added an option to “autorotate” the scene. There is an additional “reset” button to change the center of rotation to the center of the bounding box.

I also changed the hover to double click, so it does not interfere with the mouse interaction for rotation. When you double click, it also checks the Leva “part” selected in the interface. Then I added an environment and three reflective spheres to test my understanding of the subject.

I really do not like sandbox (or at least, my computer is too slow for it), so I deployed in Vercel.

Here is the source

If you really want to use ArcballControls, I think you will have access it directly in threejs…

The selection of parts with the mouse can select more than one part at a time, and it is necessary to filter the result to get only the closest object to the viewer, but I do not know to to that yet using R3F.

I really think R3F is just for displaying simple scenes when using react, and I was not able to avoid using nodejs by loading everything in the browser, as I used to do without R3F. Testing would be simpler this way…

11

I think this is pretty easy in r3f with e.stopPropagation().

1 Like
12

Thanks a lot. That was it.

1 Like