{"id":13547071,"url":"https://github.com/deathcap/gl-css3d","last_synced_at":"2025-03-18T13:31:04.039Z","repository":{"id":27376078,"uuid":"30851730","full_name":"deathcap/gl-css3d","owner":"deathcap","description":"sync CSS 3D transformations to a WebGL scene","archived":false,"fork":false,"pushed_at":"2016-05-24T03:32:41.000Z","size":251,"stargazers_count":33,"open_issues_count":5,"forks_count":6,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-02-28T09:56:40.204Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://deathcap.github.io/gl-css3d","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/deathcap.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-02-16T03:00:28.000Z","updated_at":"2024-11-06T17:42:53.000Z","dependencies_parsed_at":"2022-08-26T07:41:03.147Z","dependency_job_id":null,"html_url":"https://github.com/deathcap/gl-css3d","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deathcap%2Fgl-css3d","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deathcap%2Fgl-css3d/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deathcap%2Fgl-css3d/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deathcap%2Fgl-css3d/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/deathcap","download_url":"https://codeload.github.com/deathcap/gl-css3d/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243933330,"owners_count":20370987,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T12:00:50.560Z","updated_at":"2025-03-18T13:31:03.650Z","avatar_url":"https://github.com/deathcap.png","language":"JavaScript","readme":"# gl-css3d\n\nSynchronize CSS 3D transformations to a WebGL scene\n\n![screenshot](http://i.imgur.com/OWTWvSQ.png \"Screenshot\")\n\nUsage:\n\n    var createCSS3D = require('gl-css3d');\n\n    // pass an HTML DOM element node, such as an \u003ciframe\u003e\n    var css3d = createCSS3D(htmlElement, opts);\n\n    // assuming you are using stackgl gl-now/game-shell:\n\n    // in the gl-init callback:\n    css3d.ginit(gl)\n\n    // in the gl-resize callback:\n    css3d.updatePerspective(cameraFOVradians, shell_width, shell_height);\n\n    // in the gl-render callback:\n    css3d.render(view, proj);\n\nFor an example embedding an iframe run `npm start`, or try the\n[live demo](http://deathcap.github.io/gl-css3d). The iframe accepts pointer events\nand can be interacted with as an ordinary webpage. Click the button to toggle mouse\ninputs to control the camera instead (drag to move, scroll to zoom; uses\n[game-shell-orbit-camera](https://github.com/mikolalysenko/game-shell-orbit-camera)).\n\n## Options\n\n* `planeWidth` (2), `planeHeight` (2): size of the plane in world units\n\n* `tint` (`[0,0,0,0]`): color to draw the WebGL object in front of the CSS3D element, defaults to fully transparent\n\n* `blend` (false): whether to enable blending, defaults to false so `tint` is not influenced\nby the colors of the WebGL scene behind it\n\n* `flipX` (true), `flipY` (true): whether to invert the X and Y axes from WebGL to CSS3D\n\n* `backface` (true): whether to include two extra triangles in the WebGL mesh for the rear side of the plane\n\n## References\n\n* [voxel-webview](https://github.com/deathcap/voxel-webview) - embed webpages in a voxel.js world using CSS 3D\n* [W3C CSS Transforms Module Level 1: 3D Transforms](http://www.w3.org/TR/css3-3d-transforms/)\n* [Mixing HTML Pages Inside Your WebGL](http://learningthreejs.com/blog/2013/04/30/closing-the-gap-between-html-and-webgl/)\n* [stemkoski Three.js Examples: CSS3D](http://stemkoski.github.io/Three.js/CSS3D.html) ([source](https://github.com/stemkoski/stemkoski.github.com/blob/master/Three.js/CSS3D.html))\n\n## License\n\nMIT\n\n","funding_links":[],"categories":["🚀 A series of exquisite and compact web page cool effects"],"sub_categories":["Css 3D Effect"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdeathcap%2Fgl-css3d","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdeathcap%2Fgl-css3d","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdeathcap%2Fgl-css3d/lists"}