Skip to content

Latest commit

 

History

History
56 lines (51 loc) · 2.65 KB

README_CN.md

File metadata and controls

56 lines (51 loc) · 2.65 KB
Raw

THREE.DOMTexture

将 DOM 转化成 threejs 纹理

概述

DOMTexture 通过 Blob 和 Foreign object SVG 对象将 DOM 转化为纹理.

用法

通过npm引入 npm install three-dom-texture

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

引入script

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

创建纹理

    var domTexture = new THREE.DOMTexure(options, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy, encoding)
    // 在纹理创建和DOM更新的时候别忘了设置needsUpdate去更新纹理
    domTexture.needsUpdate = true;

构造函数的第一个参数 options，它可以为DOM，DOMString或者object，其他参数与 THREE.Texture 一致.

  // DOM
  new THREE.DOMTexture(document.createElement('div'))
  // DOMString
  new THREE.DOMTexture('<div>...</div>')
  // object
  new THREE.DOMTexture({
      width: <number>, // 内部 DOM 的宽度, 默认值：512
      height: <number>, // 内部 DOM 的高度, 默认值： 512
      content: <DOM | DOMString>, // 内部 DOM
      dpr: <number>, // canvas devicePixelRatio, 默认值： window.devicePixelRatio
  })

domTexture 在 THREE.Texture 实例基础上新增的方法:

  • updateSize - 设置内部 DOM 的宽度、 高度、 dpr。这个方法会返回一个新的 DOMTexture 实例，并且销毁掉当前的 DOMTexure
  • setContent - 设置内部 DOM [ DOM 或 DOMString ]
  • domInlineStyle - 将环境中的样式写入到 DOM 中. 会影响 DOM 本身, 对 DOMString无效果.

上述函数调用后需要通过设置needsUpdate更新纹理

注意事项

因为使用了Foreign object SVG，有一些事项需要注意

  • Internet Explorer 浏览器不支持.
  • SVG foreignObject 有很多安全限制, 任何对外部的访问都会失败 (i.e. link, iframes, web fonts)
    • 如果你想要使用<link> 来引入一些样式, 你可以使用<style>并且将CSS内联进去.
    • 如果你想要使用<img>, 你可以设置一个<div> 将图片设置为它的背景. --WARN: 背景图片不能为url，但可以是base64
  • DOMTexture 可以获取到内部DOM中的 <style> , 但是无法获取到环境中的. 你可以调用domTexture.domInlineStyle() 将环境样式内联到 DOM 上. --WARN: domInlineStyle 会影响到你的DOM, 在内部为 DOMString 的情况时无效

License

MIT licensed

Copyright (c) 2017 jinrui