View Cube box icon

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