Threejs进阶之七:使用CSS3DRenderer渲染HTML标签

前面我们实现了通过使用CSS2DRenderer给模型添加HTML标签的效果,渲染出来后我们发现当我们缩放鼠标时,渲染的HTML标签并不会跟着场景缩放,这是因为CSS2DRenderer渲染的标签默认保持自身像素值。官方文档中也提到了,CSS2DRenderer是CSS3DRenderer(CSS 3D渲染器)的简化版本,它唯一支持的变换就是位移。所以,它不支持缩放等功能。这一节我们来了解下使用CSS3DRenderer渲染HTML标签的方法

CSS3DRenderer

CSS3DRenderer的属性和方法跟CSS2DRenderer类似,它们的使用方法也基本相同,只是在HTML标签渲染出来的效果不同,CSS3DRenderer渲染的标签会跟着场景相机同步缩放,而CSS2DRenderer渲染的标签默认保持自身像素值,不支持缩放,我们在场景中看到缩放场景时CSS2DRenderer跟着变大其实不是HTML标签本身变大,而是相机近大远小的效果,HTML标签本身的大小并没有变化。

引入CSS3DRenderer

CSS3DRenderer扩展库的路径跟CSS2DRenderer相同,都在examples/jsm/renderers/目录下

import {
    CSS3DRenderer } from 'three/examples/jsm/renderers/CSS3DRenderer'

创建CSS3DRenderer

创建CSS3DRenderer的方法和创建CSS2DRenderer方法相同,这里不赘述了,不了解的可以看我前面章节 Threejs进阶之五:使用CSS2DRenderer给模型添加HTML标签的介绍,这里创建一个初始化方法initCSS3DRenderer(),在该方法中创建CSS3DRenderer,并设置相关属性

  initCSS

你可能感兴趣的:(ThreeJS,前端,javascript,html5,vue,3d)