Skip to content

ljacho/threex.htmlmixer

 
 

Repository files navigation

threex.htmlmixer

threex.htmlmixer is a three.js game extension to seemlessly integrate actual dom elements in your game. It uses a clever blending trick to mix CSS3 and Webgl. See details in "Mixing HTML Pages Inside Your WebGL" post on learningthree.js blog. It provides a great new way for the player to interact with the 3d . For example you can include youtube players inside a movie screen. Additionally you can easily access the content of the whole web and include it in your three.js game.

Show Don't Tell

A Screenshot

screenshot

How To Install It

You can install it via script tag

<script src='threex.htmlmixer.js'></script>

Or you can install with bower, as you wish.

bower install threex.htmlmixer

How to Use It

instanciate the first object

// you create the new object
var mixerContext	= new THREEx.HtmlMixer.Context(renderer, scene, camera)
// you update it at every frame
updateFcts.push(function(delta, now){
	mixerContext.update(delta, now)
})

update it at every frame

mixerContext.update(delta, now)

create an plane

var mixerPlane	= new THREEx.HtmlMixer.Plane(mixerContext, domElement)
scene.add(mixerPlane.object3d)

tips

There is a shortcut for iframe as it is a common use-case.

var url		= 'http://threejs.com';
var mixerPlane	= THREEx.HtmlMixer.createPlaneFromIframe(mixerContext, url)
scene.add(mixerPlane.object3d)

About

three.js extension to seemlessly integrate dom elements in your webgl

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 96.6%
  • Makefile 3.4%