提供Verge3D教程和Web3D开发技术服务

【verge3d】拼图

拼图(Puzzles)

Verge3D的拼图编辑器是开发任何复杂的智能Web应用程序的强大工具。通过拼图,您可以轻松地将行为场景添加到3D内容中,使其具有交互性并响应用户操作。这个神奇的工具既可用于快速原型制作,也可用于生产。对于3D艺术家来说,这个宝贵的工具克服了Web开发的技术障碍,从而可以将他们的创造力应用于交互式3D Web领域。

新手指引中介绍了Puzzles编辑器的基本操作。

事件(Events)

此类别的拼图处理用户生成的事件:鼠标点击/触摸,悬停和拖动。

“when clicked”

等待用户点击指定的3D对象 – 然后在“do”插槽中运行拼图,或者如果用户点击其他内容则在“miss:do”插槽中运行拼图。

“picked object”

返回用户单击的对象。用于“when clicked”拼图。

“when hovered”

等待用户将鼠标悬停在指定的3D对象上 – 然后在“over / out:do”插槽中运行拼图。

“hovered object”

返回用户悬停的对象。用于“when hovered”拼图。

“when dragged”

等待用户使用鼠标拖动指定的3D对象 – 然后生成移动数据,以便在”drag move”,”drag rotate”和”drag scale”拼图中使用。还可以捕获开始和结束拖动的事件。

“drag move”

根据”when dragged over” 拼图生成的拖动移动数据移动指定的3D对象。使用下拉菜单限制移动到特定轴或平面。

“drag rotate”

根据”when dragged over”拼图生成的拖动移动数据旋转指定的3D对象。使用下拉菜单将旋转限制为特定轴。  “space” 下拉允许在”local” 和”parent” 坐标空间之间切换。

“drag scale”

根据”when dragged over”拼图生成的拖动移动数据缩放指定的3D对象。使用下拉菜单限制缩放到特定轴。

选择器(Selectors)

此类别的拼图用于选择3D对象,组,动画片段和材质以适应其他拼图。

“select object”

下拉列表包含场景中所有对象的按字母顺序排列的列表。

“all objects”

表示场景中的所有对象,以便可以批量应用操作。不可迭代。

“select group”

下拉列表包含场景中显示的所有对象组的按字母顺序排列的列表。操作可以批量应用于一组对象。不可迭代。

“select material”

下拉列表包含场景中存在的所有材质的按字母顺序排列的列表。

物体/对象(Objects)

此类别的拼图使用对象来执行各种操作。

“show”

使初始或以前隐藏的对象可见。

“hide”

隐藏一个对象。

“clone”

制作对象副本并立即将其添加到场景中。输出新对象。

“snap to object”

通过复制其变换数据将对象移动到另一个对象的位置。还复制旋转和缩放。

“set transform”

使用指定的变换数据移动、旋转或缩放对象。 “offset”复选框能够相对原始状态移动/旋转/缩放对象。任何轴输入都可以留空。

“get transform”

检索对象的位置,旋转或缩放数据。

“assign material”

将材质指定给对象,完全替换旧材质。

“add annotation”

将平面标记添加到用户可以展开的对象,方法是单击该对象以查看对象描述。

“remove annotation”

从对象中删除以前添加的注释。

“update text object”

根据指定的文本内容为文本对象生成新网格。

“parent”

在对象之间创建父关系,以便第一个对象跟随第二个对象的转换。

“distance”

输出两个对象之间的距离。

“outline”

对对象应用或删除轮廓效果。要解锁此拼图,请在3ds Max或Blender中启用轮廓效果。

动画(Animation)

此类别的拼图使用动画片段执行操作。

“play animation”

播放动画片段。动画剪辑名称对应于在3ds Max或Blender中为其指定动画的对象(每个对象只能分配一个动画片段)。下拉菜单可用于更改动画模式 – “auto”表示使用3ds Max或Blender中指定的动画模式。

“play animation extended”

播放动画片段。动画剪辑名称对应于在3ds Max或Blender中为其指定动画的对象(每个对象只能分配一个动画片段)。使用“from”和“to”字段指定范围框架。 “Reversed”复选框可以反向播放。动画完成后处理“完成时间”插槽中的拼图(这仅适用于“一次”动画模式)。

“stop animation”

停止播放动画片段。

“pause animation”

暂停动画片段播放,以便在其暂停的帧之后可以恢复播放。

“resume animation”

恢复先前暂停的动画片段。

“set animation frame”

将动画片段设置为指定的帧。

“get animation”

检索指定对象的动画片段。也适用于列表和对象组,以及 “all objects”拼图。

相机(Camera)

此类别的拼图使用相机执行操作。

“look at”

平滑地为活动相机设置动画,使其以指定对象为目标。

“tween camera”

平滑地为活动相机设置动画,使其位置更改为指定对象的位置,并且相机将指向另一个指定对象。

“set active camera”

使指定的相机处于活动状态。这可用于在运行中更改摄像机控制模式(轨道与飞行),视野和其他设置。

杂项( Misc)

杂项拼图在高层次上执行各种操作。

“open web page”

触发此拼图时,将根据下拉选项在新的或同一浏览器选项卡中打开指定的URL。

“replace scene”

触发此拼图时,将卸载当前场景并从指定的.gltf文件加载新场景。加载完成后,触发“when loaded do”插槽中的拼图。

“call JS function”

执行应用程序的JavaScript代码中指定的函数。可选择传递要用作函数参数的参数。

