本篇将学习xViewer的导航,剪切和隐藏。这应该足以使用户能够通过所有缩放,平移,轨道运行和隐藏可能的障碍物来检查建筑物内部。点击这里可以看到完整的实例。

一、相机的位置和目标
可以根据产品ID轻松设置摄像机目标。可能最常见的方法是根据由用户选择按下鼠标事件所标识的操作来设置目标。示例如下:
viewer.on('pick', function (args) {
var id = args.id;
viewer.setCameraTarget(id);
pickedId = id;
});

使用 setCameraPosition()方法设置摄像机位置也很容易。以下示例使用HTML输入来设置值,但您肯定会使用一些智能逻辑来实现直观和流畅的用户体验。

<input type="text" id="camX" value="-15000" />
<input type="text" id="camY" value="-15000" />
<input type="text" id="camZ" value="15000" />
<button onclick="SetCamera()">Set camera</button>
<script type="text/javascript">
function SetCamera() {
if (viewer) {
var iX = document.getElementById('camX');
var iY = document.getElementById('camY');
var iZ = document.getElementById('camZ');
viewer.setCameraPosition([iX.value, iY.value, iZ.value]);
}
}
</script>

能够向模型或其零件显示默认轴对齐视图始终很重要。这是xViewer的内置功能。它始终对setCameraTarget()方法设置的原点和距离进行操作。在示例中,每次用户选择上面列出的元素时,都会设置相机目标。

<button onclick="if (viewer) viewer.show('front');">Front</button>
<button onclick="if (viewer) viewer.show('back');">Back</button>
<button onclick="if (viewer) viewer.show('top');">Top</button>
<button onclick="if (viewer) viewer.show('bottom');">Bottom</button>
<button onclick="if (viewer) viewer.show('left');">Left</button>
<button onclick="if (viewer) viewer.show('right');">Right</button>

xViewer 只使用了浏览器的默认导航功能,这些功能在鼠标左键轨道上运行,在中间按钮上平移并放大滚动按钮。这应该是直观的。请注意,浏览器的最佳做法是将其放在没有垂直滚动条的单个页面上。因为缩放模型并同时滚动网站,缩放很难。如果您希望这样做,可以使用以下代码更改左按钮的默认行为:

<button onclick="if (viewer) viewer.navigationMode = 'orbit';">Orbit</button>
<button onclick="if (viewer) viewer.navigationMode = 'free-orbit';">Free orbit</button>
<button onclick="if (viewer) viewer.navigationMode = 'pan';">Pan</button>
<button onclick="if (viewer) viewer.navigationMode = 'zoom';">Zoom</button> <button onclick="if (viewer) viewer.navigationMode = 'none';">Disable default navigation completely</button>

当模型绕其Z轴旋转时,默认轨道模式是固定轨道。您还可以使用围绕实际轴旋转模型的自由轨道,因此更自由。您可以使用它从不寻常的角度查看模型。就像一个提示 - 如果有必要的话,画圆圈来调整水平线。您还可以完全禁用默认导航,如示例最后一行所示,并自行实现不同的导航。API现在没有为此做好准备,但计划在下一个版本中进行。

二、剖切 
  很多时候,用户想要在建筑物内部看到一些东西。建筑物内部的导航可能很容易变得复杂,但如果你可以切割建筑物并看到里面的东西,那么用户的生活将变得更加容易。默认情况下,它也内置在查看器中。如果将平面上的点和平面的法线传递给方法,则可以使用clip()方法自行设置剪切平面,或者如果调用不带参数的方法,则可以让用户以交互方式定义剪切平面。使用unclip()方法取消剪切。
