CULT3D系列教程第五辑：Cult3D中的全景实现

 在本系列的教程中使用的全部全景图片是由Lightscape生成。

  本系列教程包括：

  １．Cult3D中的全景实现 网管u家u.bitscn@com

  ２．JavaScript在HTML引发事件 网管u家u.bitsCN.com

  ３．由Cult3D引发HTML中的事件。 网管下载dl.bitscn.com

  ４．结束语

网管u家u.bitscn@com

  Cult3D中的全景实现

中国网管论坛bbs.bitsCN.com

  这个示例将介绍如何利用Cult3D来建立一个多节点的全景展示。利用这种全景展示可以快速建立在一个环境中行走的模拟感觉。

  根据投影方式的不同。全景图可以分几个类别：球形，圆柱形，立方体。在这一辑教程中我们应用的是球形全景图。

网管联盟bitsCN@com

  教程中使用的全景图是应用Lightscape的内建全景输出器输出的，这属于是一种CG。教程中的图片也可以利用照片或拼合全景图片代替。

网管网www_bitscn_com

  理论上这一过程非常简单。我们将全景图投影到一个表面翻转的球体上，并将一个摄像机放置于球体中。

网管u家bitscn.net

  教程要求大家对3DS和Cult3D的设计工具的基本功能有了一定的了解。 网管u家u.bitscn@com

  图形设置

网管网www_bitscn_com

  Cult3D模型的最终图形效果将极大的取决于全景图的图象质量，因此我们将尽可能使用高质量的全景图。

  有了这个想法，我们就可以渲染一幅全景图大小设为2048X1024，尽可能使用Cult3D能处理的高的设置，同时应保持比例正确。如图1 网管有家bitscn.net

  模型设置 网管联盟bitsCN_com

  这一模型的设置很简单，在3DS中步骤如下：

网管u家u.bitscn@com

  １．建立一个基本的圆球，设置片段为48,

网管有家bitscn.net

  ２．建立一个基本的自由摄象机，

网管下载dl.bitscn.com

  ３．对球体应用一个常规编辑，选中“Flip Normals”,

中国网管联盟bitsCN.com

  ４．新建一个材质，把预备的全景图设置为漫射贴图。将材质应用于球体，如图2。 网管下载dl.bitscn.com

  球体的片段应设置为相对高一些（如48）以保证球形贴图不会出现视觉错误。任何过低的设置都会影响图象效果。 网管u家u.bitscn@com

  输出设置

  在3DS输出时应保证以下设置：

  1．将全景图的着色方式设置为“Constant”并确认选择了“双线性滤镜”，

  2．将全景图的压缩方式选择“Wavelet微波”并设为80%，这高出了默认值，但对于保证全景图的质量这是很必要的。

  3．对球体应用网格预优化，这将会最小化多的球体余片段对最终文件大小的影响。

网管u家www.bitscn.net

  设计导航 网管网www_bitscn_com

  设计全景图的导航非常简单，我们需要对旋转应用一点改动。

网管网www_bitscn_com

  启动设计软件，按以下步骤进行： 网管联盟bitsCN@com

  1．从文件下拉菜单中选择添加Cult3D文件，定位并打开“nloft.c3d”文件，之后会出现一个对话框，问是否载入文件的背景图，选中“是”。 网管u家bitscn.net

  2．在事件图视窗中的事件类型中选择“启动世界”将其拖到事件图中央。如图3 网管u家bitscn.net

  3．在动作窗口中的物体的动作集中选择“旋转”并将其拖到时间图中的启动世界上，另外为启动世界再添加一个“旋转”动作。

网管朋友网www_bitscn_net

  4．在场景图中，选中“Camera01”拖到事件图中的第一个旋转动作上，再次选中“Camera01”拖到事件图中的第二个旋转动作上。那么结构就应该是，如图4。

  5．打开第一个旋转动作的详细窗口，应用以下设置： 网管u家www.bitscn.net

  坐标系统：本地坐标 网管bitscn_com

  左键：Z轴旋转

网管u家u.bitsCN.com

  右键：无

中国网管联盟bitsCN.com

  中键：无 网管有家www.bitscn.net

  摩擦持续：2000ms 网管联盟bitsCN_com

  其他设置如图5 网管下载dl.bitscn.com

  6．打开第二个旋转动作的详细窗口，应用以下设置：

  坐标系统：摄象机画面

  左键：X轴旋转 网管联盟bitsCN_com

  右键：无

