CODEWITHSUNDEEP
javascriptwebglthree.js
theeggman85
theeggman85

Reputation: 1825

Three.js: Render an HTML page / DOM element onto the face of a cube?

I am trying to adapt the example file canvas_geometry_cube.html provided with the Three.js package, and change each face of the cube to show an HTML page / DOM element (preferably DOM element). I look a look at ParticleDOMMaterial, but I have no idea how to use it or what it does. Can anyone help with this?

Upvotes: 6

Views: 10641

Answers (2)

Nexii Malthus
Nexii Malthus

Reputation: 715

To update this old question from some recent improvemetns in Three.js and for future readers

Three.js actually supports CSS3D as a render output now and therefore you can manipulate a HTML page / DOM elements using CSS 3D transforms.

For an example, see here: http://mrdoob.github.io/three.js/examples/css3d_periodictable.html

Upvotes: 4

methodofaction
methodofaction

Reputation: 72385

DOMRenderer isn't a full 3d renderer, it's just able to apply z-indexes and scale, so a rotating cube through DOMRenderer is out of the question.

You could use html2canvas and apply it as a bitmap texture on the cube. I haven't really used html2canvas, but the demos are pretty impressive. Your mileage may vary.

Perhaps a better fit for your project would be CSS3 3D transforms. There is a library helps with this kind of problem called traqball, https://github.com/dirkweber/traqball.js.

You can view a demo here: http://www.eleqtriq.com/wp-content/static/demos/2010/rotation/index.html

Upvotes: 2

Related Questions