<button onclick="if (viewer) viewer.clip();">Interactive clipping</button>
<button onclick="if (viewer) viewer.unclip();">Unclip</button> <input type="text" id="clipOrigX" value="0" />
<input type="text" id="clipOrigY" value="0" />
<input type="text" id="clipOrigZ" value="0" /> <input type="text" id="clipNormX" value="-1" />
<input type="text" id="clipNormY" value="0" />
<input type="text" id="clipNormZ" value="0" /> <button onclick="Clip()">Clip</button>
<script type="text/javascript">
function Clip() {
var oX = document.getElementById('clipOrigX').value;
var oY = document.getElementById('clipOrigY').value;
var oZ = document.getElementById('clipOrigZ').value; var nX = document.getElementById('clipNormX').value;
var nY = document.getElementById('clipNormY').value;
var nZ = document.getElementById('clipNormZ').value; if (viewer)
viewer.clip([oX, oY, oZ], [nX, nY, nZ]);
}
</script>
三、隐藏
  有时也需要隐藏一个元素或一种类型的元素,比如所有的墙壁。这可以通过使用setState()方法设置产品的状态来实现。使用resetStates()方法将所有状态重置为默认值。此方法有一个可选参数,您可以使用该参数显示空格。默认情况下隐藏它们,除非您手动显示它们。
<select id="cmbHide">
<option value="noAction">No action</option>
<option value="hideProduct">Hide product</option>
<option value="hideType">Hide type</option>
<option value="highlight">Highlight</option>
</select>
<button onclick="if (viewer) viewer.resetStates()">Show all</button>
<script type="text/javascript">
function initHiding() {
viewer.on('pick', function (args) {
var cmb = document.getElementById('cmbHide');
var option = cmb.value;
switch (option) {
case 'hideProduct':
viewer.setState(xState.HIDDEN, [args.id]);
break;
case 'hideType':
var type = viewer.getProductType(args.id);
viewer.setState(xState.HIDDEN, type);
break;
case 'highlight':
viewer.setState(xState.HIGHLIGHTED, [args.id]);
break;
default:
break;
}
});
};
</script>
四、X-Ray渲染模式

  xViewwe还有一个选项,那就是突出显示。它内置于引擎的核心,如果您需要在视觉上突出显示或隔离模型中的某些对象,它非常有用。它与X-Ray渲染模式结合使用时特别有用,其中所有内容都以半透明浅蓝色呈现,除了具有状态xState.HIGHLIGHTEDxState.XRAYVISIBLE的产品。要在普通和X射线渲染模式之间切换,只需设置xViewer的renderingMode属性即可

<div>
Rendering mode
<label>
<input type="radio" name="rRenderingMode" checked="checked"
onchange="if (viewer) viewer.renderingMode = 'normal';"/>
Normal
</label>
<label>
<input type="radio" name="rRenderingMode"
onchange="if (viewer) viewer.renderingMode = 'x-ray';" />
X-Ray
</label>
</div>
 

