CSS2DRenderer
CSS2DRenderer
使用CSSRenderer可以渲染html标签到3D场景中,
对dom元素进行平移、旋转、缩放等变换,
主要是通过css中的transform属性。
有两种类型的CSSRenderer:
- CSS2DRenderer
- 2维变化
- CSS3DRenderer
- 3维变化
提示
因为CSSRenderer主要是对dom的transform属性进行变化,
因此尽量在每个渲染元素外再包一层dom,
防止自定义的transform属性被覆盖。
1 | const inner = document.createElement('div') |
CSSRender的使用和WebGLRender一样,
区别在于CSSRenderer内的Object 无法受到光照的影响 。
CSSRenderer的创建:
1 | const cssRenderer = new CSS2DRenderer() |
Loop函数中更新:
1 | cssRenderer.render(scene,camera) |