@realsee/five
Version:
Realsee Renderer SDK
142 lines (135 loc) • 25.6 kB
HTML
<html class="default" lang="en" data-base="../"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>features/model | 如视 Five SDK</title><meta name="description" content="Documentation for 如视 Five SDK"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script><script async src="../assets/hierarchy.js" id="tsd-hierarchy-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => window.app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><a href="../index.html" class="title">如视 Five SDK</a><div id="tsd-toolbar-links"></div><button id="tsd-search-trigger" class="tsd-widget" aria-label="Search"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-search"></use></svg></button><dialog id="tsd-search" aria-label="Search"><input role="combobox" id="tsd-search-input" aria-controls="tsd-search-results" aria-autocomplete="list" aria-expanded="true" autocapitalize="off" autocomplete="off" placeholder="Search the docs" maxLength="100"/><ul role="listbox" id="tsd-search-results"></ul><div id="tsd-search-status" aria-live="polite" aria-atomic="true"><div>Preparing search index...</div></div></dialog><a href="#" class="tsd-widget menu" id="tsd-toolbar-menu-trigger" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb" aria-label="Breadcrumb"><li><a href="" aria-current="page">features/model</a></li></ul></div><div class="tsd-panel tsd-typography"><h1 id="model-模型" class="tsd-anchor-link">Model (模型)<a href="#model-模型" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h1>
<ul>
<li><strong>Summary</strong>: Model 是 Five 中三维场景的核心实体,负责管理三维模型数据的加载、渲染和交互。</li>
<li><strong>Schema</strong>: 继承自 THREE.Object3D,包含 ViewLayer 等子对象。</li>
<li><strong>Concepts</strong>: ViewLayer, Parameter, 3DTile, five.ready()。</li>
<li><strong>Examples</strong>: 模型操作与事件监听。</li>
</ul>
<h2 id="schema" class="tsd-anchor-link">Schema<a href="#schema" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2>
<h3 id="model" class="tsd-anchor-link">Model<a href="#model" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
<blockquote>
<p><strong>Definition</strong>: <a href="../../five/model/model.d.ts">Model</a></p>
</blockquote>
<p>Model 类继承自 <code>THREE.Object3D</code>,是三维场景中的顶级对象。</p>
<pre><code class="typescript"><span class="hl-8">// 简化版定义,完整定义参考 lib/five/model/model.ts</span><br/><span class="hl-3">class</span><span class="hl-1"> </span><span class="hl-7">Model</span><span class="hl-1"> </span><span class="hl-3">extends</span><span class="hl-1"> </span><span class="hl-7">THREE</span><span class="hl-1">.</span><span class="hl-7">Object3D</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-8">/** 唯一标识 */</span><br/><span class="hl-1"> </span><span class="hl-3">public</span><span class="hl-1"> </span><span class="hl-6">fiveId</span><span class="hl-1">: </span><span class="hl-7">string</span><span class="hl-1">;</span><br/><br/><span class="hl-1"> </span><span class="hl-8">/** 对应的 Work 数据 */</span><br/><span class="hl-1"> </span><span class="hl-3">public</span><span class="hl-1"> </span><span class="hl-6">work</span><span class="hl-1">: </span><span class="hl-7">Work</span><span class="hl-1">;</span><br/><br/><span class="hl-1"> </span><span class="hl-8">/** 模型参数配置 */</span><br/><span class="hl-1"> </span><span class="hl-3">public</span><span class="hl-1"> </span><span class="hl-6">parameter</span><span class="hl-1">: </span><span class="hl-7">Parameter</span><span class="hl-1">;</span><br/><br/><span class="hl-1"> </span><span class="hl-8">/** 包含的视图层 (如 mesh, point_cloud, gaussian_splatting) */</span><br/><span class="hl-1"> </span><span class="hl-3">public</span><span class="hl-1"> </span><span class="hl-6">viewLayers</span><span class="hl-1">: </span><span class="hl-7">ViewLayer</span><span class="hl-1">[];</span><br/><br/><span class="hl-1"> </span><span class="hl-8">/** 是否加载完成 (初次加载) */</span><br/><span class="hl-1"> </span><span class="hl-3">public</span><span class="hl-1"> </span><span class="hl-6">loaded</span><span class="hl-1">: </span><span class="hl-7">boolean</span><span class="hl-1">;</span><br/><br/><span class="hl-1"> </span><span class="hl-8">/** 是否细化完成 (高清纹理/模型加载完毕) */</span><br/><span class="hl-1"> </span><span class="hl-3">public</span><span class="hl-1"> </span><span class="hl-6">refined</span><span class="hl-1">: </span><span class="hl-7">boolean</span><span class="hl-1">;</span><br/><br/><span class="hl-1"> </span><span class="hl-8">/** 细化进度 [当前, 总数] */</span><br/><span class="hl-1"> </span><span class="hl-3">public</span><span class="hl-1"> </span><span class="hl-6">refineProgress</span><span class="hl-1">: [</span><span class="hl-7">number</span><span class="hl-1">, </span><span class="hl-7">number</span><span class="hl-1">];</span><br/><br/><span class="hl-1"> </span><span class="hl-8">/** 外包围盒 */</span><br/><span class="hl-1"> </span><span class="hl-3">public</span><span class="hl-1"> </span><span class="hl-6">boundingBox</span><span class="hl-1">: </span><span class="hl-7">THREE</span><span class="hl-1">.</span><span class="hl-7">Box3</span><span class="hl-1">;</span><br/><br/><span class="hl-1"> </span><span class="hl-8">/** 楼层数量 */</span><br/><span class="hl-1"> </span><span class="hl-3">public</span><span class="hl-1"> </span><span class="hl-6">floorLength</span><span class="hl-1">: </span><span class="hl-7">number</span><span class="hl-1">;</span><br/><span class="hl-1">}</span>
</code><button type="button">Copy</button></pre>
<blockquote>
<p><strong>refineProgress 说明</strong>:</p>
<ul>
<li>类型: <code>[number, number]</code></li>
<li>含义: <code>[已处理的瓦片/纹理数量, 总瓦片/纹理数量]</code>。</li>
<li>用途: 用于计算模型加载/细化的百分比进度 (progress = current / total)。</li>
</ul>
</blockquote>
<h2 id="concepts" class="tsd-anchor-link">Concepts<a href="#concepts" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2>
<h3 id="1-vs" class="tsd-anchor-link">1. <code>five.models</code> vs <code>five.model</code><a href="#1-vs" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
<ul>
<li><strong><code>five.models</code></strong>: 这是一个数组,返回当前场景中所有已加载的 <code>Model</code> 实例列表。</li>
<li><strong><code>five.model</code></strong>: 这是一个便捷属性,直接返回 <code>five.models[0]</code>。</li>
</ul>
<p>通常情况下,如果你只加载了一个 Work,可以直接使用 <code>five.model</code> 来操作当前模型。</p>
<pre><code class="typescript"><span class="hl-8">// 下面两种方式是等价的</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">model1</span><span class="hl-1"> = </span><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-6">models</span><span class="hl-1">[</span><span class="hl-11">0</span><span class="hl-1">];</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">model2</span><span class="hl-1"> = </span><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-6">model</span><span class="hl-1">;</span>
</code><button type="button">Copy</button></pre>
<h3 id="2-model-vs-work" class="tsd-anchor-link">2. Model vs Work<a href="#2-model-vs-work" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
<ul>
<li><strong>Work (数据)</strong>: 它是静态的描述数据(JSON),包含了模型的下载地址(URL)、元数据(Metadata)、初始状态等。它是“菜谱”。</li>
<li><strong>Model (实体)</strong>: 它是运行时的三维对象(Object3D),包含了实际的几何体(Geometry)、材质(Material)和渲染状态。它是“菜肴”。</li>
</ul>
<p>关系:<code>five.load(work)</code> 过程就是根据 Work 数据创建 Model 实体的过程。</p>
<h3 id="3-viewlayer-分层思想" class="tsd-anchor-link">3. ViewLayer 分层思想<a href="#3-viewlayer-分层思想" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
<p>一个完整的 VR 模型通常由多个部分组成,Five 使用 <strong>ViewLayer</strong> 来管理这些分层。</p>
<p>常见的 ViewLayer 类型:</p>
<ul>
<li><strong><code>mesh</code> (网格层)</strong>: 也就是可以看到的实体模型(墙面、地板等)。</li>
<li><strong><code>point_cloud</code> (点云层)</strong>: 激光点云数据。它并非低精度数据,同样支持高精度的近距离观察,并支持碰撞检测。</li>
<li><strong><code>gaussian_splatting</code> (高斯泼溅层)</strong>: 新一代三维重建渲染技术,用于展示极高真实感的场景细节。</li>
</ul>
<p><strong>层级结构</strong>:
Model 加载完成后,会自动根据 Work 数据生成对应的 ViewLayer,并挂载为 <code>Model</code> 的子对象。开发者可以通过 <code>model.viewLayers</code> 访问它们。</p>
<pre><code class="text">Model (Object3D)
├── ViewLayer (mesh) -> 负责网格模型渲染
└── ViewLayer (point_cloud) -> 负责点云渲染
</code><button type="button">Copy</button></pre>
<h3 id="4-parameter-简述" class="tsd-anchor-link">4. Parameter (简述)<a href="#4-parameter-简述" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
<p><code>Model</code> 实例上挂载了一个 <code>parameter</code> 对象(<code>five.models[0].parameter</code>)。
它是专门用于控制 <strong>模型渲染表现</strong> 的配置器。</p>
<ul>
<li><strong>作用</strong>: 控制模型的透明度、显示的楼层、相机裁剪范围等。</li>
<li><strong>详情</strong>: 详见 <a href="features_parameter.html">Parameter</a> (待创建)。</li>
</ul>
<h3 id="5-3dtile-简述" class="tsd-anchor-link">5. 3DTile (简述)<a href="#5-3dtile-简述" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
<p><code>ViewLayer</code> 的底层实现基于 <strong>3DTile</strong> 技术(类名为 <code>Tile3D</code>)。</p>
<ul>
<li><strong>作用</strong>: 实现大规模三维数据的流式加载(LOD)。它能根据相机距离动态加载不同精度的模型块,保证渲染性能。</li>
<li><strong>详情</strong>: 详见 <a href="features_3dtile.html">3DTile</a> (待创建)。</li>
</ul>
<h3 id="6-fiveready" class="tsd-anchor-link">6. five.ready()<a href="#6-fiveready" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
<p><code>five.ready()</code> 是一个 Promise 方法,用于等待当前环境“准备就绪”。</p>
<ul>
<li><strong>对于 Model 模式</strong>: 它会等待 Model 几何体加载完成(<code>model.loaded</code> 为 true)。</li>
<li><strong>对于 Panorama 模式</strong>: 它会等待全景图基本加载完成。</li>
</ul>
<p>推荐在执行截图、复杂的模型操作前,先 <code>await five.ready()</code>。</p>
<h3 id="7-射线碰撞-raycaster" class="tsd-anchor-link">7. 射线碰撞 (Raycaster)<a href="#7-射线碰撞-raycaster" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
<p>Model 提供了高效的射线检测方法 <code>intersectRaycaster</code>,内置了 BVH 加速,性能优于 Three.js 原生方法。</p>
<ul>
<li><strong>API</strong>: <code>model.intersectRaycaster(raycaster: THREE.Raycaster): THREE.Intersection[]</code></li>
<li><strong>用途</strong>: 鼠标点击拾取、视线检测、碰撞检测。</li>
<li><strong>详情</strong>: 详见 <a href="features_raycast.html">Raycast</a>。</li>
</ul>
<h2 id="events" class="tsd-anchor-link">Events<a href="#events" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2>
<p>Five 实例上会派发与 Model 相关的生命周期事件,开发者可以通过 <code>five.on()</code> 监听。</p>
<table>
<thead>
<tr>
<th style="text-align:left">事件名</th>
<th style="text-align:left">说明</th>
<th style="text-align:left">回调参数</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left"><strong><code>model.load</code></strong></td>
<td style="text-align:left">单个 Model 几何体加载完成时触发。此时模型可见,但纹理可能模糊。</td>
<td style="text-align:left"><code>{ model: Model, work: Work }</code></td>
</tr>
<tr>
<td style="text-align:left"><strong><code>models.refined</code></strong></td>
<td style="text-align:left">所有 Model 的纹理细化完成(变清晰)时触发。</td>
<td style="text-align:left"><code>{ modelScene: ModelScene }</code></td>
</tr>
<tr>
<td style="text-align:left"><strong><code>model.changeShownFloor</code></strong></td>
<td style="text-align:left">Model 的楼层显隐状态发生变化时触发。</td>
<td style="text-align:left"><code>{ model: Model, work: Work }</code></td>
</tr>
<tr>
<td style="text-align:left"><strong><code>model.error</code></strong></td>
<td style="text-align:left">Model 加载出错时触发。</td>
<td style="text-align:left"><code>{ error: Error, model: Model, work: Work }</code></td>
</tr>
</tbody>
</table>
<h2 id="examples" class="tsd-anchor-link">Examples<a href="#examples" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2>
<h3 id="获取并操作当前模型" class="tsd-anchor-link">获取并操作当前模型<a href="#获取并操作当前模型" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
<pre><code class="typescript"><span class="hl-8">// 获取当前模型</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">model</span><span class="hl-1"> = </span><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-6">models</span><span class="hl-1">[</span><span class="hl-11">0</span><span class="hl-1">];</span><br/><br/><span class="hl-10">if</span><span class="hl-1"> (</span><span class="hl-6">model</span><span class="hl-1">) {</span><br/><span class="hl-1"> </span><span class="hl-6">console</span><span class="hl-1">.</span><span class="hl-5">log</span><span class="hl-1">(</span><span class="hl-9">"模型对应 Work 名称:"</span><span class="hl-1">, </span><span class="hl-6">model</span><span class="hl-1">.</span><span class="hl-6">work</span><span class="hl-1">.</span><span class="hl-6">name</span><span class="hl-1">);</span><br/><span class="hl-1"> </span><span class="hl-6">console</span><span class="hl-1">.</span><span class="hl-5">log</span><span class="hl-1">(</span><span class="hl-9">"模型是否细化完成:"</span><span class="hl-1">, </span><span class="hl-6">model</span><span class="hl-1">.</span><span class="hl-6">refined</span><span class="hl-1">);</span><br/><br/><span class="hl-1"> </span><span class="hl-8">// 监听模型细化事件</span><br/><span class="hl-1"> </span><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-5">on</span><span class="hl-1">(</span><span class="hl-9">"model.refined"</span><span class="hl-1">, () </span><span class="hl-3">=></span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-6">console</span><span class="hl-1">.</span><span class="hl-5">log</span><span class="hl-1">(</span><span class="hl-9">"模型高清资源加载完毕"</span><span class="hl-1">);</span><br/><span class="hl-1"> });</span><br/><span class="hl-1">}</span>
</code><button type="button">Copy</button></pre>
<h3 id="遍历-viewlayer" class="tsd-anchor-link">遍历 ViewLayer<a href="#遍历-viewlayer" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
<pre><code class="typescript"><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">model</span><span class="hl-1"> = </span><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-6">models</span><span class="hl-1">[</span><span class="hl-11">0</span><span class="hl-1">];</span><br/><span class="hl-8">// model.viewLayers 即为 ViewLayer 列表</span><br/><span class="hl-6">model</span><span class="hl-1">.</span><span class="hl-6">viewLayers</span><span class="hl-1">.</span><span class="hl-5">forEach</span><span class="hl-1">((</span><span class="hl-6">layer</span><span class="hl-1">) </span><span class="hl-3">=></span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-6">console</span><span class="hl-1">.</span><span class="hl-5">log</span><span class="hl-1">(</span><span class="hl-9">`图层名称: </span><span class="hl-3">${</span><span class="hl-6">layer</span><span class="hl-12">.</span><span class="hl-6">name</span><span class="hl-3">}</span><span class="hl-9">, 类型: </span><span class="hl-3">${</span><span class="hl-6">layer</span><span class="hl-12">.</span><span class="hl-6">type</span><span class="hl-3">}</span><span class="hl-9">`</span><span class="hl-1">);</span><br/><br/><span class="hl-1"> </span><span class="hl-10">if</span><span class="hl-1"> (</span><span class="hl-6">layer</span><span class="hl-1">.</span><span class="hl-6">type</span><span class="hl-1"> === </span><span class="hl-9">'mesh'</span><span class="hl-1">) {</span><br/><span class="hl-1"> </span><span class="hl-8">// 对网格层做特殊处理</span><br/><span class="hl-1"> </span><span class="hl-6">layer</span><span class="hl-1">.</span><span class="hl-6">visible</span><span class="hl-1"> = </span><span class="hl-3">true</span><span class="hl-1">;</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">});</span>
</code><button type="button">Copy</button></pre>
<h2 id="common-pitfalls" class="tsd-anchor-link">Common Pitfalls<a href="#common-pitfalls" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2>
<ol>
<li><strong>直接修改 <code>model.children</code></strong>: 不要直接修改 <code>model.children</code> 数组。Model 的子对象是由 Five 内部管理的。如果需要隐藏某个图层,请设置 <code>layer.visible = false</code>。</li>
<li><strong>混淆 <code>five.model</code> 和 <code>five.work</code></strong>: <code>five.model</code> 是 Three.js 对象 (Object3D),用于渲染;<code>five.work</code> 是数据对象,用于描述。</li>
</ol>
<h2 id="related" class="tsd-anchor-link">Related<a href="#related" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2>
<ul>
<li><a href="features_work.html">Work</a>: 了解 Work 数据结构。</li>
<li><a href="features_parameter.html">Parameter</a>: 了解模型参数配置。</li>
<li><a href="features_3dtile.html">3DTile</a>: 了解 3DTile 技术。</li>
<li><a href="features_raycast.html">Raycast</a>: 了解射线检测机制。</li>
</ul>
<hr>
<pre><code class="yaml"><span class="hl-0">tags</span><span class="hl-1">: [</span><span class="hl-2">模型</span><span class="hl-1">, </span><span class="hl-2">三维模型</span><span class="hl-1">, </span><span class="hl-2">点云</span><span class="hl-1">, </span><span class="hl-2">高斯泼溅</span><span class="hl-1">, </span><span class="hl-2">加载</span><span class="hl-1">, </span><span class="hl-2">渲染</span><span class="hl-1">, </span><span class="hl-2">图层</span><span class="hl-1">, </span><span class="hl-2">楼层</span><span class="hl-1">, </span><span class="hl-2">细化</span><span class="hl-1">, </span><span class="hl-2">model</span><span class="hl-1">, </span><span class="hl-2">viewlayer</span><span class="hl-1">, </span><span class="hl-2">object3d</span><span class="hl-1">, </span><span class="hl-2">mesh</span><span class="hl-1">, </span><span class="hl-2">refine</span><span class="hl-1">]</span>
</code><button type="button">Copy</button></pre>
</div></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h3>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h3>On This Page</h3></summary><div class="tsd-accordion-details"><a href="#model-模型"><span>Model (模型)</span></a><ul><li><a href="#schema"><span>Schema</span></a></li><li><ul><li><a href="#model"><span>Model</span></a></li></ul></li><li><a href="#concepts"><span>Concepts</span></a></li><li><ul><li><a href="#1-vs"><span>1. vs </span></a></li><li><a href="#2-model-vs-work"><span>2. <wbr/>Model vs <wbr/>Work</span></a></li><li><a href="#3-viewlayer-分层思想"><span>3. <wbr/>View<wbr/>Layer 分层思想</span></a></li><li><a href="#4-parameter-简述"><span>4. <wbr/>Parameter (简述)</span></a></li><li><a href="#5-3dtile-简述"><span>5. 3<wbr/>D<wbr/>Tile (简述)</span></a></li><li><a href="#6-fiveready"><span>6. five.ready()</span></a></li><li><a href="#7-射线碰撞-raycaster"><span>7. 射线碰撞 (<wbr/>Raycaster)</span></a></li></ul></li><li><a href="#events"><span>Events</span></a></li><li><a href="#examples"><span>Examples</span></a></li><li><ul><li><a href="#获取并操作当前模型"><span>获取并操作当前模型</span></a></li><li><a href="#遍历-viewlayer"><span>遍历 <wbr/>View<wbr/>Layer</span></a></li></ul></li><li><a href="#common-pitfalls"><span>Common <wbr/>Pitfalls</span></a></li><li><a href="#related"><span>Related</span></a></li></ul></div></details></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html">如视 Five SDK</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>