Threex.htmlmixer-continued

Threex.htmlmixer is a ThreeJs extension to seamlessly integrate actual dom elements in your ThreeJs app. It uses a clever blending trick to mix CSS3 and Webgl. See details in the "Mixing HTML Pages Inside Your WebGL" post on the 25yearsofprogramming.com blog. It provides a great way to interact with 2D and 3D. For example, you can include a YouTube player inside a movie screen. Additionally, you can easily access the content of the whole web and include it in your three.js app.

🎈 Motivations

This small library is a continued version of the original one made by @jeromeetienne. And I recommend checking the source repo 📌 here.

Yes! This extension is almost exactly like the original one and works almost the same. But by creating this repo, I'm allowing you to use it more efficiently and conveniently, first by installing it via a package manager like npm and providing some good typing support. hope you'll enjoy using it 📦.

🛠 Installation

You can install it by using yarn or npm by entering the following command:

# With npm
npm install threex.htmlmixer-continued

# With yarn
yarn add threex.htmlmixer-continued

💻 How to use it

Importation & instantiation

// Threex importation
import THREEx from "threex.htmlmixer-continued";

// Create a new context instance.
const mixerContext  = new THREEx.htmlMixer.HtmlMixerContext(
  webglRenderer,
  perspectiveCamera
);

💡 See HtmlMixerContext class

Update the context on every frame

// 🚧 It's important to update the context before the main renderer.
mixerContext.update();
webglRenderer.update();

Create a plane

// Create a new plane, pass it the above context and a domElement
const mixerPlane = new THREEx.htmlMixer.HtmlMixerPlane(
  mixerContext,
  domElement
);
// Add it to the active scene
scene.add(mixerPlane.object3d);

💡 See the example for more details

Tips

There is a helper for iframe as it is a common use case.

const url = 'http://threejs.com';
const mixerIframeElement = THREEx.htmlMixerHelper.createIframeDomElement(mixerContext, url);
const mixerPlane = THREEx.HtmlMixer.HtmlMixerPlane(mixerContext, mixerIframeElement);
scene.add(mixerPlane.object3d);

✨ Credits

A big thanks to @jeromeetienne for the original code source ❤ Check the original repo 📌 here.