更新于 

CSS2DRenderer

CSS2DRenderer

使用CSSRenderer可以渲染html标签到3D场景中,
对dom元素进行平移、旋转、缩放等变换,
主要是通过css中的transform属性。

有两种类型的CSSRenderer:

  • CSS2DRenderer
    • 2维变化
  • CSS3DRenderer
    • 3维变化
提示

因为CSSRenderer主要是对dom的transform属性进行变化,
因此尽量在每个渲染元素外再包一层dom,
防止自定义的transform属性被覆盖。

1
2
3
4
const inner = document.createElement('div')
const outer = document.createElement('div')
outer.appendChild(innter)
const obj = new CSS2DRenderer(outer)

CSSRender的使用和WebGLRender一样,
区别在于CSSRenderer内的Object 无法受到光照的影响

CSSRenderer的创建:

1
2
3
4
5
6
const cssRenderer = new CSS2DRenderer()
cssRenderer.setSize(
window.innerWidth,
window.innerHeight
)
document.body.append(cssRenderer.domElement)

Loop函数中更新:

1
cssRenderer.render(scene,camera)