网管网www.bitscn.com

  中键：无

  保持旋转：关闭 网管联盟bitsCN@com

  其他设置,如图6.

网管网www.bitscn.com

  在预览窗口中点击播放，就可以浏览环形场景了。 中国网管论坛bbs.bitsCN.com

  将项目保存为Pano-01.c3p.

  设置多点展示 网管bitscn_com

  如果将多个全景展示连接到一起，就可以建立一个虚拟的世界。要完成这样一个虚拟世界，我们需从设计的模型中依次渲染了六个全景图，并依次命名。图7

  下一步就是设置我们全景图之间的连接。这需要使用到Cult3D中的热区和载入CO事件。 网管u家u.bitscn@com

  1．在场景图中的贴图集中选中贴图。单击右键，选择细节选项，这将打开贴图的细节窗口。如图8 网管朋友网www_bitscn_net

  2．在细节窗口中选择“符合窗口”和“显示热区”，这样整个贴图可见。如图9

网管有家www.bitscn.net

  3． 在热区菜单中选择“添加”，一个小的矩形框就会出现在贴图的左上角。如图10 网管有家bitscn.net

  4．调节热区大小，使其符合贴图中央大厅区域的大小。如图11 网管u家u.bitsCN.com

  5．关闭贴图细节窗口，一个新的热区就会出现在场景图中全景贴图的子级中。 网管u家www.bitscn.net

  6．在事件图中建立一个新的鼠标右键单击事件。

  7．在动作窗口中选择连接集中的载入CO，并将其拖到事件土中央的新建鼠标右键单击事件上。

  8．从场景图的贴图集中将新建的热区拖到事件图中的新建鼠标右键单击事件上。此时的结构应该如图12所示。

中国网管论坛bbs.bitsCN.com

  9．打开载入co的细节窗口，在输入框中输入“Pano-02.co”

网管bitscn_com

  这样当用户点击全景贴图的中央时，就会载入下一个Cult3D全景。在测试之前我们需要将这个文件发布为.co文件，同时Pano-02.co也应建立。 网管有家bitscn.net

  10在文件下拉菜单中选择“存储Inernet文件”，将文件命名为Pano-01.co 中国网管论坛bbs.bitsCN.com

  11．在保存设置对话框中，点击几何物体标志。按下“全选”按钮并从压缩类型中选择“网格水平2”。点击应用按钮（Assign）.

中国网管论坛bbs.bitsCN.com

  12．将压缩设置为“低”。网格水平2的压缩是通过降低场景图中坐标数据的精度来减小文件大小。选用其他任何较高的设置都会使贴图产生扭曲。

中国网管联盟bitsCN.com

  13．点击保存按钮，同时注意保存项目文件。 网管论坛bbs_bitsCN_com

  现在我们需要创建Pano-02.co物体，步骤如下： 网管u家bitscn.net

  1．新建一个项目文件。 网管有家bitscn.net

  2．载入nloft-02.c3d文件。

  3．建立同上述相同的具有双旋转设置的导航。

网管下载dl.bitscn.com

  4．将文件保存为Pano-02.co。 网管联盟bitsCN_com

  现在如果你在浏览器中打开Pano-01.co，你就可以360度浏览。试着点击贴图中的大厅处就可以载入Pano-02.co了。

网管联盟bitsCN_com

  同时以同样的方法建立Pano-03.co到Pano-06.co文件。使用热区来连接这些不同的全景图。次序设置如图13。 网管下载dl.bitscn.com

  工具提示

  最后的工作是给热区添加工具提示，以使用户知道该区域可点击。 中国网管论坛bbs.bitsCN.com

  工具提示添加步骤： 网管bitscn_com

  1．打开Pano-01.c3p

网管有家www.bitscn.net

  2．右键单击场景图中的工具提示集，选择“新建”，这样就可以建立一个新的工具提示。 网管联盟bitsCN_com

  3．双击新建的工具提示，打开其细节窗口。

  4．在文本输入框中输入“右键单击进入厨房”。其他提示根据自己需要设置。 网管朋友网www_bitscn_net

  5．从场景图中的工具提示集中，将热区图标拖到工具提示集的“关联物体”窗口中。如图14。

网管网www.bitscn.com

  6．关闭工具提示细节窗口，保存文件。

  现在完成了 Cult3D中的全景制作，重复以上的工具提示制作步骤为其他全景制作工具提示。