ThreeJs-14HTML混合3D渲染

一.css渲染器基本使用

使用场景:经常在一些3D物体左右还会跟随一些文字等,实际都是标签,应用场景非常广泛

image-20241229133257958

先完成基本的3D,月球围绕地球转,这里就是给月球加了sin函数

image-20241229134740840

GIF

然后现在就先创建一个标签体出来

image-20241229140327057

2D渲染器出了暴露出来一个渲染器还有一个对象器

image-20241229135954852

image-20241229140120363

但是到这里并不会显示出来,还要创建2D渲染器跟渲染器差不多

image-20241229140732871

这样就是出来两个一样大小的元素,但是需要重叠一下

image-20241229141005775

设置固定定位,并且跟随render一起渲染

image-20241229142508758

image-20241229142530463

如果发现此时由于2D渲染器在上面,导致3D的缩放旋转等不生效

image-20241229142607785

image-20241229142656645

二.添加多个元素标签跟随物体移动

首先添加月球div

image-20241229143134029

给月球添加上后会自动跟着球体走

GIF

再在地球上标注中国

这里需要注意一下,如果想字跟着转动走,需要设置xyz轴,特别是z轴

image-20241229143919338

GIF

三.使用射线碰撞来检测标签显示隐藏

在刚才的案例中有两个问题

一个是当我们调整浏览器视图尺寸,文字的定位就出现问题了

image-20241229145822410

这个需要在不断运动中,重新计算2D渲染器尺寸就可以了

image-20241229145907605

第二个是,当我们移动到美洲这边,中国都被挡住了,但是文字还在

这里的思路是这样的

从中国两个字和摄像机打一条射线过去,通过穿过的物体来判断,先判断有没有,如果没有就要显示,因为穿过去没有物体只有两种情况

一个是中国在最左边,一个是在最右边此时射线穿过去,是没有物体的,但是这个时候中国已经出来了所以要显示

image-20241229150635987

然后是有的情况下,有的情况下,文字在前和在后,射线穿过去都会有,这个时候我们通过文字到摄像机的距离和物体到摄像机的距离判断,如果物体到摄像机的距离比文字还要小,说明文字在背后去了不显示,这里注意3D物体有个方法可以计算到某一个点的距离

实例化射线

image-20241229151120186

image-20241229154746125

GIF

posted @ 2025-02-07 15:50  Heymar-10  阅读(292)  评论(0编辑  收藏  举报