View Cube box icon

Hi
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:
image

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 - https://www.npmjs.com/package/three-screen-quad
  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:
http://192.241.199.119:8080/dev/viewCube/

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.

4 Likes

Just tried to make a concept with css 3d cube.
The cube was taken from here: https://3dtransforms.desandro.com/cube
And transformation matrix was spied from the source code of THREE.CSS3DRenderer().
The result is here:
https://jsfiddle.net/prisoner849/Lu340mpf/

3 Likes

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