View Cube box icon

I want to show a view cube box or Orientation cube to show different views(i.e .front,top,right etc) of my CAD models.I am showing different views on button click but i need this in view cube box click icon.
the icon i am looking for is like this:

I don’t know from where to start this
Can anybody suggest or share any code for this.

I made a simple version of this and am trying to see if work wants to open source it. Not quite the OnShape view cube you posted but the functionality is there.

At a high level.

  1. render the cube element somewhere on screen at some size. For this I used a render target and an npm module i wrote -
  2. Make some geometry that looks like what you want. For this i just made 6 planes, and arranged them to look like a cube.
  3. Render text - for this i used a canvas rendered texture, and made an atlas out of it. Each plane looks up an area with words FRONT, TOP etc.
  4. Add interaction. For this i used mouse events and a raycaster.
  5. Rotate the cube and apply rotation to something. For this i made a callback and slerp a quaternion.

I cant share the code, but i can show the result:

1 Like

hey @pailhead past a year from your response, do u still think u can’t share some sample code of that viewCube sample? that’s exactly the kind of functionality that I’m looking for… tks!

Unfortunately i can’t share this specific code, but i wanted to write a new module for NPM, it’s just going to take a while :frowning:

Here is a HTML based one THREE.OrientationControls

It can use perspective or stay orthographic, in the included example you can click the sides to snap to them.


Just tried to make a concept with css 3d cube.
The cube was taken from here:
And transformation matrix was spied from the source code of THREE.CSS3DRenderer().
The result is here:


Thanks, exactly what I was trying to find! :slight_smile:

I’m wondering why we don’t have more samples or even a consolidated npm package with this feature… I think this is as important as the OrbitControl for instance…

1 Like