要向JavaScript代码添加函数,请使用任何文本编辑器打开应用程序.js文件(例如,位于verge3d / applications / my_awesome_app中的my_awesome_app.js)。搜索“prepareExternalInterface”并在该声明中添加您的函数(在大括号之间),使它看起来像这样:

function prepareExternalInterface(app) {
app.ExternalInterface.myJSFunction = function(numericArg, textArg) {
alert('Got some params from Puzzles: ' + numericArg + ' and ' + textArg);
}
}

“when called from JS”

允许从应用程序的JavaScript代码触发拼图。 (可选)检索从JavaScript代码传递的参数,并将它们保存为变量以供“do”插槽中的拼图使用。

要从JavaScript代码触发此拼图,请使用任何文本编辑器打开应用程序.js文件(例如,位于verge3d / applications / my_awesome_app中的my_awesome_app.js)。搜索“runCode”并在该声明中添加一个函数调用(在大括号之间),使它看起来像这样:
function runCode() {
app.ExternalInterface.myJSCallback('Hello, Puzzles!', 80);
}

时间(Time)

这些拼图产生基于时间的事件。

“after”

等待指定的时间,然后触发放置在“do”插槽内的拼图。

“every”

等待指定的时间,然后触发放置在“do”插槽内的拼图。然后重复。

“every frame”

触发每个渲染帧放置在“do”插槽内的拼图(通常以每秒60帧的速率)。

“elapsed”

输出从前一个渲染帧传递的时间量(以秒为单位)。可以与”every frame”拼图一起使用来实现与帧无关的动画。

HTML

这些拼图操纵HTML DOM元素。

“add HTML element”

创建具有指定类型和标识符(对应于“id”属性)的HTML元素,并将其附加到文档正文。并且其样式属性“position”设置为“absolute”。

“set attribute”

为具有指定标识的HTML元素设置属性。如果HTML元素位于外部HTML文档(使用iframe嵌入Verge3D应用程序的.html文件)中,则应启用“在父文档中”复选框。

“set style”

为具有指定标识的HTML元素设置CSS属性。如果HTML元素位于外部HTML文档(使用iframe嵌入Verge3D应用程序的.html文件)中,则应启用“在父文档中”复选框。

“event”

为具有指定标识的HTML元素注册事件侦听器。如果HTML元素位于外部HTML文档(使用iframe嵌入Verge3D应用程序的.html文件)中,则应启用“在父文档中”复选框。一旦事件发生,触发放置在“do”槽中的拼图。

“get event property”

输出由“事件”拼图生成的事件的属性值。

“document”

表示DOM文档对象 – HTML文档的根节点。

“body”

表示DOM正文对象 – HTML文档的<body>元素。

“draw line”

通过动态更新的线条连接指定的3D对象和指定的HTML元素。如果HTML元素位于外部HTML文档(使用iframe嵌入Verge3D应用程序的.html文件)中,则应启用“在父文档中”复选框。您还可以设置线条的宽度,颜色和偏移量。

“remove line”

从指定对象中删除以前创建的行。

“bind element”

使指定的HTML元素跟随屏幕空间中指定3D对象的中心。如果HTML元素位于外部HTML文档(使用iframe嵌入Verge3D应用程序的.html文件)中,则应启用“在父文档中”复选框。这是一种可自定义的”add annotation”拼图的变体。

“init fullscreen”

使指定的HTML元素表现为全屏模式按钮 – 首次单击它会触发进入全屏模式,第二次单击会退出全屏模式。进入或退出全屏模式时会触发放置在“on enter do”和“on exit do”插槽中的拼图。如果浏览器不支持全屏(例如iOS Safari),则会触发放置在“if unavailable do”中的拼图。

声音(Sound)

这些拼图用于加载和播放HTML5声音。

“load sound”

创建HTML5音频元素并使用指定的URL加载声音文件。此拼图还将创建的音频元素添加到内存缓存中,以便具有相同URL的此拼图的任何后续使用不会再次加载相同的声音文件。建议使用.mp3格式,因为大多数Web浏览器都支持。

“play sound”

开始播放音频。如果启用,循环复选框将重复播放声音。

“rewind sound”

设置音频元素以从头开始播放声音。

“set volume”

设定音量。输入音量被钳制到0.0-1.0范围。

“is playing”

检查当前是否正在播放声音。

约束(Constraints)

这些拼图用于约束物体运动。如果对象不是另一个对象的父级,则约束将在世界空间中起作用。否则它们将在父对象的空间中工作 – 您可以在3ds Max或Blender中选择父对象以显示坐标轴。

“limit transform”

设置约束以限制沿选定轴的对象位置,旋转或缩放。指定的id应该是唯一的,否则将替换具有相同的现有约束。 “min”和“max”槽指定允许移动之间的范围。

“copy transform”

设置约束以从另一个对象复制对象位置,旋转或缩放。指定的id应该是唯一的,否则将替换具有相同的现有约束。

“operations”

使用指定给指定对象的指定id删除,静音或取消静音约束。分配给此对象的其他约束(如果有)将保持不变。

调试(Debug)

“print to console”

将任何类型的数据打印到浏览器控制台。后者通常可以使用F12键打开(Chrome,Windows,Linux上的Firefox)。请参阅本指南,了解在Mac上打开浏览器控制台的方法。
原文:https://www.soft8soft.com/docs/#manual/introduction/Puzzles

zjbcool

zjbcool
关闭菜单