View Cube box icon

sonali_funde · July 19, 2018, 9:41am

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:

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

pailhead · December 8, 2019, 10:54am

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.

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
Make some geometry that looks like what you want. For this i just made 6 planes, and arranged them to look like a cube.
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.
Add interaction. For this i used mouse events and a raycaster.
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/

GersonDias · August 16, 2019, 6:21pm

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!

pailhead · August 17, 2019, 6:34pm

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

Fyrestar · August 18, 2019, 5:36am

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.

prisoner849 · August 18, 2019, 1:49pm

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/

GersonDias · August 19, 2019, 11:59am

Thanks, exactly what I was trying to find!

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…

AjayVenkatesh · December 2, 2019, 11:42am

https://jsfiddle.net/vtjz43h9/

yoavmil · April 23, 2020, 10:01pm

I’m working on an NPM for this. You can find it mid-way here.
I’m wondering how to handle the click event on the cube? for now it rotates the camera to the correct angle. But I’m wondering about the option to fit the main scene to the camera. The question is what API to expose.