I am trying to show HTML content on the sides of a cube. This entire project is for an Oculus Rift DK2 (using three.js).

Till now, I have worked by taking a screenshot and then loading that image on the TextureLoader. Is it possible to directly show HTML content on the sides of the cube ?

I am trying to show HTML content on the sides of a cube. This entire project is for an Oculus Rift DK2 (using three.js).

Till now, I have worked by taking a screenshot and then loading that image on the TextureLoader. Is it possible to directly show HTML content on the sides of the cube ?

• javascript
• three.js

• 1 developer.mozilla/en-US/docs/Web/API/Canvas_API/…, but with additional plication of WebGL. – andars Commented Mar 11, 2016 at 5:10
• Is there any way to achieve it directly by using three.js ? – Vin2k2 Commented Mar 11, 2016 at 5:44

1 Answer 1

You can use a THREE.CSS3DObject to do this. As MrDoob himself explains here:

The CSS3DObject basically extends Object3D and adds a element property.

There are several CSS3D examples here on the three.js examles page.

One of them is this YouTube example that loads youtube movies in iFrames on a geometry and shows the great possibilities of this object.

Here a link to a nice tutorial that will help you achieve your goal.