14、three.js用ray射线点击模型出现面板介绍

注意问题：（1） width: calc(100% - 200px);将面板元素的左侧位置设置为200像素，同时将其宽度设置为屏幕宽度减去200像素。请注意，在这里使用了 calc() 函数来计算面板元素的宽度，这是一种计算 CSS 属性值的方法，可以在其中使用算术表达式。

1、具体使用案例

创建examples/adminray.html文件——》

上述代码讲解：

创建一个 Raycaster 对象用于检测用户点击的模型，同时创建一个 Vector2 对象用于保存鼠标点击的位置。在 onClick 函数中，通过计算鼠标点击的位置，将其转换为 Three.js 中的坐标系。然后使用射线检测算法获取与点击位置相交的模型，如果有相交的模型，则从 intersects 数组中取出第一个模型并生成模型信息，将其显示在面板中；如果没有相交的模型，则隐藏面板。