threejs CSS3DObject、CSS3DSprite实现文字以及他们的区别-程序员宅基地

技术标签： threejs  前端  css3  javascript  

区别

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);
  }

其他部分逻辑可以参考2d的方法

博主开发了一个浏览器aweb123.com
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_35958891/article/details/126343929

智能推荐

大专生面试阿里P7居然过了，Java高级程序员面试集合-程序员宅基地

文章浏览阅读853次，点赞13次，收藏20次。从设计思想解读开源框架，一步一步到Spring、Spring5、SpringMVC、MyBatis等源码解读，我都已收集整理全套，篇幅有限，这块只是详细的解说了23种设计模式，整理的文件如下图一览无余！ring5、SpringMVC、MyBatis等源码解读，我都已收集整理全套，篇幅有限，这块只是详细的解说了23种设计模式，整理的文件如下图一览无余！无论是一个初级的 coder，高级的程序员，还是顶级的系统架构师，应该都有深刻的领会到设计模式的重要性。程序员A：B，你这段代码使用的是XXX设计模式对吗？

南加大的计算机科学与工程,2019上海软科世界一流学科排名计算机科学与工程专业排名南加州大学排名第15...-程序员宅基地

文章浏览阅读459次。2019上海软科世界一流学科排名计算机科学与工程专业排名指标首先计算大学在每项指标上的得分，具体为大学在一项指标上的数值除以该项指标的最大值(开根号)再乘以100。然后各指标得分除以100再乘以相应权重进行累加得到该校总分。CNCI为相对指标，论文数量较少时CNCI不够稳定。因此在计算该指标的得分时，一个学科的CNCI最大值设置为该学科所有大学的CNCI平均值的2倍或者该学科所有大学中CNCI的实..._南加大软科排名

css3如何实现字体放大缩小动画_css字体放大缩小动画-程序员宅基地

文章浏览阅读3.2k次。css3实现字体放大缩小动画效果，按钮看起来是动的，以吸引用户_css字体放大缩小动画

RandomAccessFile 读取和存储文件_randomaccessfile读取文件-程序员宅基地

文章浏览阅读375次。RandomAccessFile 读取和存储文件;java读取大文件_randomaccessfile读取文件

java实现时间格式转换（int整数类型的秒/毫秒---时分秒毫秒）_int 格式化为时分秒-程序员宅基地

文章浏览阅读2.8k次。当然，还可以指定自定义的格式转化显示。_int 格式化为时分秒

Spring事务和事务传播机制_spring事务机制-程序员宅基地

文章浏览阅读259次。Spring事务_spring事务机制

随便推点

嵌入式学习之QT学习 ----1 QT环境搭建（Windows）_安装qt程序的时候勾选哪些和嵌入式有关的-程序员宅基地

文章浏览阅读1.7k次。想了又想，之后的设计基于QT系统大概会比较容易一些，就学习一下基础知识吧。1、什么是QT？QT是一个跨平台的、C++、图形用户界面，应用程序开发框架。2、通过学习，将会获得哪些知识？掌握QT环境搭建C++入门掌握使用QT开发windows平台上位机，如：串口调试助手、网络调试助手等掌握发布自己开发的windows上位机掌握在ARM板上移植QT操作系统掌握把QT程序移植到ARM开发板上运行掌握使用QT驱动程序，如：点亮一个LED掌握QT开发手机APP学习远程调试ARM板子上的QT程序_安装qt程序的时候勾选哪些和嵌入式有关的

【算法】三、回溯法_算法策略 回溯法-程序员宅基地

文章浏览阅读978次，点赞2次，收藏10次。回溯法其实就是不断地试探，看前方的路是否可以走，如果不行就退回一步，再换一个办法。_算法策略 回溯法

忘记本地mysql密码修改方法（win10，mysql8.0）_window10清除本地mysql密码-程序员宅基地

文章浏览阅读309次。1.关闭mysql服务2.管理员打开命令提示符，输入mysqld --console --skip-grant-tables --shared-memory输入后回车，放在一旁。3.再新建一个cmd窗口（用管理员身份打开）—win键+R，输入mysql -uroot -p然后回车键（Enter），弹出输入密码，不理，再次回车键（Enter）4.依次输入以下操作先刷新一下权限表：flush privileges;然后我们改密码：输入ALTER USER 'root'@'localh_window10清除本地mysql密码

ZXCLOUD R5300 G3的服务器安装ESXI6.7镜像前篇-制作ESXI6.7定制版-程序员宅基地

文章浏览阅读684次。VMware vSphere Hypervisor (ESXi) Offline Bundle（脱机捆绑包）镜像。服务器安装版本与平时安装版本有所不同，由于服务器缺少阵列卡驱动，需将阵列卡驱动注入。注意：将镜像刻录到U盘时写入方式为USB-HDD+ V2或USB-ZIP+ V2。文件放入文件夹中，在文件夹中再创建一个文件夹，将。定制版镜像，阵列卡驱动完成注入！最新版（自己下载，以上所需文件。在“文件”选项中打开刚才生成的。下载自己去淘宝买一次性下载）文件，选中解除锁定，并应用。注意：下载镜像时需下载。_esxi6.7镜像

前端适配方案flexible.js-程序员宅基地

文章浏览阅读326次。flexible适配步骤_flexible.js

c语言单个字符输入问题_c语言输入字符-程序员宅基地

文章浏览阅读1.9k次，点赞6次，收藏5次。而在我们输入时，其实输入了两个数据，一个是‘A’，另一个是‘\n’，而scanf在遇到（空格，换行等）停止读取数据，而‘\n’就被下一次的scanf给读走了；但是如果是一次输入多个字符的情况，当我们在屏幕上输入一个字符时，不能像输入整型那样输入一个空格再输入下一个字符，这样会将空格当成一个字符赋给下一个变量，直接输入两个字符就行（情况1）① scanf正常运行时，返回值是它读取的变量的个数，如果输入错误或停止，会返回EOF，EOF的值为-1。整型的输入：格式符相邻，输入时中间可以加上空格或回车。_c语言输入字符

推荐文章

热门文章

相关标签