| 轻松制作三维全景网站《造景师》全面接触 |
|
| 作者：上海 凌风 文章来源：上海 凌风 点击数： 更新时间：2005-6-9 |
■上海 凌风
目前，越来越多的网站（特别是汽车和房地产网站）都有三维全景的内容展示，那么这些三维全景展示是如何制作的呢？下面是我制作三维全景展示网站的亲身经历。
近日手上接了一个项目，要给一个房地产公司做样板房三维展示网站，不知如何下手，偶尔在网上发现了制作三维全景的新锐——《造景师》，顿时感觉这就是我要找的软件，下载了试用版使用后，感觉还不错，但是唯一遗憾的就是试用版功能比较简单，只有图像拼合功能，而且图像精度也比较低。于是我又买了一套正版，给客户做完这个案例后，我才发觉原来做三维全景展示是这么简单呀。目前全景制作软件大多来自洋货，而《造景师》可是地道的国货，我下面就介绍一下这次制作案例，以供大家学习和参考。
一、安装
在安装造景师正式版前确定所需的硬件配置。它的最低配置是：处理器Pentium 100，内存64M；推荐配置：处理器PⅡ266，内存128M以上。 注意该软件支持Windows 9X/Me/2000/NT操作系统。若操作系统为Windows 98 SE（第二版）/Me/2000，直接安装即可；若操作系统为Windows 95/97/98第一版或Windows NT 4.0，运行本软件前需安装微软JAVA虚拟机5.00.3802版（msjavx86.exe）。它的安装包括如下几个步骤：
1.关闭其它正在运行的程序；
2.将加密狗安装到计算机的打印机口或者USB接口上；
3.将造景师光盘插入光盘驱动器，双击运行造景师安装程序，将出现如下界面（如图01）：
4.点击“下一步”继续安装，将出现如下程序界面（如图02）：
5.点击“是”继续安装，点击“否”退出安装，点击“上一步”退回上一界面。若继续安装将出现如下界面（如图03）：
6.请选择合适的安装路径，点击“下一步”继续，出现如下界面（如图04）：
7.点击“下一步”将开始安装造景师软件；点击“结束”后，造景师软件安装成功。
二、使用
运行造景师，出现如下界面（如图05）：
1.打开鱼眼图像
点击菜单上的“文件”→“加载前半球图像”或工具栏上的，在对话框中选择前半球鱼眼图像文件名，载入前半球鱼眼图像；点击菜单上的“文件”→“加载后半球图像”或工具栏上的，在对话框中选择后半球鱼眼图像文件名（如图06），载入后半球鱼眼图像。
载入后效果如下图所示（如图07）：
2.参数调节
调节前半球定位参数工具条上的滚动条，使白色的圈接近边界；同样地，调节后半球定位参数工具条上的滚动条，使白色的圈接近边界（如图08）。
定位后的效果如下图所示（如图09）：
3.全景拼合
设置输出图像尺寸和输出图像的精度。请直接输入想要的输出图像宽度或高度，由于高度和宽度之比为2:1，所以只要设置二者之一即可。有三种可以选择的输出精度，“粗糙”、“标准”和“精细”，建议在调试拼合时采用“粗糙”模式，最终输出时采用“标准”或“精细”模式（如图10）。
点击菜单上的“工具”→“缝合前后半球”或工具条上的缝合按钮，注意查看右下角提示框中的提示信息。缝合后效果如下图（如图11）：
用户可以通过观察左下角矩形区域图像来判断拼合效果的好坏，如果对拼合结果不满意，可以重新调节前、后半球定位参数工具条上的滚动条，再拼合。
4.设置“天”、“地”标志
由于球形全景在经、纬方向上都为360度，这样观察者在全景中的头顶和地面都是可见的，这两个区域便成为球形全景的“天”和“地”。“天”和“地”在全景中有两个作用：
1)由于采用鱼眼镜头进行全景拍摄时，其视角为180度，三脚架会进入鱼眼图像中，拼合后的全景图像会留有三脚架。设置合适大小的“地”可以用于在全景图像中遮盖拍摄三脚架。这样用户就无需用图像处理软件去除全景图像中的三脚架。
2)使用“造景师”的用户通过添加统一“天”和“地”标志，达到公司品牌宣传的效果。
当然，你也可以根据自己的需要只设置“地”，或“天”“地”都不设置。
为了支持透明效果，建议在设置前准备两张GIF格式的图形，图像长宽尺寸为200～400个像素。
设置“天”标志的步骤为：
点击菜单上的“全景”→“增加天花板标志” 或工具条上的，将弹出如下对话框，请选择你制作好的“天”标志图，点击“打开”即可（如图12）。
设置“地”标志的步骤为：
点击菜单上的“全景”→“增加地板标志”或工具条上的，将弹出如下对话框，请选择你制作好的“地”标志图，点击“打开”即可（如图13）。
你可以通过调节滚动条来调节“天”“地”标志大小（如图14）：
设置完“天”“地”标志后，此“天”、“地”标志将作用于后面所有处理的全景图像。如果你想要取消“天”或“地”标志，请点击菜单上的“全景”→“移除天花板标志设置” 或工具条上的（或“移除地板标志设置” 或工具条上的）即可。（如图15）
5.全景图像预览
点击菜单上“工具”→“预览”或工具条上的预览按钮，将在Internet Explorer中播放拼合后的全景图。用鼠标拖动图像或点击工具条按钮，就可以体验360度的全景效果了。
6.保存全景图像
点击菜单上“文件”→“保存全景图片”或工具条上的保存按钮，将弹出如下对话框，输入图形文件及后缀名（*.bmp, *.psd, *.png, *.jpg），将当前拼合的全景图保存为相应的格式图像文件。（如图16）
7.发布全景图像
点击菜单上“文件”→“生产发布网页”或点击工具条上的保存按钮，将弹出如下对话框，请输入网页文件名（如index.htm），将自动完成全景图像的发布。发布完毕后，到相应目录中运行网页文件，就可以进行全景的浏览。你可以将此网页文件连同图像文件和播放程序拷贝到网站服务器上就可以让他人分享你的全景图了。（如图17）
8.全景浏览
浏览时可用鼠标或键盘控制全景图中当前场景移动的方向、速度和放大缩小。
* 场景移动：在全景图中，当前场景可以朝任何一个方向移动，将鼠标放置在当前全景图中，用手将鼠标朝一个方向拖动并按住鼠标左键，全景图将向此方向移动。也可以点击工具条上的方向按钮或使用键盘上的方向键来移动当前场景。
* 当前场景放大缩小：场景的放大缩小就类似摄影时将焦距拉大放小的过程，可以使你纵览全局或在局部详细观察。按住A键或Shift键＋鼠标左键将使场景放大，按住Z键或Ctrl键＋鼠标左键将使场景缩小。同样地，也可以点击工具条上的放大缩小按钮来实现场景的放大缩小。
* 热点的显示和隐藏：点击将显示当前场景中所有的热点，再点击将隐藏当前场景中所有的热点，也可以使用键盘上的空格键来切换热点。
* 状态重置：将当前全景的状态恢复到原始状态。
三、全景播放器的定制
全景播放器的定制分为两种情况，在通常情况下，此两种方式被结合使用。
1.通过Applet参数的传递
通常情况下，Applet写成如下格式：
<applet code=a.class archive=sgip3d.jar width=300 height=200 name=viewer>
<param name="ImageFile" value="pano.jpg">
</applet>
其中：a.class是程序的入口，不能修改。
sgip3d.jar是程序代码，可以修改成相应的路径。
width=300 height=200分别是Applet窗口的宽、高，可以修改。
name=viewer给applet指定的名称，可以修改。
param是applet的参数传递的一种方式。
* name="ImageFile"：需要指定的全景图像的文件名称。此参数必须使用，不能缺少。例如：
<param name="ImageFile" value="pano.jpg">
* name="wait"：程序下载时的等待页的图形名称。例如：
<param name="wait" value="wait.gif">
* name=" bar_x"：程序下载时的进度条参数——X坐标。例子见后。
* name=" bar_y"：程序下载时的进度条参数——Y坐标。例子见后。
* name=" bar_dx"：程序下载时的进度条参数——宽度坐标。例子见后。
* name=" bar_dy"：程序下载时的进度条参数——高度坐标。例子见后。
* name=" bar_color"：程序下载时的进度条参数——颜色。例如：
<param name="bar_x" value="30">
<param name="bar_y" value="170">
<param name="bar_dx" value="240">
<param name="bar_dy" value="15">
<param name="bar_color" value="FFFFFF">
* name="applet_color"：Applet窗口的背景颜色。例如：
<param name="applet_color" value="FFFFFF">
* name="init_rate"：初始状态的水平旋转速度。等于0时为静止的。此值可以为负值。例如：
<param name="init_rate" value="-1">
* name="view_x"：初始状态的水平起始角度，亦即在水平的360°范围内开始播放的位置。例如：
<param name="view_x" value="45">
* name="view"：初始状态的播放窗口视角。此值越大，就有把镜头拉远的效果；此值越小，就有把镜头拉近的效果，即放大。例如：
<param name="view" value="80">
* name="view_min"：初始状态的播放窗口视角最小值。建议此值不要少于20。例如：
<param name="view_min" value="20">
* name="view_max"：初始状态的播放窗口视角最大值。建议此值不要大于100。例如：
<param name="view_max" value="100">
* name="hs?"：设定热点。?为0，1，2，3……表示热点的顺序。格式为：<param name="hs?" value="x={34},y={43},l={pano.htm},t={_self},n={客厅}">
其中：
> x={?}：热点在所浏览图像上的x坐标（此值为在平面图中相对于左上角的坐标）。图像的左上角x坐标为0，向右x增加。
> y={?}：热点在所浏览图像上的y坐标（此值为在平面图中相对于左上角的坐标）。图像的左上角y坐标为0，向下y增加。
> l={?}：l(link)，热点所指向的链接。
> t={?}：t(target)，同一般HTML Tags中的Target一样，其值只能为：_blank，_self，_parent，_top，pagename。t缺省为_self。
> n={?}：n(name)，指定热点的名称。
例如：
<param name="hs0" value="x={348},y={413},l={pano.htm},t={_self},n={客厅}">
<param name="hs1" value="x={666},y={413},l={room.htm},t={_self},n={卧室}">
2.通过在HTML文件中调用Applet内部方法
通常的格式为：
href="#" alt="info" onClick="appletname.a('method');return false;"
其中：（粗体字都可以被替换成相应的内容）
* "#" ：href的值，建议设为"#"即可，因为在本使用方式中，href已经被onClick事件屏蔽。详细使用方法参见“html标记使用手册”。
* "info" ：alt的值，主要体现在鼠标滑过连接时，显示的信息。此参数可以省略。详细使用方法参见“html标记使用手册”。
* appletname ：全景播放器所使用的Applet的名称，该值在Applet参数中被指定。此参数是必须的，不能缺少。
* 'method' ：被调用的Applet方法中的参数。此参数是必须的，不能缺少。主要有以下几个：
·'up'：使观察视角自动向上移动。
·'down'：使观察视角自动向下移动。
·'left'：使观察视角自动向左移动。
·'right'：使观察视角自动向右移动。
·'zoomin'：使全景图像放大（不连续放大，每调用一次，放大一次）。
·'zoomout'：使全景图像缩小（不连续缩小，每调用一次，缩小一次）。
·'zoomining'：使全景图像放大（连续放大）。
·'zoomouting'：使全景图像缩小（连续缩小）。
·'on'：显示图像热点。
·'off'：隐藏图像热点。
·'reset'：使所有参数恢复到初始状态。
举例如下：
<applet code=a.class archive=sgip3d.jar width=300 height=200 name=viewer>
<param name="ImageFile" value="pano.jpg">
</applet>
<img src="bar.gif" usemap="#Map">
<map name="Map">
<area shape="rect" coords="3,3,33,33" href="up" alt="上" onClick="viewer.a('up');return false;">
<area shape="rect" coords="36,3,66,33" href="down" alt="下" onClick="viewer.a('down');return false;">
<area shape="rect" coords="69,3,99,33" href="left" alt="左" onClick="viewer.a('left');return false;">
<area shape="rect" coords="102,3,132,33" href="right" alt="右" onClick="viewer.a('right');return false;">
<area shape="rect" coords="135,3,165,33" href="zoomin" alt="放大" onClick="viewer.a('zoomin');return false;">
<area shape="rect" coords="168,3,198,33" href="zoomout" alt="缩小" onClick="viewer.a('zoomout');return false;">
<area shape="rect" coords="201,3,231,33" href="on" alt="显示热点" onClick="viewer.a('on');return false;">
<area shape="rect" coords="234,3,264,33" href="off" alt="隐藏热点" onClick="viewer.a('off');return false;">
<area shape="rect" coords="267,3,297,33" href="reset" alt="复位" onClick="viewer.a('reset');return false;">
</map>
只要你了解了这些基本的知识和操作技巧，你就可以随心所欲地创作出更好的三维全景效果图了。
|
| 文章录入：Haihua 责任编辑：Haihua |
|
上一篇文章： 全景软件名称及下载地址
下一篇文章： 没有了 |
| 【字体：小 大】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】 |
用户登录 
新用户注册 
网友评论：（只显示最新10条。评论内容只代表网友观点，与本站立场无关！）