xBIM 基础12 WeXplorer xViewer的导航、相机、剖切、隐藏等操作的更多相关文章

  1. xBIM WeXplorer xViewer的导航,相机、剖切、隐藏 等操作

    目录 基础 xBIM WeXplorer 简要介绍 xBIM WeXplorer xViewer 基本应用 xBIM WeXplorer xViewer 浏览器检查 xBIM WeXplorer xV ...

  2. xBIM 基础10 WeXplorer 浏览器检查

    系列目录    [已更新最新开发文章,点击查看详细]  在上一篇 <xBIM基础 09 WeXplorer 基本应用> 已经提到,查看器不会在所有浏览器的所有设备上运行.为了操作效率和简单 ...

  3. xBIM 基础08 WeXplorer 简介

    系列目录    [已更新最新开发文章,点击查看详细]  一.WeXplorer 简介 WeXplorer 是 XBIM 工具包的可视化部分,它使用预处理的 WexBIM 文件在 Web 上处理 IFC ...

  4. xBIM 基础09 WeXplorer 基本应用

    系列目录    [已更新最新开发文章,点击查看详细]  在本教程中,将学习如何创建最基本和最直接的查看器. 除了展示建筑模型外,不做其他任何操作.它将只使用内置导航,但是不会对按钮做出事件响应. &l ...

  5. xBIM 基础11 WeXplorer 常用事件

    系列目录    [已更新最新开发文章,点击查看详细]  本篇将介绍查看器在不同场合触发的事件.所有这些都记录在xViewer中. 如果您从Web服务器运行本教程,可以在此处查看完整的实例.并且确保您的 ...

  6. xBIM 基础13 WeXplorer 设置模型颜色

    系列目录    [已更新最新开发文章,点击查看详细]  默认情况下模型具有合理的图形表示.这是从IFC模型中获取的,它应该在所有工具中看起来相同,它应该与您或您的用户的创作环境中的相同.但有时候能够改 ...

  7. xBIM WeXplorer xViewer 基本应用

    目录 基础 xBIM WeXplorer 简要介绍 xBIM WeXplorer xViewer 基本应用 xBIM WeXplorer xViewer 浏览器检查 xBIM WeXplorer xV ...

  8. xBIM WeXplorer xViewer 浏览器检查

    目录 基础 xBIM WeXplorer 简要介绍 xBIM WeXplorer xViewer 基本应用 xBIM WeXplorer xViewer 浏览器检查 xBIM WeXplorer xV ...

  9. Bootstrap <基础十八>面包屑导航(Breadcrumbs)

    面包屑导航(Breadcrumbs)是一种基于网站层次信息的显示方式.以博客为例,面包屑导航可以显示发布日期.类别或标签.它们表示当前页面在导航层次结构内的位置. Bootstrap 中的面包屑导航( ...

随机推荐

  1. ES JVM使用如果超过75%就会GC较多,导致ES索引性能下降

    转自:https://www.elastic.co/guide/en/cloud/current/ec-metrics-memory-pressure.html Scenario: How Does ...

  2. Redis学习笔记(十一) 命令进阶:Connection(连接)

    原文链接:http://doc.redisfans.com/connection/index.html auth password 有时候处于安全性考虑,我们可以使用密码来保护redis服务器,每次连 ...

  3. 有关windows dpi适配(c#)

    /// <summary>当前Dpi</summary> public static Int32 Dpi { get; set; } /// <summary>修正 ...

  4. Code Snippet 插件 使用——代码高亮

    Code Snippet 下载地址 下载后安装,重启windows live writer 插入-->CodeSnippet 将代码粘贴进去,如图: 代码效果: @Controllerpubli ...

  5. RocketMQ学习笔记(11)----RocketMQ的PushConsumer和PullConsumer

    1. PushConsumer 推,Broker主动向Consumer推消息,它Consumer的一种,应用通常向对象注册一个Listener接口,一旦接收到消息,Consumer对象立刻回调Lins ...

  6. Java之秒杀活动解决方案

    0 引言 本文主要描述,服务端做相关秒杀活动的时候,对应的解决方案,即高并发下的数据安全. 1 优化方案 1.1 乐观锁思路 Redis中的watch,请求时,通过Redis查询当前抢购数据,如果当前 ...

  7. 汇编(assembling)简介(源:阮一峰)

    简介 计算机真正能够理解的是低级语言,它专门用来控制硬件.汇编语言就是低级语言,直接描述/控制 CPU 的运行.如果你想了解 CPU 到底干了些什么,以及代码的运行步骤,就一定要学习汇编语言. 我们知 ...

  8. Windows Vista 安装和使用指导 - 停止支持后的几条建议

    简介 曾经被广大网民吐槽的Windows Vista现在已经淡出了人们的视线,但仍有一些朋友想要体验一下这个操作系统.Windows Vista是Windows发展路线上的里程碑,相比之前的Windo ...

  9. Linux之awk使用

    基本语法 $n :当前记录的第n个字段,比如n为1表示第一个字段,n为2表示第二个字段 $0:执行过程中当前行的文本内容 \t:制表符 \n:换行符 -F'[:#/]' : 定义三个分隔符,注意有-F ...

  10. Manacher(最大回文字串)

    很好的讲解 注意两端的字符要不同,同时数组要开大一些 [Manacher]最长回文子串 #include<bits/stdc++.h> #define REP(i, a, b) for(r ...