3D html mixer by @jeromeetienne
npm install threex.htmlmixer-continuedThreex.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.
npm and providing some good typing support. hope you'll enjoy using it š¦.
yarn or npm by entering the following command:
bash
With npm
npm install threex.htmlmixer-continued
With yarn
yarn add threex.htmlmixer-continued
`
š» How to use it
$3
`ts
// Threex importation
import THREEx from "threex.htmlmixer-continued";
// Create a new context instance.
const mixerContext = new THREEx.htmlMixer.HtmlMixerContext(
webglRenderer,
perspectiveCamera
);
`
š” See HtmlMixerContext class
$3
`ts
// š§ It's important to update the context before the main renderer.
mixerContext.update();
webglRenderer.update();
`
$3
`ts
// 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
$3
There is a helper for iframe as it is a common use case.
`javascript
const url = 'http://threejs.com';
const mixerIframeElement = THREEx.htmlMixerHelper.createIframeDomElement(mixerContext, url);
const mixerPlane = THREEx.HtmlMixer.HtmlMixerPlane(mixerContext, mixerIframeElement);
scene.add(mixerPlane.object3d);
``