Three-dom-texture NPM

THREE.DOMTexture

Transform DOM to threejs texture

Overview

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

Usage

install with npm install three-dom-texture

import { DOMTexture } from 'three-dom-texture'
// or
const { DOMTexture } = require('three-dom-texture')

include script

<script src="three.min.js"></script>
<script src="DOMTexture.min.js"></script>

create texture

    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.

  // DOM
  new THREE.DOMTexture(document.createElement('div'))
  // DOMString
  new THREE.DOMTexture('<div>...</div>')
  // object
  new THREE.DOMTexture({
      width: <number>, // internal DOM width, default 512
      height: <number>, // internal DOM height, default 512
      content: <DOM | DOMString>, // internal DOM
      dpr: <number>, // 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 <link> some stylesheet, you can use <style> 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