hackedvoxels-gl-css3d
v0.2.0
Published
sync CSS 3D transformations to a WebGL scene
Downloads
2
Readme
gl-css3d
Synchronize CSS 3D transformations to a WebGL scene
Usage:
var createCSS3D = require('gl-css3d');
// pass an HTML DOM element node, such as an <iframe>
var css3d = createCSS3D(htmlElement, opts);
// assuming you are using stackgl gl-now/game-shell:
// in the gl-init callback:
css3d.ginit(gl)
// in the gl-resize callback:
css3d.updatePerspective(cameraFOVradians, shell_width, shell_height);
// in the gl-render callback:
css3d.render(view, proj);
For an example embedding an iframe run npm start
, or try the
live demo. The iframe accepts pointer events
and can be interacted with as an ordinary webpage. Click the button to toggle mouse
inputs to control the camera instead (drag to move, scroll to zoom; uses
game-shell-orbit-camera).
Options
planeWidth
(2),planeHeight
(2): size of the plane in world unitstint
([0,0,0,0]
): color to draw the WebGL object in front of the CSS3D element, defaults to fully transparentblend
(false): whether to enable blending, defaults to false sotint
is not influenced by the colors of the WebGL scene behind itflipX
(true),flipY
(true): whether to invert the X and Y axes from WebGL to CSS3Dbackface
(true): whether to include two extra triangles in the WebGL mesh for the rear side of the plane
References
- voxel-webview - embed webpages in a voxel.js world using CSS 3D
- W3C CSS Transforms Module Level 1: 3D Transforms
- Mixing HTML Pages Inside Your WebGL
- stemkoski Three.js Examples: CSS3D (source)
License
MIT