https://github.com/jerrykingxyz/three.domtexture

Transform DOM to threejs texture
https://github.com/jerrykingxyz/three.domtexture

dom texture threejs-texture

Last synced: about 1 month ago
JSON representation

Transform DOM to threejs texture

• Host: GitHub
• URL: https://github.com/jerrykingxyz/three.domtexture
• Owner: jerrykingxyz
• License: mit
• Created: 2017-11-09T09:26:11.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2023-11-24T08:08:40.000Z (12 months ago)
• Last Synced: 2024-04-28T20:44:02.604Z (7 months ago)
• Topics: dom, texture, threejs-texture
• Language: JavaScript
• Size: 51.8 KB
• Stars: 6
• Watchers: 1
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# THREE.DOMTexture

Transform DOM to threejs texture

[中文](README_CN.md)

## Overview

```DOMTexture``` transform DOM to threejs texture with Blob and Foreign object SVG.

## Usage

install with ```npm install three-dom-texture```

```javascript

import { DOMTexture } from 'three-dom-texture'

// or

const { DOMTexture } = require('three-dom-texture')

```

include script

```html

```

create texture

```javascript

    var domTexture = new THREE.DOMTexure(options, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy, encoding)

    // don't forget update texture when you update the dom

    domTexture.needsUpdate = true

```

the 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).

```javascript

  // DOM

  new THREE.DOMTexture(document.createElement('div'))

  // DOMString

  new THREE.DOMTexture('
...
')

  // object

  new THREE.DOMTexture({

      width: , // internal DOM width, default 512

      height: , // internal DOM height, default 512

      content: , // internal DOM

      dpr: , // canvas devicePixelRatio, default window.devicePixelRatio

  })

```


The methods that ```domTexture``` added on ```THREE.Texture```:

* ```updateSize``` - set innernal DOM width, height, dpr. this method will return a new DOMTexure instance and dispose current instance.

* ```setContent``` -  set internal DOM [ ```DOM``` or ```DOMString``` ]

* ```domInlineStyle``` - write the context style to the element. affect your ```DOM```, useless for ```DOMString```.

after use these methods, don't forget to set needsUpdate.

## Caveats

Due to the use of Foreign object SVG, there are some things to be aware of.

* __Internet Explorer is not supported__, as it doesn't support the foreignObject tag in SVG.

* SVG's foreignObject is subject to strong security, any external content will likely fail (i.e. link, iframes, web fonts)

    - if you want to `````` some stylesheet, you can use `````` and write CSS in it.

    - if you want to use ```<img>```, you can use ```<div>``` and set the image as background. __--WARN: The background can not be a URL, but it can be ```base64```__

* ```DOMTexture``` can get style inside the ```<style>``` 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```__

## License

MIT licensed

Copyright (c) 2017 jinrui