Rotating Cube to contain Pages of text

[GMelencio]

@theo-armour In response to your "everything in 3D" we'd like to make our website a 6-sided cube where

1. each face of the cube is rendered with a page at a certain URL - so instead of a static image on the face of a cube, it uses the text & images of a webpage. James achieved something similar with CSS3D at ttp://abantech-blog.cloudapp.net:8080/landing.html but we'd prefer something more elegant in ThreeJS and trust that you can do better.

2. we'd like the cube to "flip" to the side in which the user's mouse hovers. So if the user hovers the mouse at the bottom side of the cube the cube flips downward (reveleing the face that was previously at the "bottom" of the cube), if the user hovers on the right side of the cube it will flip to the left (revealing the face that was previously at the "right side" of the cube).

I created a simple sample here: http://abantech.net/SimpleRotatingCube.html - this cube just flips in the x or y every 2 seconds. What we need it to be is to do so interactively (as stated above).

If it could have some kind of "peek" at the next screen before the movement happens or "bounce" effect after the rotation completes, that would be a great plus!

3. Another cool "plus" is if we could have a plane INSIDE the Cube that shows either videos or live threejs demos. This plane will not move, but simply display different content. This implies that the faces of the cube will not be 100% opaque.

As you can see this is all coding work - can you assist?

[theo-armour]

@GMelencio

1. each face of the cube is rendered with a page at a certain URL -
   so instead of a static image on the face of a cube, it uses the text & images of a webpage ...
   but we'd prefer something more elegant in ThreeJS and trust that you can do better.

In his demo, James embedded Jerome Etiennes Three.js/ThreeX work as decscribed here:

http://learningthreejs.com/blog/2013/04/30/closing-the-gap-between-html-and-webgl/

It's a both a delightful and a dreadful hack.

And it remains to this day, the only remotely reasonable way of getting HTML pages and Three,js to display 'together'

In any case, a lot of thought has to be given as to how you would navigate through the links of a 2D HTML page in 3D.

1. we'd like the cube to "flip" to the side in which the user's mouse hovers.

Something like this?

• https://threejs.org/examples/#canvas_geometry_cube

1. Another cool "plus" is if we could have a plane INSIDE the Cube that shows either videos or live threejs demos.

Videos on Three.js surfaces - unlike HTML - is a piece of cake.

• https://threejs.org/examples/?q=vid#webgl_materials_video

See also my examples:

• http://jaanga.github.io/cookbook/video-surfaces/r2/threejs-video-surface-transcend.html
• https://github.com/jaanga/cookbook/tree/gh-pages/video-surfaces/r2
• broken: https://github.com/jaanga/gestification/tree/gh-pages/cookbook/handy-videos

---

BTW, I leave on Sunday for a week in Bend OR. Probably won't get much coding done.