type
status
date
slug
summary
tags
category
icon
password
Edited
Aug 3, 2023 08:18 AM
Created
Aug 2, 2023 01:57 AM
屏幕坐标转标准设备坐标
用
.offsetX和.offsetY当做canvas画布的屏幕坐标。threejs canvas画布上一个点，可以用
.offsetX、.offsetY绝对值表示，同样也可以用标准设备坐标系去表达。公式
canvas画布的宽度是width，
.offsetX的范围是0~width,.offsetX除以canvas画布宽度width，就可以从绝对值变成相对值，范围是0~1，相对值乘以2，范围0~2，再减去1，范围是-1~1，刚好和canvas画布标准设备坐标的范围-1~1能够对应起来。对于
.offsetY的转标准设备坐标y，和.offsetX转标准设备坐标x相似，唯一要注意地方就是两个坐标系的y坐标相反，同样计算方式，最后取相反数即可。Ray
射线
Ray和三维向量Vector3一样属于数学几何计算相关的API,可以进行射线交叉计算学习Three.js中的射线
Ray概念，你可以类比数学几何中提到的射线，在三维空间中，一条线把一个点作为起点，然后沿着某个方向无限延伸使用
.intersectTriangle()
射线
Ray有很多关于数学计算的方法，下面就先介绍一个与三角形交叉计算相关的方法.intersectTriangle(),简单说，就是计算一个射线和一个三角形在3D空间中是否交叉。Raycaster
射线相关的API射线投射器Raycaster
射线投射器
Raycaster具有一个射线属性.ray，该属性的值就是射线对象Ray.intersectObjects()
射线投射器
Raycaster通过.intersectObjects()方法可以计算出来与自身射线.ray相交的网格模型。.intersectObjects([mesh1, mesh2, mesh3])对参数中的网格模型对象进行射线交叉计算,未选中对象返回空数组[],选中一个对象，数组1个元素，选中多个对象，数组多个元素，如果选中多个对象，对象在数组中按照先后排序。.setFromCamera()
把鼠标单击位置坐标和相机作为
.setFromCamera()方法的参数，.setFromCamera()就会计算射线投射器Raycaster的射线属性.ray,形象点说就是在点击位置创建一条射线，用来选中拾取模型对象。场景标注标签
CSS2D
threejs扩展库
CSS2DRenderer.js提供了两个类CSS2渲染器CSS2DRenderer、CSS2模型对象CSS2DObject使用步骤
- HTML元素创建标签
- CSS2模型对象
CSS2DObject
- CSS2渲染器
CSS2DRenderer
CSS2Renderer.domElement重新定位
注意：
CSS2Renderer.domElement重新定位，叠加到canvas画布上，与canvas画布重合即可，你可以可以看到HTML标签的标注效果。设置
.style.pointerEvents = none，就可以解决HTML元素标签对threejs canvas画布鼠标事件的遮挡。设置标签位置
CSS2模型标签对象位置和要标注的Mesh放在同一个位置，这样HTML标签就可以标注Mesh。
css2Renderer.render()渲染HTML元素对应的CSS2模型对象，本质上就是根据CSS2模型对象的xyz世界坐标，计算HTML标签元素在canvas画布上的屏幕像素坐标位置。
CSS3D
CSS3渲染器
CSS3DRenderer和CSS2渲染器CSS2DRenderer整体使用流程基本相同，只是在HTML标签渲染效果方面不同，比如CSS3渲染的标签会跟着场景相机同步缩放，而CSS2渲染的标签默认保持自身像素值。CSS3精灵模型CSS3DSprite
CSS3精灵模型
CSS3DSprite对应的HTML标签，可以跟着场景缩放，位置可以跟着场景旋转，但是自身的姿态角度始终平行于canvas画布，不受旋转影响，就像精灵模型一样SpriteCSS3精灵模型
CSS3DSprite尺寸、位置、缩放等渲染规律和CSS3对象模型CSS3DObject基本一致。Demo
最后，你可以自己去点击查看Mesh的变化
内容差不多到这里就介绍完了 🎉🎉🎉
参考链接
- 作者:JinSo
- 链接:https://jinso365.top/article/three-ray&label
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。