八倍Flash3D虚拟现实漫游者 是一个制作3D虚拟现实展示的软件,这是个所见即所得的工具软件。是为了让3D模型文件可以通过此软件设计打包后,快速的发布到网站上。
功能 | 描述 |
2D插入 |
3D导入 |
||||||||||
图片 | 文字 | 动画 | 视频 | 声音 | 模型 | 子模型 | 平面 | 粒子 | 热点 | 标签 | 动画 | ||
名称 | 系统保留 | ||||||||||||
标记 | 标识字符,可修改 | ||||||||||||
对齐 | 对齐到哪个边 | ||||||||||||
左边距 | 离左侧的距离 | ||||||||||||
右边距 | 离右侧的距离 | ||||||||||||
上边距 | 离上侧的距离 | ||||||||||||
下边距 | 离下侧的距离 | ||||||||||||
背景 | 平面的底图 | ||||||||||||
文字 | 2D内容上显现文字 | ||||||||||||
文字方向 | 文字排列方向 | ||||||||||||
描述 | 点击后显示的详细内容,需要在动作类型中选择“详细”才会出现 | ||||||||||||
小提示 | 指鼠标放上后显示的提示信息 | ||||||||||||
透明度 | 指定内容的透明度1为不透明,0为透明 | ||||||||||||
动作类型 | 鼠标点击后的操作类型 | ||||||||||||
动作类型-详细 | 鼠标点击后打开的是详细界面,详细界面展示的是文字、描述、动作值内的图片文件、交替背景、详细介绍声音。 | ||||||||||||
动作类型-网址 | 鼠标点击后打开的是网页,网址来源动作值内的地址,需http://开头。 | ||||||||||||
动作类型-网址 | 鼠标点击后打开的是网页,网址来源动作值内的地址,需http://开头。时候在新窗口中打开,可在场景的链接打开方式中设置 | ||||||||||||
动作类型-场景 | 暂不可用 | ||||||||||||
动作类型-2D综合 | 2D对象点击的综合控制,通过在动作值中选择对应操作进行控制。 | ||||||||||||
动作类型-2D综合 | 2D对象点击的综合控制,通过在动作值中选择对应操作进行控制,以及交替背景。 | ||||||||||||
动作类型-动作 | 对象点击的执行对各种控制,控制按步骤顺序执行,移动采用缓动。 部分操作为一次性处理 相机操作参数正数为加,负数为减(右手定律) 主要动作包括: 相机【移动,移动到,3D自动旋转,相机前移,相机左移,相机上移,相机横转,相机竖转】 3D场景【显示,隐藏】 2D对象【移动,移动到,显示,隐藏,2D透明度,换图】 3D对象【移动,移动到,3D自动旋转,显示,隐藏,换图】 3D动画【转到动画标记】 |
||||||||||||
动作值 | 根据不同的动作类型,设置对应的值 | ||||||||||||
动作值2 | 根据不同的动作类型,设置对应的值,设置了动作值2和动作值后,动作值会交替执行 | ||||||||||||
初始动作 | 对象第一次加载时,执行一次指定动作,3D场景的初始化可以设置初始走动特效 | ||||||||||||
交替背景 | 平面图片的背景,只在动作类型-2D综合被选中后才会呈现 | ||||||||||||
详细介绍声音 | 打开详细信息时,播放的声音,只在动作类型-2D综合被选中后才会呈现 | ||||||||||||
鼠标感应 | 鼠标是否可以选中,点中, 在设计模式下也有控制效果 | ||||||||||||
感应动画 | 鼠标是否可以悬停在对象上时,呈现的动画,2D对象有“投影”,“发光”,“换图片”,3D对象有“透明框”,“线条纹” | ||||||||||||
感应颜色 | 2D对象的鼠标感应时 呈现的颜色,3D对象的子模型动态选中效果颜色 | ||||||||||||
鼠标感应图 | 对象的鼠标感应为换图片时呈现的悬停图片 | ||||||||||||
显示 | 对象是否显示 | ||||||||||||
锁定 | 对象是否不允许调整 | ||||||||||||
自动播放 | 对象是否开始后就自动播放 | ||||||||||||
自动播放 | 对象是否开始后就自动播放 | ||||||||||||
循环播放 | 对象播放结束后是否自动重播 | ||||||||||||
声音 | 声音文件 | ||||||||||||
播放时图片 | 声音在播放时显示的图片 | ||||||||||||
停止时图片 | 声音在停止播放时显示的图片 | ||||||||||||
图片1 | 热点初始时显示的图片 | ||||||||||||
图片2 | 热点选中时显示的图片 | ||||||||||||
漫反射图片 | 整个子模型的漫反射通道UV贴图,也可以选择颜色,首选为图片 | ||||||||||||
透明通道图片 | 整个子模型的透明通道UV贴图,也可以选择颜色,首选为图片 | ||||||||||||
凹凸通道图片 | 整个子模型的凹凸通道UV贴图,呈现凹凸效果,也可以选择颜色,首选为图片 | ||||||||||||
高光通道图片 | 整个子模型的高光通道UV贴图,呈现凹凸效果,也可以选择颜色,首选为图片 | ||||||||||||
光泽度图片 | 整个子模型的光泽度通道UV贴图,也可以选择颜色,首选为图片 | ||||||||||||
环境材质图片 | 整个子模型的环境材质图片,为6张图片 | ||||||||||||
反射材质图片 | 整个子模型的反射材质图片,可以为颜色 | ||||||||||||
灯光材质图片 | 整个子模型的灯光材质图片,可以为颜色 | ||||||||||||
动态选中效果 | 鼠标移入移出时的动态效果 | ||||||||||||
每秒帧数 | 对DAE动画,每秒播放多少帧,默认30帧/秒 | ||||||||||||
动画标记分割 | 对DAE动画,动作标记交替之间的延时时间/td> | ||||||||||||
动画标记分割 | 将动画分割为不同的各个子部分,以便于可以在动作中分别控制,开始帧从0开始 | ||||||||||||
原点旋转 | 鼠标模式下,相机位置相对于原点的Z轴旋转(左右)位置弧度 | ||||||||||||
原点旋转 | 鼠标模式下,相机位置相对于原点的X轴(上下)旋转弧度 | ||||||||||||
原点距离 | 鼠标模式下,相机位置相对于原点的距离 | ||||||||||||
原点距离 | 鼠标模式下,相机位置相对于原点的距离 | ||||||||||||
3D调整距离值 | 操作参数。针对3D对象出现的调整控制器中,拖动一个像素对应的3D距离比率数值 | ||||||||||||
3D调整旋转值 | 操作参数。针对3D对象出现的调整控制器中,拖动一个像素对应的3D旋转比率数值 | ||||||||||||
3D调整放大值 | 操作参数。针对3D对象出现的调整控制器中,拖动一个像素对应的3D缩放比率数值 | ||||||||||||
3D调整放大值 | 操作参数。针对3D对象出现的调整控制器中,拖动一个像素对应的3D缩放比率数值 | ||||||||||||
最近显示距离 | 3D中,最近可展示的距离,物体到相机的距离 | ||||||||||||
最远显示距离 | 3D中,3D中最远可展示的距离,物体到相机的距离 | ||||||||||||
默认控制模式 | 3D中,默认控制模式,鼠标模式、键盘模式 | ||||||||||||
默认控制模式 | 3D中,默认控制模式,鼠标模式、键盘模式 | ||||||||||||
鼠标初始位置 | 鼠标模式下的相机初始位置,可用设为默认位置按钮 | ||||||||||||
鼠标最大角度 | 鼠标模式下(X轴)可上下转动的最大角度 | ||||||||||||
鼠标最小角度 | 鼠标模式下(X轴)可上下转动的最小角度 | ||||||||||||
鼠标最大旋转 | 鼠标模式下(Z轴)可左右转动的最大角度 | ||||||||||||
鼠标最小旋转 | 鼠标模式下(Z轴)可左右转动的最小角度 | ||||||||||||
鼠标最大距离 | 鼠标模式下可拉远的最大距离 | ||||||||||||
鼠标最小距离 | 鼠标模式下可拉近的最小距离 | ||||||||||||
鼠标控制率 | 鼠标模式下移动一个像素转换为距离的比率,操控明显程度 | ||||||||||||
滚轴控制启用 | 是否可以鼠标滚轴控制 | ||||||||||||
滚轴控制率 | 鼠标滚轴控制操控明显程度 | ||||||||||||
键盘最小X | 键盘模式下能走动到的最小X位置 | ||||||||||||
键盘控制率 | 键盘模式下按一次按钮转换为距离的比率,操控明显程度 | ||||||||||||
键盘左右旋转 | 键盘模式下左右键是否为旋转,true为是,flase为否 | ||||||||||||
键盘左右旋转率 | 键盘模式下左右键为旋转时的操控明显比率 | ||||||||||||
材质类型 | 贴图的类型选择,只对3D模型有效 材质详解 | ||||||||||||
排除灯光 | 去除灯光效果,只对3D模型有效 灯光详解 |
贴图的类型选择,只对3D模型有效
其中环境图片为6张一样大小的图片。可以通过相机在前后左右上下的各90度的图片来,模拟的一个立方体环境。
包括:
- 自适应(自动选择类型)
- 图片无光: 不计算灯光的影响,模型的显示 只依赖与漫反射图片,透明度依赖于透明通道图片
- 图片有光: 通过凹凸程度,计算灯光的影响,模型的显示 依赖与漫反射图片,凹凸呈现依赖于凹凸通道,
- 顶点有光: 通过顶点位置,计算灯光的影响,模型的显示 依赖与漫反射图片
- 环境有光: 通过凹凸程度,计算灯光的影响,并将环境反射到模型上,如车壳,玻璃等使用
材质与图片的关系,如下表
漫反射 透明通道图片 凹凸通道图片 高光通道图片 光泽度图片 环境材质图片 反射材质图片 灯光材质图片 图片无光 图片有光 顶点有光 环境有光
- 环境光:在3D场景的属性中可以设置环境光的颜色
- 泛光灯: 向四周发光的光源
- 目标聚光灯: 一束锥形的光源,默认盯住目标(0,0,0)
- 目标平行光: 平行的光,类似太阳光,默认盯住目标(0,0,0)
灯光的参数效果浏览示例
灯光参数对照表,如下表
泛光灯 目标聚光灯 目标平行光 颜色,灯光颜色 目标点位,灯光盯向哪个点位(x,y,z)英文字符逗号分隔 衰减开始距离,灯光从多少距离开始衰减 衰减结束距离,灯光衰减到多少距离结束 开始衰减弧度,针对目标聚光灯,光线从该锥角开始衰减,锥角为弧度 结束锥角弧度,针对目标聚光灯,光线至该锥角完全衰减,完全无光,锥角为弧度 光照宽度,目标平行光的宽度范围 光照高度,目标平行光的高度范围 阴影最近边界, 阴影最远边界, 阴影分块(2的幂次),必须为2的幂次方的数值,越大越细致 阴影边缘光滑,阴影边缘光滑度0~1 阴影应用对象,那些对象需要呈现阴影
鼠标按下某个功能按钮后,进行拖动
- 在资源列表中可以删除一个节点
- 在2D对象中可以进行排序
- 在属性列表的文件选择框中可以删除
- 在动作编辑器的“3D移动到”的值文本框中可以获得当前相机位置
这个例子是加载3D模型文件,选择角度展示。
准备工作:
将制作好的3D模型,模型需要是用UV贴图(jpg,png 图片),导出成一个(3ds,dea,a3d)格式,将模型文件与图片文件放置在一个文件夹。
开始制作:
- 打开Flash3D虚拟现实漫游者
- 选择插入 -> 3D导入 ->导入模型...
- 选择已经导出的模型文件
- 通过鼠标拖动,调整位置相机位置,到合适的位置,点击下方“设为默认位置”按钮
- 点击 发布菜单 -> 导出Flash
- 您的第一个作品就完成了,小窍门: 展示商品模型,应该居中在原点位置,这样基本上就不用调整就可直接发布
- 在右侧资源列表中,找到并选中 需要处理的模型。
- 在下侧的属性列表中,找到X坐标,Y坐标等,进行修改
- 在出现的对象控制器上,直接拖动修改(鼠标按下后拖动)。
- 在右侧资源列表中,找到并选中 需要处理的模型。
- 在下侧的属性列表中,找到鼠标感应,设置为false; 完全不响应鼠标事件,同时也会加快运行。
- 此时,此对象在设计、预览、发布展示中都不会响应鼠标的操作
- 在右侧资源列表中,找到并选中 需要处理的模型。
- 在下侧的属性列表中,找到标记一行,修改信息
- 以后可以通过搜索,快速查找
- 在右侧资源列表中,可以使用右键。
- 删除:删除选定对象
- 复制:复制选中的对象,目前只能复制子模型,子模型指模型文件中的子对象
- 子项排序:对自己的子节点进行排序
此例子主要实现的功能:点击图片按钮可以实现对象更换图片,参考商品项目例子。
具体制作步骤如下。
此例子主要实现的功能:默认自动浏览,对展厅中的图片进行介绍,替换图片等。
此例子可在 菜单 文件->示例项目->展厅项目 打开。
具体制作步骤如下。
- 打开展厅模型,在软件安装目录下的exp\exp001\FLHall_images\Hall.a3d
- 点击键盘模式(键盘模式下的操作, WASD或者方向键操作前后左右,E/C键调高/降低相机),选择一个合适位置,点击下部的“设为默认位置”,那么在打开时首先定位到此处。
- 在右侧的资源列表中选择3D场景, 然后在下部的属性列表中 找到“默认控制模式” 选择键盘 , 然后在属性列表中 找到“鼠标控制显示”,点击直到变成false
- 点击下方的“编辑中,转预览”按钮,预览效果,随便看看
- 点击下方的“预览中,转编辑”按钮,进入编辑模式
- 点击模型中的一个图片(例如选择的是梅花图),然后在属性列表中查找下列各项
- 找到“文字”,随便输入内容,
- 找到“描述”,随便输入内容,
- 找到“动作类型”,选择“详细”。
- 找到“动作值”,选择“该图片的大图”。
- 点击下方的“编辑中,转预览”按钮,预览效果,点击刚才设置描述信息的图片,此时弹出一个详细页面。
- 点击下方的“预览中,转编辑”按钮,进入编辑模式 。
- 接下来我们要修改一个对象的图片:
- 点击模型中的一个图片,然后在资源列表中查找选定项(选定项是红色框选中的)
- 展开它的子项目,选中子项,然后在属性列表中查找下列各项
- 修改贴图的值,选择一个图片。 看到图片被修改了没有?
- 完全清空,请点击右键 选择“清 除”
- 接下来我们要实现初始时候相机自动浏览功能
- 保存相机走动的几个点位。
- 点击右下角键盘模式按钮,相机回到初始位置,
- 点击 下方“保存相机位置” 按钮,保存一个相机位置,
- 顺序游动一圈,在各个拐角处点击 下方“保存相机位置” 按钮,这样我们保存了几个相机位置。
- 然后在资源列表中 选择3D场景,在下部的属性列表查找,如下
- “初始动作”,点击右侧的 ... 进入设置,这是个动作脚本设置
- 依次选择 “相机” + “移动到” +“相机位置1”+“2”+“完成后下一步”
- 添加一行(上方的加号),再 选择 “相机” + “移动到” +“相机位置2”+“2”+“完成后下一步”
- 依次顺序把刚才走动的位置 都设置完成!
- 最后增加一行,“相机” +“循环到第几行”+“1”+后面任意值
- 点击保存图标,进行保存。
- 点击下方的“编辑中,转预览”按钮,预览效果,查看效果
- 案例设置完成,点击菜单 发布->导出Flash.
- 真正发布到网站上时,需要导出时生成的文件 和 他的图片文件夹一起发布
具体制作步骤如下。
- 打开灯光项目,在文件菜单->示例项目->灯光项目,或者 导入模型 在软件安装目录下的exp\exp003\Trolley.3DS
- 选中小车中间黄色的区域对象名(Mesh13),给他设置为灯光材质
- 在资源列表中,点开Mesh13,(当一个模型有多个面片的不同贴图是,底下会显示多个图片,这些可以独立设置,而总体设置的话,可以在Mesh13上设置)
- 属性列表中 点击 漫反射图片,弹出属性框 选择一个颜色,点击保存。 目前我们可以选择颜色或者图片,让两周都有是,优先考虑图片
- 属性列表中 修改 材质类型 为 “图片有光”
- 这就是一个灯光的简单示例
- 接下来你可以设置各种图片,或者颜色
- ...
- 换为平行光
- 删除泛光灯,选中泛光灯,在对象控制器上 点击 “X”删除按钮
- 插入-> 3D导入->导入灯光->平行光 看看效果
- 调整灯光的距离,选中灯光(缩小整个界面或者在资源列表中选择平行光)
- 调整属性列表中灯光的x , y , z 坐标
- 调整灯光方向 ,调整 属性列表中目标点位:值应该是x,y,z格式,以英文逗号分隔
具体制作步骤如下。
- 打开汽车项目,在文件菜单->示例项目->汽车项目,或者 导入模型 在软件安装目录下的exp\exp004\ferrari.3DS
- 选中车壳(body)为他设置环境材质,材质类型“环境有光”,查看属性列表设置对应的值
- -> 漫反射图片 设置颜色0xCC3300 (可以在最终颜色中输入)
- -> 反射材质图片 设置颜色0x777777
- -> 凹凸通道图片 设置颜色0x7F7FFF
- -> 环境材质图片 设置6张图片,请选择在软件安装目录下的exp\exp004\left.jpg,right.jpg...
- -> 材质类型 选择为“环境有光”
- 是不是看到一个车壳的效果了。
- ...
- 接下来我们就设置下玻璃,资源列表选择glass
- -> 漫反射图片 设置颜色0x99000000 (透明度为:153)
- -> 凹凸通道图片 设置颜色0x7F7FFF
- -> 环境材质图片 设置6张图片,请选择在软件安装目录下的exp\exp004\left.jpg,right.jpg...
- -> 材质类型 选择为“环境有光”
- ...
- 接下来我们就设置下轮胎,资源列表选择wheelFL001
- -> 漫反射图片 设置颜色0xeeeeee
- -> 凹凸通道图片 设置颜色0x7F7FFF
- -> 环境材质图片 设置6张图片,请选择在软件安装目录下的exp\exp004\left.jpg,right.jpg...
- -> 反射材质图片 设置颜色0x999999
- -> 材质类型 选择为“环境有光”
- wheelFL002,wheelFL003,wheelFL004 同样设置
- ...
- 接下来我们就设置下地面,资源列表选择ground
- -> 漫反射图片 请选择在软件安装目录下的exp\exp004\FloorMap.jpg
- -> 材质类型 选择为“图片有光”
- ...
- 至此,大致的情况我们已经制作完成。
- 接下来 我们设置一下阴影
- 资源列表选中灯光,Omni001, 在属性列表中选择阴影应用对象,点开
- 在显示的一串列表中,选择 body 和 glass
- 看看效果,阴影有点毛边,
- 调整 阴影分块 设置512
- 调整 阴影边缘光滑 设置0.4
- 你还可以将其他对象加入阴影中
- 到此一个灯光和 阴影的案例结束
- 如果这样的变换颜色不过瘾,请选择 插入-> 2D导入->导入动画 选择软件安装目录下的ctrl\ChangeColorCtrl.swf
- 然后点击 “编辑中,转预览”,看看控件形式变换颜色
文件为SWF文件,此类文件被加入后(插入 -> 2D插入 ->2D动画...)就可以调用。(软件安装目录下的ctrl\提供了2个文件,一个是MoverCtrl.swf可以进行鼠标点击移动)
调用规则:首先定义变量 var ByebyerObject:Object; 在Fla (主文档类 public var ByebyerObject:Object; ,或者第一帧中 var ByebyerObject:Object; ) 或者Flex文件的应用AS中public var ByebyerObject:Object;
使用时调用:ByebyerObject.DoInterface(...)获得对象。
使用举例//按钮点击后 相机 Z轴旋转弧度0.1; 按钮就定义在您的SWF中的,需要使用的地方 btn.addEventListener(MouseEvent.CLICK,test); function test(e:MouseEvent) { ByebyerObject.DoInterface("camera").rotationZ+=0.2; }
目前可调用的参数:
- camera 调用函数:ByebyerObject.DoInterface("camera") 返回相机对象
可用函数如下:
ByebyerObject.DoInterface("camera").rotationZ+=0.1; 相机横向转动
ByebyerObject.DoInterface("camera").rotationX-=0.1; 相机竖向转动
- mover 调用函数:ByebyerObject.DoInterface("mover") 返回相机移动控制器
可用函数如下:
ByebyerObject.DoInterface("mover").MoveForwardDirect(0.5); 相机前移动0.5
ByebyerObject.DoInterface("mover").MoveLeftDirect(-3); 相机左移动-3 等于右移3
ByebyerObject.DoInterface("mover").MoveUpDirect(4); 相机上移4
- alert 调用函数:ByebyerObject.DoInterface("alert") 返回提示对象
可用函数如下:
ByebyerObject.DoInterface("alert").show("hello");提示信息- object 调用函数:ByebyerObject.DoInterface("object_108") 返回编号为108的对象
可用函数如下:
ByebyerObject.DoInterface("object_108").visible=false; 108的对象隐藏
ByebyerObject.DoInterface("object_108").x=100; 108的对象x位置改变
- style 调用函数:ByebyerObject.DoInterface("style") 返回style的对象br> 可用函数如下:
ByebyerObject.DoInterface("Style").SetStyleByName("body","diffuseMap",Color1.selectedColor);
需要确保对象名的唯一性(参数为 对象名,漫反射,颜色值);功能为修改漫反射图片,值可以为颜色值或者图片的网址。
预制的函数名为:DoExtInterface;(使用八倍的 load.swf 加载时 请用 DoExtInterfaceLoad) 参数格式为一个字符串 字符串依次为“类型|方法|标志|参数("~")” |竖线分割,其中参数为~分割,其中标志为1或0,0为属性,1为函数
以HTML网页为例子:
<script type=text/javascript>
function thisMovie(movieName)
{
if (navigator.appName.indexOf("Microsoft") != -1)
{
return window[movieName];
}else{
return document[movieName];
}
}
function SetCameraRotationZ()
{
var s="camera|rotationX|0|1.2";//将相机横向转动到一个位置
thisMovie("load").DoExtInterfaceLoad(s);//假定我们定义的swf的ID="load"
//使用八倍的 load.swf 加载时 请用 DoExtInterfaceLoad,
//直接使用内容 swf 请用 DoExtInterface ,thisMovie("load").DoExtInterface(s); //s="mover|MoveForwardDirect|1|2";//将相机横向前移2
//thisMovie("load").DoExtInterfaceLoad(s);//假定我们定义的swf的ID="load"
}
</script>
自定义详细描述 是指,制作用户可以自己制作详细描述的展示格式。
1、此功能需要您制作一个展示详细描述的SWF文件。
2、此SWF需要包含的一个可供调用的函数,函数明名格式 如下:
public function CallFromByebyer(tag:String,_params:Object=null)
{
if(tag=="detail")
{
//您需要呈现的代码
// _params包含 需要展示对象的id ,label,name,title,desc,param1,param2; myID 为本身的swf文件在作品中ID
//引用值举例 text1.text=_params.name;//属性中显示的名称,如为3D对象,那么就是3D对象的模型名称。
//text1.htmlText=_params.desc;//属性中设置的描述
//param1 为参数1,param2为参数2
this.visible=true;
};
}
txt2.text=allParams;
return true;
}
3、将生成的SWF加入项目中,(插入->2D动画)
4、将场景的属性中 的 自定义详细描述 选择为插入的此动画。此时所有点击需要进行详细展示的内容,都会转到您制作的SWF文件来进行展示。
5、预览看效果吧 (如需示例源码,请向客服咨询)
目前支持的格式:3ds,可以通过3dmax 等导出,子模型中文名字会乱码,不支持超过8个字符的文件名,中文文件名会乱码。
目前支持的格式:a3d,需要下载导出插件(http://www.byebyer.com/360/b3d.aspx)。
目前支持的格式:dae,dae格式中文名字不支持,由于各3D软件厂商导出的格式略有不同,不能完全支持, 导出OpenCOLLADA+A3D 的DAE相对比较准确。(导出插件包含在同上的下载包中)
3ds格式文件,不支持中文名称的对象名,对象名不超过8位。图片名称也不支持中文名。
将现在选中的对象进行隐藏,(在属性窗口中将显示设置为false),或者在资源列表中选择。
用文本文件打开DAE文件,然后修改一下其中的图片路径。
改为A3D或者DAE 试试
平面的图片和背景 空些距离, 同时可以缩小一些场景,场景按照通用(international) 在-1000到+1000之间为适宜。
减少一次导出的图片数量。