ThreeJs-14HTML混合3D渲染

一.css渲染器基本使用

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

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

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

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

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

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

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

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

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

首先添加月球div

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

再在地球上标注中国
这里需要注意一下，如果想字跟着转动走，需要设置xyz轴，特别是z轴

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

在刚才的案例中有两个问题
一个是当我们调整浏览器视图尺寸，文字的定位就出现问题了

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

第二个是，当我们移动到美洲这边，中国都被挡住了，但是文字还在
这里的思路是这样的
从中国两个字和摄像机打一条射线过去，通过穿过的物体来判断，先判断有没有，如果没有就要显示，因为穿过去没有物体只有两种情况
一个是中国在最左边，一个是在最右边此时射线穿过去，是没有物体的，但是这个时候中国已经出来了所以要显示

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

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！