网站站点建设的端口,网站建设程序有哪些,正规做网站公司,自建网站的步骤相信大多数图扑 HT 用户都曾见过这个飞机的 Demo#xff0c;在图扑发展的这十年#xff0c;这个 Demo 是许多学习 HT 用户一定会参考的经典 Demo 之一。 这个 Demo 用简洁的代码生动地展示了 OBJ 模型加载、数据绑定、动画和漫游等功能的实现。许多用户参考这个简单的 Demo 后…相信大多数图扑 HT 用户都曾见过这个飞机的 Demo在图扑发展的这十年这个 Demo 是许多学习 HT 用户一定会参考的经典 Demo 之一。 这个 Demo 用简洁的代码生动地展示了 OBJ 模型加载、数据绑定、动画和漫游等功能的实现。许多用户参考这个简单的 Demo 后实现了更多效果更加炫酷的功能。可以说这个 Demo 为很多使用图扑 HT 开发的用户提供了指引。
随着图扑 HT 技术的不断更新迭代原有场景显得过于简单、且模型不够精细功能上也过于单一。为了解决以上问题在图扑十周年之际我们推出了升级版的飞机 Demo Pro将展示更加精美、更加复杂的模型和场景以及更加多样化的功能。 FBX 与 OBJ
旧版本的飞机 Demo 使用的是网上现成的 OBJ 模型模型效果粗糙没有材质效果比较生硬。螺旋桨和指示灯的动画需要通过解析 OBJ 模型并进行数据绑定才能驱动数据变化实现动画效果。
如今图扑 HT 已支持 FBX 模型飞机 Demo Pro 中的飞机模型即采用了该格式。场景由图扑优秀的 3D 设计师精心建模呈现出精致绝美的效果。FBX 模型模型支持配置材质只需在建模软件中保留好模型的材质通道即可在图扑 HT 中自定义配置材质效果实现更加真实的模型渲染效果。此外相对 OBJ 模型FBX 模型使用更小的文件就能实现更加炫目的效果。 图扑 HT 支持播放 FBX 模型动画所以在飞机 Demo Pro 中制作飞机螺旋桨动画无需编写代码。设计师制作好动画后可使用 plane.getAnimationNames() 获取到动画名称列表使用 plane.playAnimation(animationName, speed, start, loop) 方法播放动画。同时也可以使用 plane.pauseAnimation() 和 plane. resumeAnimation() 控制当前播放动画的启停。为了方便统一控制飞行动画飞机 Demo Pro 中是在飞行动画的 action 中使用 plant.forwardAnimation(1 / 60) 向控制螺旋桨动画每次前偏移 1 / 60 秒实现动画播放效果。 漫游
旧版本 Demo 的飞机漫游功能是一个最大的亮点这也是图扑项目中漫游效果的主要实现方式。在飞机 Demo Pro 中图扑基于旧版本的实现方式增加了更丰富效果。 漫游效果的实现可以分成三个主要步骤
确定漫游路径漫游可以理解为一个物体或者一个人需要从 A 点到 B 点的过程在出发前需要确定应该往哪条路走所以在漫游前需要确定漫游的路径。漫游的路径可以使用不规则图形进行绘制通常情况下漫游路径是使用 ht.Polyline 进行绘制的使用 ht.Polyline 绘制路径的优势是管道的点支持设置不同高度。在 Demo 中用户可以上下拖动蓝色小球控制管道点的高度从而使漫游效果更加丰富确定漫游物品漫游物品可以是场景中的任意节点也可以是场景的相机和中心点此 Demo 中漫游的节点是飞机实现漫游动画动画效果是在一段时间内控制属性变化实现HT 提供了 ht.Default.startAnim(params) 动画函数来实现动画。漫游动画需要递增或者递减的属性是节点的位置和旋转角度这些数据可以使用管道获取。g3d.getLineLength(path) 获取管道长度g3d.getLineOffset(path, lineLength * v) 获取管道百分比的 offset设置飞机的位置 plane.p3(offset.point.x, offset.point.y, offset.point.z)同时设置飞机转向 plane.lookAt([offset.point.x offset.tangent.x, offset.point.y offset.tangent.y, offset.point.z offset.tangent.z], front)。
和物体漫游效果原理一致场景漫游是获取到的管道信息设置在场景的 Eye 和 Center 属性上。在飞机 Demo Pro 中我们还新增了环绕漫游 Around 漫游使用 g3d.flyTo(plane,{distance: distance}) 将场景视角定位到物体上达到环绕飞机跟随的漫游效果。 漫游音效
在飞机 Demo Pro 的漫游过程中可通过点击右下角的音效控制按钮播放飞机的飞行音效使得场景变得更加生动有趣。此外每当飞机到达一个蓝色小球时还会播放到达音效进一步增加了 Demo 的交互性。
为实现上述效果需要在动画运行过程中判断控制球和飞机节点的包围盒是否相交相交时即播放到达音效节点相交判断可先获取节点包围盒 box g3d.getBoundingBox(node)再获取节点的三维包围盒 box3 new ht.Math.Box3(new ht.Math.Vector3(box.min), new ht.Math.Vector3(box.max))最后判断两个节点包围盒是否相交 box3.intersectsBox(other_box3)。 材质切换
由于 OBJ 模型只能配置一个材质或者贴图使用中如果需要切换模型风格一般使用切换直接切换节点的 shape3d 属性实现。相比 OBJ 模型而言FBX 模型能够同时配置多个材质使得模型材质效果更加丰富多彩。飞机 Demo Pro 中的飞机模型使用的是 FBX 模型可以在右上角属性面板切换 BodyColor 控制飞机的材质属性切换 plane.s(‘matDef’,{‘材质名称’:’材质’})。 除了直接切换模型的 matDef 属性还可以直接修改已经注册的材质信息切换风格。例如飞机 Demo Pro 中的指示灯是使用 ht.Default.getMaterial(signalCircleColor) 方法可以获取到已经注册的 signalCircleColor 材质信息直接修改对象的对应的属性值 signalCircleColor.diffuse color。修改材质属性后需要使用 plane.iv() 刷新节点。使用这个方案需要注意其他使用了相同材质的节点在触发刷新后也会修改材质样式。因此直接修改材质信息的方式建议材质在只有一个节点使用或者需要批量修改场景风格时使用。 场景美化
旧版本飞机 Demo 场景只有背景颜色和枯燥乏味的起飞地板。而飞机 Demo Pro 的场景则提供更加丰富的场景如天空球、辉光、头灯、环境光等多样化属性配合代码驱动水面材质 uvOffset 属性变化做 uv 偏移形象还原了水面波光粼粼缓缓流动的动态效果。相比旧版本飞机 Demo Pro 的内景设计更加精美错落有致让用户学习 HT 的过程变得更加生动有趣。 在过去的十年里随着技术的不断发展图扑软件不断推陈出新、不断更新迭代我们的自研产品。从最初只能加载 OBJ 模型、无法呈现材质效果的情况到现在新增了支持 FBX 、GLTF、GLB 模型并且支持材质配置等功能图扑一直在不断创新和突破自我力求为用户提供更加优质的产品和服务。
未来我们将继续为大家提供更多精美的案例和更加强大的技术满足用户的需求和期望。 图扑软件 HT for Web 可实现在 Web 浏览器中创建和展示高性能的交互式 3D 可视化解决方案允许用户创建、编辑、渲染和导出三维模型适用于各种工业互联网领域。HT 使用 HTML5 现代 Web 技术无需安装任何插件或附加软件即可在各种 Web 浏览器中运行。并提供了丰富的功能和工具包括模型加载、材质编辑、动画制作、光照渲染、碰撞检测等可以满足复杂的 3D 可视化、数字孪生应用需求。 您可以至图扑软件官网查看更多案例及效果
图扑软件 - 构建先进 2D 和 3D 可视化所需要的一切
