zyy-engine

图形引擎API


Viewer3D

<h1>BCore.Viewer.Viewer3D</h1> <h2>构造函数</h2> <pre><code class="language-javascript">new BCore.Viewer.Viewer3D(config)</code></pre> <h3>参数</h3> <ul> <li><strong>config</strong>: <code>BCore.Viewer.Viewer3DConfig</code> - 三维模型视图对象的配置。</li> </ul> <h2>方法总览</h2> <ul> <li><code>setSelectStyle(selectStyle)</code> 设置选中状态样式</li> <li><code>getSelectStyle()</code> 获取选中状态样式</li> <li><code>setBackgroundColor(color1, color2?)</code> 设置背景颜色</li> <li><code>getBackgroundColor()</code> 设置默认背景颜色</li> <li><code>setAntialiasLevel(level)</code> 设置抗锯齿等级</li> <li><code>resize()</code> 重置引擎尺寸信息</li> <li><code>fullScreen(isFullScreen)</code> 全屏</li> <li><code>getScreenShotImage(type?)</code> 获取截屏</li> <li><code>screenPositionToWorldPosition(pos: { x, y }):pos: { x, y, z }</code> 屏幕坐标转世界坐标</li> <li><code>worldPositionToScreenPosition(pos: { x, y, z }):pos: { x, y }</code> 世界坐标转屏幕坐标</li> <li><code>enablePointSelectController()</code> 启用点选控制器</li> <li><code>disablePointSelectController()</code> 关闭点选控制器</li> <li><code>openFog(color: string, near?: number , far?: number)</code> 开启场景雾化效果</li> <li><code>closeFog()</code> 关闭场景雾化效果</li> <li><code>openAmbientOcclusion()</code> 开启环境光遮蔽</li> <li><code>closeAmbientOcclusion()</code> 关闭环境光遮蔽</li> <li><code>getAmbientOcclusionParams():params</code> 获取环境光遮蔽参数</li> <li><code>setAmbientOcclusionParams(params)</code> 设置环境光遮蔽参数</li> <li><code>openSkyBox(posx, negx, posy, negy, posz, negz)</code> 开启天空盒子</li> <li><code>closeSkyBox()</code> 关闭天空盒子</li> <li><code>getModelConfig()</code> 获取模型加载配置</li> <li><code>setModelConfig(modelconfig)</code> 设置模型加载配置</li> <li><code>render()</code> 更新渲染</li> <li><code>destroy()</code> 销毁对象</li> </ul> <h2>方法</h2> <h3>1. 设置选中状态样式</h3> <pre><code class="language-javascript">setSelectStyle(selectStyle)</code></pre> <h4>简要描述</h4> <p>设置选中构件、物体等对象后所呈现的颜色、透明度等样式。</p> <h4>示例</h4> <pre><code class="language-javascript">let viewer3DConfig = new BCore.Viewer.Viewer3DConfig(); let viewer3d = new BCore.Viewer.Viewer3D(viewer3DConfig); let selectStyle = viewer3D.getSelectStyle(); selectStyle.color = '#66CDAA'; selectStyle.opacity = 0.5; selectStyle.depthTest = false; selectStyle.transparent = true; selectStyle.single = true; selectStyle.enable = true; viewer3d.setSelectStyle(selectStyle);</code></pre> <p>&lt;br&gt;</p> <h3>2. 获取选中状态样式</h3> <pre><code class="language-javascript">getSelectStyle()</code></pre> <h4>简要描述</h4> <p>获取选中构件、物体等对象后所呈现的颜色、透明度等样式。</p> <h4>示例</h4> <pre><code class="language-javascript">let viewer3DConfig= new BCore.Viewer.Viewer3DConfig(); let viewer3d = new BCore.Viewer.Viewer3D(viewer3DConfig); let selectStyle = viewer3d.getSelectStyle();</code></pre> <p>&lt;br&gt;</p> <h3>3. 设置背景颜色</h3> <p>设置背景颜色/天空颜色。</p> <pre><code class="language-javascript">setBackgroundColor(color1, color2?)</code></pre> <h4>参数</h4> <ul> <li>color1 : <code>string</code> - 颜色1</li> <li> <p>color2 :<code>string</code> - 颜色2</p> <p>注: 当color1 != color2 时,为渐变色</p> </li> </ul> <h4>示例</h4> <pre><code class="language-javascript">let viewer3DConfig= new BCore.Viewer.Viewer3DConfig(); let viewer3d = new BCore.Viewer.Viewer3D(viewer3DConfig); let color1 = '#000000'; let color2 = '#0000FF'; viewer3d.setBackgroundColor(color1, color2);</code></pre> <p>&lt;br&gt;</p> <h3>4. 重置引擎尺寸信息</h3> <pre><code class="language-javascript">resize()</code></pre> <h4>简要描述</h4> <p>重置引擎尺寸信息。</p> <h4>示例</h4> <pre><code class="language-javascript">let viewer3DConfig= new BCore.Viewer.Viewer3DConfig(); let viewer3d = new BCore.Viewer.Viewer3D(viewer3DConfig); viewer3d.resize();</code></pre> <p>&lt;br&gt;</p> <h3>5. 视口全屏</h3> <pre><code class="language-javascript">fullScreen(isFullScreen)</code></pre> <h4>参数</h4> <ul> <li><strong>isFullScreen</strong>: <code>boolean</code> - 是否全屏。</li> </ul> <h4>示例</h4> <pre><code class="language-javascript">let viewer3DConfig= new BCore.Viewer.Viewer3DConfig(); let viewer3d = new BCore.Viewer.Viewer3D(viewer3DConfig); viewer3d.fullScreen(true);</code></pre> <p>&lt;br&gt;</p> <h3>6. 获取截屏</h3> <pre><code class="language-javascript">getScreenShotImage(type?)</code></pre> <h4>参数</h4> <ul> <li><strong>type</strong>: <code>string</code> - 图片类型,默认:<code>'image/png'</code>,可选:<code>'image/jpeg'</code>。</li> </ul> <h4>示例</h4> <pre><code class="language-javascript">let viewer3DConfig= new BCore.Viewer.Viewer3DConfig(); let viewer3d = new BCore.Viewer.Viewer3D(viewer3DConfig); let base64Img = viewer3d.getScreenShotImage('image/jpeg');</code></pre> <p>&lt;br&gt;</p> <h3>7. 屏幕坐标转世界坐标</h3> <pre><code class="language-javascript">screenPositionToWorldPosition(pos: { x, y })</code></pre> <h4>参数</h4> <ul> <li><strong>pos</strong>: <code>{ x, y }</code> - 屏幕坐标。</li> </ul> <h4>示例</h4> <pre><code class="language-javascript">let viewer3DConfig= new BCore.Viewer.Viewer3DConfig(); let viewer3d = new BCore.Viewer.Viewer3D(viewer3DConfig); let posScreen = { x: 10, y: 10 }; let posWorld = viewer3d.screenPositionToWorldPosition(posScreen);</code></pre> <p>&lt;br&gt;</p> <h3>8. 世界坐标转屏幕坐标</h3> <pre><code class="language-javascript">worldPositionToScreenPosition(pos: { x, y, z })</code></pre> <h4>参数</h4> <ul> <li><strong>pos</strong>: <code>{ x, y, z }</code> - 世界坐标。</li> </ul> <h4>示例</h4> <pre><code class="language-javascript">let viewer3DConfig= new BCore.Viewer.Viewer3DConfig(); let viewer3d = new BCore.Viewer.Viewer3D(viewer3DConfig); let posWorld = { x: 10, y: 10, z: 10 }; let posScreen = viewer3d.worldPositionToScreenPosition(posWorld);</code></pre> <p>&lt;br&gt;</p> <h3>9. 设置抗锯齿等级</h3> <pre><code class="language-javascript">setAntialiasLevel(level)</code></pre> <h4>参数</h4> <ul> <li><strong>level</strong>: <code>BCore.Static.AntialiasLevel</code> - 抗锯齿等级,等级越高抗锯齿效果越好,性能越低。</li> </ul> <h4>示例</h4> <pre><code class="language-javascript">let viewer3DConfig= new BCore.Viewer.Viewer3DConfig(); let viewer3d = new BCore.Viewer.Viewer3D(viewer3DConfig); viewer3d.setAntialiasLevel(BCore.Static.AntialiasLevel.EQUILIBRIUM);</code></pre> <p>&lt;br&gt;</p> <h3>10. 开启阴影效果</h3> <pre><code class="language-javascript">openShadowMap()</code></pre> <h4>示例</h4> <pre><code class="language-javascript">viewer3d.openShadowMap();</code></pre> <p>&lt;br&gt;</p> <h3>11. 关闭阴影效果</h3> <pre><code class="language-javascript">closeShadowMap()</code></pre> <h4>示例</h4> <pre><code class="language-javascript">viewer3d.closeShadowMap();</code></pre> <p>&lt;br&gt;</p> <h3>12. 开启场景雾化效果</h3> <pre><code class="language-javascript">openFog(color: string, near?: number, far?: number)</code></pre> <h4>参数</h4> <ul> <li><strong>color</strong>: <code>string</code> - 雾化颜色。</li> <li><strong>near</strong>: <code>number</code> - 相机与渲染对象距离小于该值不受雾化影响。</li> <li><strong>far</strong>: <code>number</code> - 相机与渲染对象距离大于该值不受雾化影响。</li> </ul> <h4>示例</h4> <pre><code class="language-javascript">... viewer3d.openFog('#9f9f9f'); viewer3d.render();</code></pre> <p>&lt;br&gt;</p> <h3>13. 关闭场景雾化效果</h3> <pre><code class="language-javascript">closeFog()</code></pre> <h4>示例</h4> <pre><code class="language-javascript">... viewer3d.closeFog(); viewer3d.render();</code></pre> <p>&lt;br&gt;</p> <h3>14. 开启天空盒子</h3> <pre><code class="language-javascript">openSkyBox(posx, negx, posy, negy, posz, negz)</code></pre> <h4>参数</h4> <ul> <li><strong>posx</strong>: <code>string</code> - 前方图片。</li> <li><strong>negx</strong>: <code>string</code> - 后方。</li> <li><strong>posy</strong>: <code>string</code> - 左方图片。</li> <li><strong>negy</strong>: <code>string</code> - 右方图片。</li> <li><strong>posz</strong>: <code>string</code> - 上方图片。</li> <li><strong>negz</strong>: <code>string</code> - 下方图片。</li> </ul> <h4>示例</h4> <pre><code class="language-javascript">... viewer3d.openSkyBox(url1, url2, url3, url4, url5, url6); viewer3d.render();</code></pre> <p>&lt;br&gt;</p> <h3>15. 关闭天空盒子</h3> <pre><code class="language-javascript">closeSkyBox()</code></pre> <h4>示例</h4> <pre><code class="language-javascript">... viewer3d.closeSkyBox(); viewer3d.render();</code></pre> <p>&lt;br&gt;</p> <h3>16. 更新渲染</h3> <p>在需要更新图形引擎渲染时调用该方法</p> <pre><code class="language-javascript">render()</code></pre> <h4>示例</h4> <pre><code class="language-javascript">//显示相关数据修改、相机操作等 ... viewer3d.render();</code></pre> <p>&lt;br&gt;</p> <h3>17. 设置模型加载配置</h3> <pre><code class="language-javascript">setModelConfig(modelconfig)</code></pre> <h4>参数</h4> <ul> <li><strong>modelconfig</strong>: <code>{ isLoadModelVisible: boolean }</code> - 设置加载模型时是否可见。</li> </ul> <h4>示例</h4> <pre><code class="language-javascript">... let modelConfig = viewer3d.getModelConfig(); modelConfig.isLoadModelVisible = false; // 隐藏加载模型 viewer3d.setModelConfig(modelConfig); ...</code></pre> <p>&lt;br&gt;</p> <h2>返回值说明</h2> <p>多个方法返回不同类型的值,具体返回内容以方法描述为准。</p>

页面列表

ITEM_HTML