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，并设置相关属性

  initCSS3DRenderer() {

    css3DRenderer = new CSS3DRenderer()
    css3DRenderer.setSize (window.innerWidth,window.innerHeight)
    css3DRenderer.domElement.style.position = 'absolute'
    css3DRenderer.domElement.style.top = '0px' 
    css3DRenderer.domElement.style.pointerEvents = 'none'
    document.body.appendChild(css3DRenderer.domElement) 
  }

调用CSS3DRenderer的rander方法

和CSS2DRenderer的使用方法一样，我们需要在 render() 渲染循环中调用.render方法，并将scene和camera作为参数出入

css3DRenderer.render(this.scene,this.camera)

在窗体发生变化是调用.setSize方法

在监听窗体变化的函数中，添加.setSize()方法，动态修改CSS3DRenderer的大小

css3DRenderer.setSize(window.innerWidth,window.innerHeight)

CSS3DObject

和CSS2DObject一样，CSS3DObject可以把一个HTML元素转化为一个CSS3DObject，使其类似threejs的网格模型一样，可以添加到场景中，可以设置位置，也可以作为其它模型对象的子对象

引入CSS3DObject

CSS3DObject扩展库的目录和CSS3DRenderer的目录相同，都在examples/jsm/renderers/目录下

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

使用CSS3DObject

其使用方法和CSS2DObject的方式一样，在创建CSS3DObject对象时只需要将div作为参数传递进去就可以了

    const div = document.querySelector('#label')
    const txtName = document.querySelector('#txtName')
    const txtMaterial = document.querySelector('#txtMaterial')
    const txtColor = document.querySelector('#txtColor') 
    tag = new CSS3DObject(div) 

CSS3DRenderer渲染HTML标签的尺寸问题

上面代码完成后，刷新浏览器，我们发现标签已经渲染出来了，但是渲染出来的标签超级大，这是我们可以通过scale方法将标签进行缩放，

tag.scale.set(0.005,0.005,0.005)//缩放标签尺寸

这样就实现了CSS3DRenderer渲染HTML标签的效果，刷新浏览器并缩放屏幕，我们发现标签也会跟着放大或缩小

我们旋转摄像机，发现我们的标签并不会跟着镜头一起旋转，这样当我们变换角度时，就无法看清标签上的内容，threejs给我们提供了CSS3DSprite 精灵，使用它，可以是HTML标签始终面对镜头，无论我们怎么旋转，都是正向面对标签的，这样就比较友好，我们来实现下

CSS3DSprite CSS3D精灵

CSS3精灵模型CSS3DSprite渲染效果类似我们之前将的精灵模型对象Sprite，如果对精灵模型对象不了解的小伙伴可以查看我之前的文章 Threejs入门之十三：精灵模型Sprite和精灵材质SpriteMaterial里面有对精灵的详细介绍。

引入CSS3DSprite

CSS3DSprite扩展库的位置和CSS3DRenderer目录相同

import {
 CSS3DRenderer,CSS3DObject,CSS3DSprite  }
     from 'three/examples/jsm/renderers/CSS3DRenderer'

使用CSS3DSprite

删除之前使用new CSS3DObject(div) 创建的对象，重新使用CSS3DSprite创建对象

 // tag = new CSS3DObject(div) 
 tag = new CSS3DSprite(div)
 tag.scale.set(0.005,0.005,0.005)//缩放标签尺寸

刷新浏览器，可以看到，无论我们怎么旋转摄像机，标签始终面对我们，达到了预期的效果

好了，关于CSS3DRenderer渲染HTML标签的用法就说这么多吧，欢迎小伙伴评论区评论，喜欢的小伙伴点赞关注+收藏哦！下次聊

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！