射线拾取
<h1>射线拾取</h1>
<h2>一、射线拾取配置 - BCore.Extension.RaycasterConfig</h2>
<h3>构造</h3>
<pre><code class="language-javascript">new BCore.Extension.RaycasterConfig(viewer)</code></pre>
<h3>成员变量</h3>
<table>
<thead>
<tr>
<th>成员变量</th>
<th>类型</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>viewer</td>
<td>BCore.Viewer.Viewer3D</td>
<td>视图对象</td>
</tr>
</tbody>
</table>
<h3>属性</h3>
<ul>
<li><strong>isAdsorb</strong>: <code>boolean</code> - 是否开启吸附</li>
<li><strong>adsorbDistance</strong>: <code>number</code> - 吸附阈值，默认值为 <code>0.001</code></li>
<li><strong>isOnlyAdsorbLine</strong>: <code>boolean</code> - 是否仅吸附线</li>
<li><strong>isSupportBlank</strong>: <code>boolean</code> - 是否支持空白点选</li>
<li><strong>ZBlankPlanePosition</strong>: <code>{x: 0, y: 0, z: 0}</code> - 空白平面初始位置</li>
</ul>
<hr />
<h2>2.射线拾取器 - BCore.Extension.Raycaster</h2>
<h3>参考文档</h3>
<p><a href="https://threejs.org/docs/index.html?q=rayca#api/en/core/Raycaster">Three.js Raycaster</a></p>
<h3>构造</h3>
<pre><code class="language-javascript">new BCore.Extension.Raycaster(config)</code></pre>
<h3>参数</h3>
<table>
<thead>
<tr>
<th>参数名</th>
<th>必选</th>
<th>类型</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>config</td>
<td>是</td>
<td>BCore.Extension.RaycasterConfig</td>
<td>射线拾取配置参数对象</td>
</tr>
<tr>
<td>origin</td>
<td>否</td>
<td><code>{ x: number, y: number, z: number }</code></td>
<td>射线端点</td>
</tr>
<tr>
<td>direction</td>
<td>否</td>
<td><code>{ x: number, y: number, z: number }</code></td>
<td>射线方向</td>
</tr>
</tbody>
</table>
<hr />
<h3>方法示例</h3>
<h4>1. 设置射线参数</h4>
<h5>简要描述</h5>
<p>通过射线端点以及射线方向设置射线。</p>
<h5>接口</h5>
<pre><code class="language-javascript">set(origin: vec3, direction: vec3)</code></pre>
<h5>参数</h5>
<table>
<thead>
<tr>
<th>参数名</th>
<th>必选</th>
<th>类型</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>origin</td>
<td>是</td>
<td><code>{ x: number, y: number, z: number }</code></td>
<td>射线端点</td>
</tr>
<tr>
<td>direction</td>
<td>是</td>
<td><code>{ x: number, y: number, z: number }</code></td>
<td>射线方向</td>
</tr>
</tbody>
</table>
<h5>示例</h5>
<pre><code class="language-javascript">let raycasterConfig = new BCore.Extension.RaycasterConfig(mViewer3D);
let raycaster = new BCore.Extension.Raycaster(raycasterConfig);
// 端点为坐标原点，方向为 {x:0,y:0,z:1}
raycaster.set({x:0,y:0,z:0},{x:0,y:0,z:1});</code></pre>
<h5>返回值说明</h5>
<ul>
<li>该接口无返回值。</li>
</ul>
<hr />
<h4>2. 通过屏幕坐标及相机设置射线参数</h4>
<h5>简要描述</h5>
<p>通过屏幕坐标及相机设置射线参数。</p>
<h5>接口</h5>
<pre><code class="language-javascript">setFromCurrentCamera(coords: { x: number, y: number })</code></pre>
<h5>参数</h5>
<table>
<thead>
<tr>
<th>参数名</th>
<th>必选</th>
<th>类型</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>coords</td>
<td>是</td>
<td><code>{ x: number, y: number }</code></td>
<td>归一化的屏幕坐标 <code>{x:(-1~1),y:(-1~1)}</code></td>
</tr>
</tbody>
</table>
<h5>示例</h5>
<pre><code class="language-javascript">let raycasterConfig = new BCore.Extension.RaycasterConfig(mViewer3D);
let raycaster = new BCore.Extension.Raycaster(raycasterConfig);
// 以相机和传入的屏幕坐标构件射线
raycaster.setFromCurrentCamera({x:0,y:0});</code></pre>
<h5>返回值说明</h5>
<ul>
<li>该接口无返回值。</li>
</ul>
<hr />
<h4>3. 获取射线拾取结果</h4>
<h5>简要描述</h5>
<p>获取射线拾取结果。</p>
<h5>接口</h5>
<pre><code class="language-javascript">getIntersectComponents()</code></pre>
<h5>示例</h5>
<pre><code class="language-javascript">let raycasterConfig = new BCore.Extension.RaycasterConfig(mViewer3D);
let raycaster = new BCore.Extension.Raycaster(raycasterConfig);
// 端点为坐标原点，方向为 {x:0,y:0,z:1}
raycaster.set({x:0,y:0,z:0},{x:0,y:0,z:1});
let result = raycaster.getIntersectComponents();</code></pre>
<h5>返回值说明</h5>
<p>返回值为一个包含多个选项的数组，选项包含：</p>
<pre><code class="language-javascript">{
id: string, // 结果id
distance: number,
point: vec3,
face: Face3,
faceIndex: number,
name: string,
dataType: string
}</code></pre>
<hr />
<h4>4. 根据结果id获取拾取面</h4>
<h5>简要描述</h5>
<p>根据结果id获取拾取面。</p>
<h5>接口</h5>
<pre><code class="language-javascript">getIntersectFaceById(id)</code></pre>
<h5>参数</h5>
<table>
<thead>
<tr>
<th>参数名</th>
<th>必选</th>
<th>类型</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>id</td>
<td>是</td>
<td>string</td>
<td>射线拾取结果id</td>
</tr>
</tbody>
</table>
<h5>示例</h5>
<pre><code class="language-javascript">let raycasterConfig = new BCore.Extension.RaycasterConfig(mViewer3D);
let raycaster = new BCore.Extension.Raycaster(raycasterConfig);
// 端点为坐标原点，方向为 {x:0,y:0,z:1}
raycaster.set({x:0,y:0,z:0},{x:0,y:0,z:1});
let result = raycaster.getIntersectComponents();
raycaster.getIntersectFaceById(result[0].id);</code></pre>
<h5>返回值说明</h5>
<p>返回值为拾取到的面和其轮廓线：</p>
<pre><code class="language-javascript">{
faceMesh: Object3D, // 拾取到的面
faceBorder: Object3D // 拾取到的面的轮廓线
}</code></pre>
<hr />
<h4>5. 根据结果id获取拾取体</h4>
<h5>简要描述</h5>
<p>根据结果id获取拾取体。</p>
<h5>接口</h5>
<pre><code class="language-javascript">getIntersectVolumeById(id)</code></pre>
<h5>参数</h5>
<table>
<thead>
<tr>
<th>参数名</th>
<th>必选</th>
<th>类型</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>id</td>
<td>是</td>
<td>string</td>
<td>射线拾取结果id</td>
</tr>
</tbody>
</table>
<h5>示例</h5>
<pre><code class="language-javascript">let raycasterConfig = new BCore.Extension.RaycasterConfig(mViewer3D);
let raycaster = new BCore.Extension.Raycaster(raycasterConfig);
// 端点为坐标原点，方向为 {x:0,y:0,z:1}
raycaster.set({x:0,y:0,z:0},{x:0,y:0,z:1});
let result = raycaster.getIntersectComponents();
raycaster.getIntersectVolumeById(result[0].id);</code></pre>
<h5>返回值说明</h5>
<p>返回值为拾取到的体和其轮廓线：</p>
<pre><code class="language-javascript">{
volumeMesh: Object3D, // 拾取到的体
volumeBorder: Object3D // 拾取到的体的轮廓线
}</code></pre>
<hr />
<p>以上是关于射线拾取相关的文档，希望对你有所帮助！</p>