{"id":16594740,"url":"https://github.com/jerrykingxyz/three.domtexture","last_synced_at":"2025-10-29T12:30:26.591Z","repository":{"id":26862408,"uuid":"110094243","full_name":"jerrykingxyz/THREE.DOMTexture","owner":"jerrykingxyz","description":"Transform DOM to threejs texture","archived":false,"fork":false,"pushed_at":"2023-11-24T08:08:40.000Z","size":53,"stargazers_count":6,"open_issues_count":0,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-04-28T20:44:02.604Z","etag":null,"topics":["dom","texture","threejs-texture"],"latest_commit_sha":null,"homepage":null,"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/jerrykingxyz.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":"2017-11-09T09:26:11.000Z","updated_at":"2023-01-06T01:54:49.000Z","dependencies_parsed_at":"2022-07-10T14:17:24.536Z","dependency_job_id":null,"html_url":"https://github.com/jerrykingxyz/THREE.DOMTexture","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/jerrykingxyz%2FTHREE.DOMTexture","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jerrykingxyz%2FTHREE.DOMTexture/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jerrykingxyz%2FTHREE.DOMTexture/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jerrykingxyz%2FTHREE.DOMTexture/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jerrykingxyz","download_url":"https://codeload.github.com/jerrykingxyz/THREE.DOMTexture/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219857798,"owners_count":16556055,"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":["dom","texture","threejs-texture"],"created_at":"2024-10-11T23:47:18.657Z","updated_at":"2025-10-29T12:30:26.144Z","avatar_url":"https://github.com/jerrykingxyz.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# THREE.DOMTexture\nTransform DOM to threejs texture\n\n[中文](README_CN.md)\n## Overview\n```DOMTexture``` transform DOM to threejs texture with Blob and Foreign object SVG.\n## Usage\ninstall with ```npm install three-dom-texture```\n```javascript\nimport { DOMTexture } from 'three-dom-texture'\n// or\nconst { DOMTexture } = require('three-dom-texture')\n```\ninclude script\n```html\n\u003cscript src=\"three.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"DOMTexture.min.js\"\u003e\u003c/script\u003e\n```\ncreate texture\n```javascript\n    var domTexture = new THREE.DOMTexure(options, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy, encoding)\n    // don't forget update texture when you update the dom\n    domTexture.needsUpdate = true\n```\nthe first parameter is ```options``` to set DOM, which can be a ```DOM```, ```DOMString``` or ```object```, other parameters is the same as [THREE.Texture](https://threejs.org/docs/index.html#api/textures/Texture).\n```javascript\n  // DOM\n  new THREE.DOMTexture(document.createElement('div'))\n  // DOMString\n  new THREE.DOMTexture('\u003cdiv\u003e...\u003c/div\u003e')\n  // object\n  new THREE.DOMTexture({\n      width: \u003cnumber\u003e, // internal DOM width, default 512\n      height: \u003cnumber\u003e, // internal DOM height, default 512\n      content: \u003cDOM | DOMString\u003e, // internal DOM\n      dpr: \u003cnumber\u003e, // canvas devicePixelRatio, default window.devicePixelRatio\n  })\n```\n\nThe methods that ```domTexture``` added on ```THREE.Texture```:\n* ```updateSize``` - set innernal DOM width, height, dpr. this method will return a new DOMTexure instance and dispose current instance.\n* ```setContent``` -  set internal DOM [ ```DOM``` or ```DOMString``` ]\n* ```domInlineStyle``` - write the context style to the element. affect your ```DOM```, useless for ```DOMString```.\n\nafter use these methods, don't forget to set needsUpdate.\n\n## Caveats\nDue to the use of Foreign object SVG, there are some things to be aware of.\n* __Internet Explorer is not supported__, as it doesn't support the foreignObject tag in SVG.\n* SVG's foreignObject is subject to strong security, any external content will likely fail (i.e. link, iframes, web fonts)\n    - if you want to ```\u003clink\u003e``` some stylesheet, you can use ```\u003cstyle\u003e``` and write CSS in it.\n    - if you want to use ```\u003cimg\u003e```, you can use ```\u003cdiv\u003e``` and set the image as background. __--WARN: The background can not be a URL, but it can be ```base64```__\n* ```DOMTexture``` can get style inside the ```\u003cstyle\u003e``` of the __internal DOM__, but can not get in the document context. you can run ```domTexture.domInlineStyle()``` to write the context style to the element. __--WARN: ```domInlineStyle``` will affect your DOM, useless for ```DOMString```__\n\n## License\nMIT licensed\n\nCopyright (c) 2017 jinrui\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjerrykingxyz%2Fthree.domtexture","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjerrykingxyz%2Fthree.domtexture","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjerrykingxyz%2Fthree.domtexture/lists"}