十五、CSS3DObject和CSS2DObject的区别

在3d场景中我们会遇到很多标签，主要分为三种，css3dobject、css2dobject、css3dsprite三种，今天主要说说css3dobject和css2dobject的相似点和区别。

Threejs版本：0.138.3

下面看实现的效果：

相似点

• 使用方法都是差不多的，下面讲解下css2dobject的使用方法

1. 在index.html增加一个用于包含这些标签的div

css属性

#cssrender {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 102;
  pointer-events: none;
}

2. renderer.js里面引入，并且实例化

import * as THREE from 'three';
import { CSS2DRenderer } from 'three/examples/jsm/renderers/CSS2DRenderer.js';
// import { CSS3DRenderer } from "three/examples/jsm/renderers/CSS3DRenderer.js";


const renderer = new THREE.WebGLRenderer({
  // 抗锯齿
  antialias: true,
});
const css2drender = new CSS2DRenderer();
css2drender.setSize(window.innerWidth, window.innerHeight);

// 创建css3drender
// const css3drender = new CSS3DRenderer();
// css3drender.setSize(window.innerWidth, window.innerHeight);

export default { renderer, css2drender };

3.Animate.js引入renderer.js

 renderer.css2drender.render(scene, camera);
  // renderer.css3drender.render(scene, camera);

4.在加载场景完成后将标签加到cssrender标签里面，我是模型加载完成后触发了mitt,完成append

eventHub.on('progressEnd', (item) => {
    loadIcon.value = '100%';
    loadNum.value = '272px';
    loading.value = false;
    if (item.type == 1) {
      if (document.getElementById('cssrender')) {
        document.getElementById('cssrender').appendChild(renderer.css2drender.domElement);
      }
      // if (document.getElementById('cssrender')) {
      //   document.getElementById('cssrender').appendChild(renderer.css3drender.domElement);
    }

5.在使用的页面使用

import { CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer.js';
import { CSS3DObject  } from "three/examples/jsm/renderers/CSS3DRenderer";

 const element = document.createElement('div');
  element.className = 'elementTag1'
  element.innerHTML = `
    <div class="elementContent1">
      <h3></h3>
      <div>转炉</div>
    </div>
    `;

const objectCSS2D = new CSS2DObject(element);
//const objectCSS3D = new CSS3DObject(element);
objectCSS2D.name = '转炉'
scene.add(objectCSS2D)

以上注释的内容就是使用 css3dobject的方法，相似的调用就行了。

下面就说说他们的区别：

css3dobject场景缩放时，跟随着场景远近缩小放大。

css2dobject场景缩放时，缩小放大都一样大。

我的产品的需求就是不能随着场景变远而变小，所以使用了css2dobject，具体使用哪个还需要你自己需求来选择。

上面就是css3dobject、css2dobject的相似和区别点。还有什么疑问可以联系我哦。