threejs CSS3DObject、CSS3DSprite实现文字以及他们的区别

九段刀客

已于 2023-12-18 02:54:44 修改

阅读量5.7k

点赞数 1

分类专栏： threejs 文章标签： css3 javascript 前端

于 2022-08-15 11:44:49 首次发布

本文链接：https://blog.csdn.net/weixin_35958891/article/details/126343929

版权

threejs 专栏收录该内容

22 篇文章 12 订阅 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

本文探讨了CSS3DObject和CSS3DSprite在threejs中的使用，特别是它们在旋转时文字相对于正方体位置的变化。CSS3DObject旋转时文字保持相对静止，而CSS3DSprite旋转会导致文字位置改变。此外，还提到了CSS2DObject的特点以及它们在场景缩放和遮挡方面的差异。

摘要由CSDN通过智能技术生成

区别

CSS3DObject、CSS3DSprite(精灵)、CSS2DObject的区别

CSS3D不面向摄像机，场景缩放时，缩小放大跟随着，不被模型遮挡，通过DOM事件点击
CSS2D面向摄像机，场景缩放时，缩小放大都一样大，不被模型遮挡，通过DOM事件点击。
精灵面向摄像机，场景缩放时，缩小放大跟随着，会被模型遮挡，可以被射线拾取。

CSS3DObject 旋转时文字相对正方体始终不动

在这里插入图片描述

 function _createBox13DLabel(object: THREE.Mesh) {
    const div = document.createElement("div");
    div.className = "red-box-label";
    div.textContent = "红色正方体";
    const earthLabel = new CSS3DObject(div);
    earthLabel.position.set(0, 0.2, 0.5);
    earthLabel.scale.set(0.01, 0.01, 0.01);
    object.add(earthLabel);
  }

CSS3DSprite 旋转时文字的相对正方体会改变位置

在这里插入图片描述

function _createBox13DLabel(object: THREE.Mesh) {
    const div = document.createElement("div");
    div.className = "red-box-label";
    div.textContent = "红色正方体";
    // CSS3DSprite;CSS3DObject
    const earthLabel = new CSS3DSprite(div);
    earthLabel.position.set(0, 0.2, 0.5);
    earthLabel.scale.set(0.01, 0.01, 0.01);
    object.add(earthLabel);
  }