Verge3D资产可通过以下工具创建：
- Autodesk 3ds Max 2017-2020版本，安装Verge3D for 3ds Max插件。
- Blender 2.79 及 2.80版，安装Verge3D for Blender插件
- 任何支持导出glTF2.0格式数据的三维建模工具。
导出的文件亦可压缩为LZMA / XZ格式。
| | 材质系统 |Verge3D for 3ds Max支持的材质：
- 物理材质 ，参考ART渲染器支持列表。
- 标准材质 ，参考扫描线渲染器支持里诶博鳌
- glTF兼容物理材质。
Verge3D for Blender支持的材质：
- Eevee （仅限Blender 2.8）。
- Cycles （Blender2.7与2.8均可）。
- glTF-compliant PBR 符合glTF标准的PBR材质（Blender2.7与2.8均可）。
- 标准内部材质（仅限Blender 2.7，已弃用）。
Verge3D supports the following light types:
- Directional Light
- Point Light
- Spot Light
- Image-based Light - emitted from LDR and HDR maps.
- Procedural Light - emitted from customized environment material.
- Hemisphere Light - Verge3D for Blender only.
- Rectangular Area Light - can be created with JavaScript.
Verge3D supports casting shadows from directional, point and spot light sources:
- Basic non-smoothed shadows
- PCF shadows
- Smoothed PCF shadows
Verge3D支持以下灯光类型：
- 平行光
- 点光源
- 聚光灯
- 基于图像的光源——从LDR和HDR贴图发射
- 程序光——从自定义的环境贴图发射
- 半球光源——仅限Verge3D for Blender
- 矩形面光源-可用Javascript创建
Verge3D支持从平行光、点光源和聚光灯投射阴影：
Verge3D supports casting shadows from directional, point and spot light sources:
- 基本非平滑阴影
- PCF阴影
- 平滑PCF阴影
应用管理器（App Manager）是一个轻量化的管理工具：
- 基于模板创建新应用
- 启动3d建模套件（Blender, 3ds Max）
- 编辑与运行拼图逻辑（Puzzles logic）
- 更新应用至Verge3D最新版
- 在Verge3D云服务（Verge3D Network）中发布应用
- 管理授权码
- 访问Verge3D文档及支持渠道
应用管理器（App Manager）可以从Blender与3ds Max中直接打开。
| | 动画 |Verge3D支持以下类型的动画：
- 基于骨骼驱动的动画
- 对象变换动画，包括位置，旋转和缩放。
- 材质参数动画。支持浮点和颜色参数。
- 目标融合动画（Morph target animation），又称之形状帧动画（仅限于Verge3D for Blender）
Verge3D拼图系统（Verge3D Puzzles）是一种可视化逻辑环境，允许以拖放方式快速创建交互式场景，拥有以下模块：
- 处理用户事件，例如鼠标点击/触摸，悬停和拖动；
- 检索场景对象，动画，组和材质；
- 移动/旋转/缩放3D对象，获得对象之间的距离；
- 显示/隐藏对象；
- 更改对象的层次结构；
- 将2D文本注释（billboards）添加到场景中；
- 改变材质参数，加载纹理；
- 控制动画；
- 移动，旋转相机；
- 设置有源摄像头；
- 动态加载资产；
- 通过网络以JSON / CSV /文本格式上传/下载数据；
- 加载用户图像；
- 实现撤消/重做功能；
- 填写和发送客户订单；
- 检测用户功能，如浏览器，操作系统等；
- 与用JavaScript编写的逻辑事件交互；
- 执行基于计时器的事件；
- 初始化虚拟现实会话环境；
- 管理已加载页面的HTML / CSS布局；
- 播放声音；
- 模拟物理环境；
- 启用后期特效处理；
- 管理应用程序逻辑和数据；
- 执行数学运算；
- ……
可以使用JavaScript修改应用程序源文件或通过在Puzzles中集成代码来添加应用程序功能。
Verge3D基于开源库Three.js，并通过v3d或THREE命名空间公开其API。因此，Verge3D中可以复用任何现有的Three.js代码。
| | 发布 |您可以通过以下方式发布您的创作内容：
- 自有服务器；
- 任意网络托管服务（亚马逊AWS、阿里云、腾讯云等）；
- Verge3D云服务（Verge3D ）；
- Facebook（使用3D主题功能）；
- 使用Electron或Cordova框架创建的独立桌面或移动应用程序。
Interface layouts, created using external WYSIWYG editors, can be linked with Puzzles to trigger changes to a 3D scene being rendered in the browser and vice versa.
The following website builders are tested and known to work:
- Webflow
- Google Web Designer
使用外部所见既所得编辑器（WYSIWYG editor）创建的界面布局可以与Puzzles链接，以触发对在浏览器中呈现的3D场景的更改，反之亦然。
以下网页设计工具已经过测试可用于Verge3D生产流程：
- Webflow
- Google Web Designer
Verge3D附带了一个WordPress插件。WordPress是目前最流行的内容管理系统（CMS）。该插件包括以下功能：
- 应用程序托管和发布（嵌入）
- 长期文件存储
- 完全可定制的电子商务系统，用于处理客户订单
除此之外，Puzzles可视化逻辑编辑器还支持通过网络以JSON，CSV或纯文本格式发送/检索数据的模块。
| | 后期特效 |拼图编辑器中可以启用以下特效：
- 环境光遮蔽
- 泛光效果（Bloom）
- 亮度/对比度
- 景深
- 灰度
除此之外，可用JavaScript启用以下效果：
- 自适应色调映射
- 云隙光（也称为神光或圣光效果）
- 增强的亚像素形态抗锯齿（SMAA）
- 毛刺
- 图像交叉淡化
- 图像遮罩/掩蔽（Image Mask）
- 运动模糊
- 像素化图像
- 索贝尔过滤器（Pixelated Imagery）
- 超级采样抗锯齿（SSAA）
- 时间性抗锯齿（TAA）
Over 150 coding examples and a series of fully-featured 3D apps including:
- City - large urban environment with first-person controls and ground detection.
- Custom Image - a virtual picture frame which allows uploading, storing and sharing your images.
- Farmer's Journey - arcade browser game made without coding.
- Industrial Robot VR - interactive robot simulator with VR capabilities.
- Recliner - 3D configruator and ready-to-use e-commerce website.
- Ring - simple 3D jewelry customizer with online ordering capabilities.
- Scooter - advanced 3D configurator with realistic PBR materials and millions possible combinations.
- Teapot Heater - non-trivial interactive 3D animation made with Puzzles.
In addition to glTF 2.0 you can import the following formats.
Geometry/Materials:
- 3DS - older Autodesk 3ds Max file format
- 3MF - 3D manufacturing format
- AMF - Additive manufacturing file format
- AWD - used in Away3D engine
- babylon - used in Babylon.js engine
- COLLADA
- CTM - OpenCTM format
- FBX
- glTF 1.0 - legacy format, use glTF 2.0 instead
- KMZ - Keyhole Markup Language
- OBJ/MTL
- PCD - 3D point cloud data format
- PDB - Protein Data Bank format
- PlayCanvas - JSON-based data format used in PlayCanvas engine
- PLY - Polygon File Format, designed to store three-dimensional data from 3D scanners
- PRWM - Packed Raw WebGL Model
- STL - stereolithography data format, takes its origin from the CAD software by 3D Systems
- SEA3D - an open-source format for game development
- VRML - Virtual Reality Modeling Language
- VRM - glTF-based 3D avatar format
- VTK - Visualization Toolkit format
- X - DirectX file format
Animation:
- BVH - Biovision Hierarchy character animation file format
- MD2 - used in Quake II engine
- MMD - MikuMikuDance format
Images:
- DDS - texture compression format
- EXR - OpenEXR, high dynamic range raster file format
- PVR - texture compression format
- HDR - RGBE or Radiance HDR
- KTX - texture format by Khronos
- NRRD - "nearly raw raster data" format
- SVG
- TGA - Truevision TGA raster graphics format
- TTF
In addition to glTF 2.0 you can export to the following formats:
- COLLADA
- MMD
- OBJ
- PLY
- STL
These camera control modes are available out-of-the-box:
- Orbit Controls - targeted 3D view
- Flying Controls - free-flight view
- First-Person Controls
- Virtual Reality Controls
These camera control modes can be enabled with JavaScript:
- Flyover Controls
- Pointerlock Controls
- Device Orientation Controls - implements gyroscope-driven view
- Map Controls - hovering camera
- Trackball Controls
You can load geometry exported from any modelling suite. In addition to that, the following 3D primitives can be created with JavaScript:
- Cone
- Convex Hull
- Cube (Box)
- Cylinder
- Dodecahedron - a polyhedron with twelve flat faces
- Extruded Shape
- Icosahedron - a polyhedron with 20 faces
- NURBS
- Octahedron - a polyhedron with eight faces
- Plane
- Ring
- Sphere
- Tetrahedron - a triangular pyramid
- Polyhedron
- Spline Curve
- Text
- Torus
- Tube
- Utah Teapot
- Wireframe
### 论坛（Forums） 使用[Verge3D论坛](https://www.soft8soft.com/forums/)进行讨论，问题，功能请求或工作。这也是展示您的项目的好地方。 您也可是使用[Verge3D中国](https://verge3d.funjoy.tech/)的[工单系统](https://verge3d.funjoy.tech/helpdesk/)获得直接的一对一帮助。 ### 教程（Tutorials） #### 初级水平 * [Verge3D for 3ds Max Basics](https://www.youtube.com/playlist?list=PLMnTV0uuRMhR2zhXxPqAD8G9wp_LNIXZc)视频课程 * YouTube:
在同一面板上，**Map Type**允许您选择阴影渲染算法 - 您可以使用此开关在速度和平滑度之间进行交换。阴影质量增加，性能按照**Basic**，**PCF**，**Soft PCF**选项的顺序递减。 **Map Side**表示在阴影过程中渲染多边形的哪一侧。在设置**偏差**时应考虑选择此选项（见下文）。 ### 每灯设置 可以使用Blender的原生**阴影**面板为每个单独的灯启用/禁用**阴影**。不支持此面板中的任何其他设置。
在**Verge3D设置**面板上可以找到一些每灯设置。**Size / FOV**，**Near**和**Far**可用于调整阴影音量（越少越好）。**半径**控制模糊比，**地图大小**- 阴影纹理有多大（速度和质量之间的交易）。 **偏见**可以是正面的也可以是负面的。选择什么取决于上面提到的**Map Side**设置。如果**正面**被选中，正面**偏置**应该足够了（相反，**背面** -负）。调整**偏见**直到你摆脱自我阴影瑕疵和/或彼此平移效果。 您还可以查看以下[视频，](https://www.youtube.com/watch?v=BqK5ZK0W4xc)了解如何在Blender中设置阴影。 # 物理材质 Physical Material 待校订 ## 物理材质（符合glTF标准的PBR） 如果您的内容由于某种原因需要与[glTF 2.0标准](https://www.khronos.org/news/press/khronos-releases-gltf-2.0-specification)兼容（例如在Facebook上发布您的模型），您可以使用物理材料来实现此目的，如下所述。 ### 配置 Blender中的物理材料由名为**Verge3D PBR**的基于Cycles的节点组**提供**。 您可以将完整的PBR材料或**Verge3D PBR**节点组添加到项目中，如下所示：选择**File> Append，**然后转到**/applications/materials/pbr\_material.blend**文件。 然后从**Material**类别中选择**Verge3D PBR**材料，或者从**NodeTree**类别中选择**Verge3D PBR**节点组。 您可以将纹理节点连接到**Verge3D PBR**节点，如下所述。请注意，所有纹理都是可选的，可以安全地省略任何纹理。 * 将**BaseColor**纹理连接到**Verge3D PBR**节点的**BaseColor**输入。纹理的**颜色空间**必须设置为“ **颜色”**。 * 将**OcclusionRoughnessMetallic**纹理连接到**Verge3D PBR**节点的**MetallicRoughness**和**Occlusion**输入。为了优化加载和渲染PBR着色器，您应该将遮挡，粗糙度和金属纹理分别打包到单个纹理的R，G和B通道中。当您仅包装粗糙度和金属纹理并保持遮挡时，也可以使用变体。此纹理的“ **颜色空间”**设置必须设置为“ **非颜色”**。 * 将**NormalMap**纹理连接到**Verge3D PBR**节点的**Normal**输入。纹理的**颜色空间**必须设置**为非颜色**。 * 将**自发光**纹理连接到**Verge3D PBR**节点的**自发光**输入。纹理的**颜色空间**必须设置为“ **颜色”**。 * 将**BaseColor**纹理的**Alpha**输出连接到**Verge3D PBR**节点的**Alpha**输入。要为材质启用透明度，必须在**BaseColor**纹理的Alpha通道中打包透明度图- 将其连接到**Alpha**输入。使用**AlphaMode**滑块更改材质的透明度类型：0 - Blend，1 - Mask。 * 您还可以在**Verge3D PBR**材质中使用一个顶点颜色图层。为此，只需将**Attribute**节点的**Color**输出（在**Input**类别中找到）连接到**Verge3D PBR**节点的**COLOR\_0**输入，并将**Use COLOR\_0**设置为1.确保指定了顶点颜色层的名称**Attribute**节点的**Name**字段。 要在Blender视口中查看**Verge3D PBR**着色器的预览，您可以将**3D视图**的显示方法设置为**渲染，**或者仅使用同一面板上的**Sneak Peak**按钮在Verge3D中预览场景。 ### 使用没有纹理的PBR着色器 如果您想使用纯色而不是纹理，可以使用**BaseColorFactor**输入而不是**BaseColor**。相应地，为了设置**粗糙度**，**金属**和**自发光**，使用具有相同名称而不是颜色输入的**Verge3d PBR**节点的值输入。但是，如果没有纹理，则无法设置**遮挡**和**透明度**。 ### 从Substance Painter导出纹理 为了便于从Substance Painter导出纹理并确保Verge3D引擎中的最大功能，我们建议使用[Verge3D导出预设](https://www.soft8soft.com/docs/files/physical-material-blender/Verge3D_for_Blender.spexp)。 将此预设文件放在通常位于**My Documents \ Allegorithmic \ Substance Painter \ shelf \\**文件夹中的**export-presets**文件夹中（如果没有则创建）。 从Substance Painter导出纹理时，在导出对话框窗口中选择**Verge3d for Blender**，以便所有生成的纹理都与Verge3D基于的glTF 2.0标准兼容。 # 透明度 Transparency 待校订 在这里，我们将展示如何在Blender中为glTF兼容的PBR，Cycles和Eevee材质启用透明度。Blender 2.7不讨论内部材质，因为它们已被弃用，不建议使用。 ### 混合VS蒙面 作为实时3D引擎，Verge3D提供了两种处理透明对象的主要方法：alpha混合和alpha裁剪（通常使用图像蒙版）。混合可以将半透明前景色与背景色相结合，使用前景色的alpha作为混合因子。另一方面，剪切只是丢弃所有像素小于某个预定阈值（通常为0.5）的像素。  混合可实现平滑过渡，通常看起来更好但计算上比剪裁更昂贵。当多边形看起来以错误的顺序呈现时，它也可能产生z排序伪像。剪切最适合可视化许多小物体（例如草或树叶）。它还会产生硬边，没有任何可能混叠的过渡。 ### Alpha Add（又名No Depth Writes） Verge3D还提供了一种特殊模式，用于在渲染时禁用写入深度缓冲区。这导致多边形被排除在像素深度比较之外。这些多边形以加性方式合成，有时可以帮助摆脱混合伪像。  ### 渲染顺序（又名Z-index） Verge3D不对对象内部的多边形进行排序，而是在对象之间执行排序。这在大多数情况下提供了正确的混合，但有时可能需要强制更改对象的渲染顺序。 要修改特定对象的渲染顺序，请更改Verge3D设置面板中的数字字段。索引越小，对象的渲染时间越早。  因此，如果后方有一个透明的连续对象，并且希望前面的其他透明对象能够正确渲染，请将一些负值设置为后方对象的渲染顺序。  ### 符合glTF标准的PBR材质的透明度 要为此类材质启用透明度，请将alpha蒙版信息添加到基色纹理的Alpha通道。然后将纹理的alpha通道与Verge3D PBR节点的**Alpha**输入连接。  使用**AlphaMode**滑块更改透明度类型：0将启用混合，1 - 遮罩。 ### Cycles材质的透明度 在Cycles中，可以通过使用**Transparent BSDF**和**Mix Shader**节点的组合来启用**透明度**。务必打开Verge3D设置面板上的**透明度**复选框。使用透明度类型选择器在混合和屏蔽模式之间切换。  “ **混合着色器”**节点中的因子可用于定义Alpha值。您还可以将此输入与包含其RGB或Alpha通道中的Alpha信息的纹理相连接。  使用**Alpha Add Transparency**复选框启用添加模式。 ### Eevee材质的透明度 与Cycles类似，可以通过使用**Transparent BSDF**和**Mix Shader**节点的组合来启用Eevee材质的**透明度**。“ **混合着色器”**节点中的因子可用于定义alpha值 - 您可以直接指定值或从其他节点（如**菲涅耳）**创建依赖关系，以获得更逼真的外观。  使用“ **混合模式”**下拉列表在透明度模式之间进行选择。 # 使用材质库 Using Material Library 待校订 ## 使用材质库（Verge3D for Blender） 有关推荐工作流程的说明，请参见下文。 * 安装 * 向项目添加材质 * 建立环境 * UV映射 * 配置您的材质 * 图像分辨率 * 将纹理重定位到App文件夹 ＃ ### 安装 材质库在Soft8Soft商店中以主题包的形式提供，例如： * [Essential Material Pack](https://www.soft8soft.com/product/verge3d-blender-essential-material-pack/)（基于Eevee，还包括与Blender 2.79兼容的传统GLSL材质） * 珠宝材质包（基于Eevee，正在开发中） * 汽车材质包（基于Eevee，正在开发中） 只需将带有库包的存档解压缩到计算机上的任何文件夹即可。给存档充气后，您将看到一个或两个文件夹（如果这是Essential Material Pack）： * 2\_79 * 2\_80 该**2\_80**文件夹包含Blender 2.80兼容基于伊布的材质。在此文件夹中有**混合**文件（每个材质一个文件）。材质中使用的纹理位于**material\_maps**文件夹中。文件夹**环境**包含3种可用于环境的HDR图像变体（每种变体有3种分辨率：1k，2k和4k）。 该**2\_79**文件夹（只在必要的材质包中提供）包含基于Blender内部GLSL材质遗留库（这是修订库的前5名提供的唯一变量）。 ＃ ### 向项目添加材质 要在项目中使用库材质，请调用“ **文件/追加”**对话框。  然后导航到库文件夹，并在**混合**文件上单击一次，并添加要添加的材质。  在**Material**文件夹上单击一次...  ...选择材质，然后单击“ **从库中追加”**按钮。  添加材质后，您应该能够将其分配给模型。选择模型，转到“ 材质**”**选项卡，单击材质名称附近的小按钮（或“ **新建”**按钮附近没有指定材质），然后从列表中选择附加材质。  ＃ ### 建立环境 基于Eevee的材质需要设置环境，否则材质将看起来黑暗且不反光。环境已经在Verge3D的默认多维数据集项目中设置，您可以将其用作自己的应用程序的基础。或者，您可以从头开始配置环境，如本[视频教程中](https://www.youtube.com/watch?v=wQ0KH4bA3Uw\&t=11m34s)所示。为此，您可以在材质包的**环境**文件夹中使用HDR纹理。 ＃ ### UV映射 库中的大多数材质都需要模型进行UV映射。考虑展开您的模型以获得最佳效果。 ＃ ### 配置您的材质 大多数着色器通过调整提供输入集，您可以创建适合您需求的独特材质。  除此之外，还有一些特殊的输入可以方便地连接烘焙的普通和AO地图。 ＃ ### 图像分辨率 某些材质可能使用高分辨率纹理（高达8k），这可能会影响加载速度和性能。如果您的应用程序不需要这样详细程度，请考虑重新缩放图像。 ＃ ### 将纹理重定位到App文件夹 为了您的应用程序的完整性（如果您将项目源转移到第三方，这很重要），您可以将附加材质使用的纹理保存在app文件夹中，如下所述。 在Blender中 打开**图像编辑器**（或**UV编辑器**）。从下拉菜单中选择一个纹理，并检查其文件路径。  如果看起来纹理是从材质库文件夹引用的，请使用菜单**Image / Save As**将其重新保存到应用程序文件夹中。  搜索其他材质库纹理并重复此操作，直到重新定位所有纹理。 您可以通过将文件夹移动到文件系统中的其他位置来检查应用程序的完整性。打开**混合**文件并调用**文件/外部数据/报告丢失文件**。  如果缺少**混合**文件中使用的任何纹理，则底部将显示黄色飞溅警告。  # 视口预览 Viewport Preview 待校订 ## 视口预览（Blender 2.79内部） 视口预览功能已在App Manager创建的默认Blender项目中可用。如果您未使用App Manager创建资产文件，请参阅下文，了解有关如何启用的信息。 要在Blender 2.79中为Blender内部材质启用更好的视口预览，请在“ **视口着色”**菜单中选择“ **材质** ” 。 同样在**Shading**面板上选择**GLSL**并在**Display**面板上启用**World Background** - 这两个面板都可以在**Properties**窗口中找到（依次用**N**快捷键显示）。 或者，您也可以启用“ **背面剔除”**以隐藏Verge3D渲染中不可见的所有曲面。 # Initialization（初始化） 此拼图位于**init**选项卡下，并在初始化Verge3D应用程序之前进行预读和解释。  ### **"configure application" - 应用配置** 允许设置应用程序初始化参数，包括一些WebGL上下文创建参数。 * "compressed assets（资产压缩）" —— 使应用程序加载**.xz**格式的压缩场景而不是常规**.gltf**文件（有关详细信息，请参阅[资产压缩](/general-topics/asset-compression)）; * "default fullscreen button（默认全屏按钮）" —— 启用在屏幕右上角的默认全屏按钮； * "transparent background（背景透明）" —— 使背景透明，以便透过WebGL画布显示网页的底层部分; * "enable screenshots（启用屏幕截图）" —— 可从WebGL画布中正确捕获屏幕截图（将WebGL上下文的**preserveDrawingBuffer**属性设置为**true**）; * "fade annotations（淡化注释）" —— 当注释被场景对象阻挡时，注释会消隐。  ### **"setup preloader" + "percentage" - 设置预加载 + 百分比** 删除默认预加载器并公开事件回调以允许预加载器读取处理进度。  在以下示例中，自定义的预加载器由具有id“**preloader**”的HTML容器元素（例如一个\
）表示。在它内部，还有一个ID为“**loading progress（加载进度）**”的元素（例如一个\），其中加载百分比与**%**是使用Percentage拼图打印的。除此之外，第三个元素的宽度（例如一个\
）以图形方式动态更改表示加载进度。
# Events（事件）
此类别的拼图处理用户生成的事件：鼠标点击/触摸，悬停和拖动。
### "**when clicked" - 点击时**
等待用户点击指定的3D对象（或在列表或组里的任何物体，或在启用“[all objects](/puzzles/selectors#all-objects-suo-you-dui-xiang)”拼图时场景里的所有物体）——然后在“do”插槽中运行拼图，或者如果用户点击其他内容则在“miss: do”插槽中运行拼图。
### **"picked object" - 选择的对象**
返回用户单击的对象。与“点击时”("when clicked")拼图一起使用。
### **"when hovered"**
Waits until a user hovers over/out a specified 3D object (or any object in a specified list or group, or any object on the scene if the [all objects](https://www.soft8soft.com/docs/manual/en/puzzles/Selectors.html#all_objects) puzzle is used) - then runs puzzles in the "over/out: do" slot.
### **"hovered object"**
Returns an object a user has hovered over. Intended for use with the "when hovered" puzzle.
### **"when moved"**
Tracks any movements (position, rotation and scale) of a specified object (or any object in a specified list or group, or any object on the scene if the [all objects](https://www.soft8soft.com/docs/manual/en/puzzles/Selectors.html#all_objects) puzzle is used). Runs puzzles in the "start: do" slot if an object started moving, keeps running puzzles in the "while moving: do" slot until an object stops moving, then runs puzzles in the "stop: do" slot. The "delta" parameter denotes an absolute change of any coordinate (x, y or z) of either of position, rotation or scale that is required to trigger this puzzle. The "period" parameter denotes how many rendering frames should the puzzle wait before checking movements again.
### **"when dragged"**
Waits until a user drags over a specified 3D object (or any object in a specified list or group, or any object on the scene if the [all objects](https://www.soft8soft.com/docs/manual/en/puzzles/Selectors.html#all_objects) puzzle is used) with the mouse or a touch gesture - then generates movement data for using in a "drag move", "drag rotate" or "drag scale" puzzle. Also captures events of started and stopped dragging.
### **"drag move"**
Moves a specified 3D object (or all objects in a specified list or group, or all objects on the scene if the [all objects](https://www.soft8soft.com/docs/manual/en/puzzles/Selectors.html#all_objects) puzzle is used) in accordance to dragging movement data generated by the [when dragged](https://www.soft8soft.com/docs/manual/en/puzzles/Events.html#when_dragged) puzzle. Use the drop-down menu to limit the movement to a particular axis or plane, or not to limit at all.
### **"drag rotate"**
Rotates a specified 3D object (or all objects in a specified list or group, or all objects on the scene if the [all objects](https://www.soft8soft.com/docs/manual/en/puzzles/Selectors.html#all_objects) puzzle is used) in accordance to dragging movement data generated by the [when dragged](https://www.soft8soft.com/docs/manual/en/puzzles/Events.html#when_dragged) puzzle. Use the drop-down menu to limit the rotation to a particular axis. The "space" drop-down allows for switching between "local" and "parent" coordinate spaces.
### **"drag scale"**
Scales a specified 3D object (or all objects in a specified list or group, or all objects on the scene if the [all objects](https://www.soft8soft.com/docs/manual/en/puzzles/Selectors.html#all_objects) puzzle is used) in accordance to dragging movement data generated by the [when dragged](https://www.soft8soft.com/docs/manual/en/puzzles/Events.html#when_dragged) puzzle. Use the drop-down menu to limit scaling to a particular axis.
# Selectors（选择器）
此类别的拼图用于选择3D对象，组，动画片段和材质以适应其他拼图。
### **"select object" - 选择对象**
下拉列表包含场景中所有对象的按字母顺序排列的列表。
### **"all objects" - 所有对象**
表示场景中的所有对象，以便可以批量应用操作。不可迭代。
### **"select group" - 选择群组**
下拉列表包含场景中显示的所有对象组的按字母顺序排列的列表。操作可以批量应用于一组对象。不可迭代。
### **"select animation" - 选择动画**
下拉列表包含场景中显示的所有对象组的按字母顺序排列的列表。操作可以批量应用于一组对象。不可迭代。
### **"select material" - 选择材质**
下拉列表包含场景中存在的所有材质的按字母顺序排列的列表。
# Objects
The puzzles from this category perform various operations with objects.
**"show"**
Makes a specified object, that was initially or previously hidden, visible. Also works for a list of objects, a group (or a list of groups) or with the [all objects](https://www.soft8soft.com/docs/manual/en/puzzles/Selectors.html#all_objects) puzzle.
**"hide"**
Makes a specified object invisible. Also works for a list of objects, a group (or a list of groups) or with the [all objects](https://www.soft8soft.com/docs/manual/en/puzzles/Selectors.html#all_objects) puzzle.
**"is visible"**
Checks if an object (or any of objects in a list) is currently visible. If it so, returns true, otherwise returns false.
**"get objects from"**
This universal puzzle allows you to:
* get the list of objects contained in a group thus making it iterable
* convert the output of the **all objects** puzzle to a list thus making it iterable
* get children of some parent object
By using the dropdown you can also filter off objects of a kind (e.g. cameras, lamps, annotations, etc).
**"clone"**
Makes an object copy, generates a unique name for the new object and immediately adds it to the scene. Outputs the new object. Does not work with lists, groups or the [all objects](https://www.soft8soft.com/docs/manual/en/puzzles/Selectors.html#all_objects) puzzle.
**"snap to object"**
Moves an object to the position of another object by copying its transform data. Also copies rotation and scale. Does not work with lists, groups or the [all objects](https://www.soft8soft.com/docs/manual/en/puzzles/Selectors.html#all_objects) puzzle.
**"set transform"**
Moves, rotates or scales an object according to specified transform data. The "offset" checkbox enables moving/rotating/scaling an object relatively to the original position/rotation/scale. Any of the axis inputs can be left blank. Also works for a list of objects, a group (or a list of groups) or with the [all objects](https://www.soft8soft.com/docs/manual/en/puzzles/Selectors.html#all_objects) puzzle.
**"get transform"**
Retrieves the position, rotation or scale data of an object. Does not work with lists, groups or the [all objects](https://www.soft8soft.com/docs/manual/en/puzzles/Selectors.html#all_objects) puzzle.
**"change local transform"**
Moves, rotates or scales an object according to specified transform data in its local space. Any of the axis inputs can be left blank. Also works for a list of objects, a group (or a list of groups) or with the [all objects](https://www.soft8soft.com/docs/manual/en/puzzles/Selectors.html#all_objects) puzzle.
**"get object direction"**
Returns an object's direction vector or numeric **X**,**Y**,**Z** vector components.
**"add annotation"**
Add a 2D marker to an object that a user can expand by clicking on it to see the object description. Also works for a list of objects, a group (or a list of groups) or with the [all objects](https://www.soft8soft.com/docs/manual/en/puzzles/Selectors.html#all_objects) puzzle.
**"remove annotation"**
Removes a previously added annotation from an object. Also works for a list of objects, a group (or a list of groups) or with the [all objects](https://www.soft8soft.com/docs/manual/en/puzzles/Selectors.html#all_objects) puzzle.
**"open annotation"**
Expands an annotation specified by its label.
**"close annotation"**
Closes an annotation specified by its label.
**"update text object"**
Generates a new mesh for a text object according to specified textual content. Also works for a list of objects, a group (or a list of groups) or with the [all objects](https://www.soft8soft.com/docs/manual/en/puzzles/Selectors.html#all_objects) puzzle.
**"parent"**
Creates a parent relation between objects, so that the first object follows position/rotation/scale of the second one. Does not work with lists, groups or the [all objects](https://www.soft8soft.com/docs/manual/en/puzzles/Selectors.html#all_objects) puzzle.
**"distance"**
Outputs the distance between two specified objects. Does not work with lists, groups or the [all objects](https://www.soft8soft.com/docs/manual/en/puzzles/Selectors.html#all_objects) puzzle.
**"outline"**
Applies or removes the outline effect to/from a specified object. To unlock this puzzle, enable the outline effect in 3ds Max or Blender. Also works for a list of objects, a group (or a list of groups) or with the [all objects](https://www.soft8soft.com/docs/manual/en/puzzles/Selectors.html#all_objects) puzzle.
**"get custom props"**
Returns a [dictionary](https://www.soft8soft.com/docs/manual/en/puzzles/Dictionaries.html) with custom properties assigned to an object.
Custom properties can be assigned in 3ds Max via the **User Defined Properties** panel, or in Blender by using the **Custom Properties** panel.
# Materials
The puzzles from this category perform various operations with materials and textures.
### **"assign material"**
Assigns a material to an object, completely replacing the old material. Also works for a list of objects, a group (or a list of groups) or with the [all objects](https://www.soft8soft.com/docs/manual/en/puzzles/Selectors.html#all_objects) puzzle.
[#](https://www.soft8soft.com/docs/manual/en/puzzles/Materials.html#replace_texture)
### **"replace texture"**
Replaces a texture found for a specified material with the one loaded from the provided URI.
### **"set color"**
Set R, G and B components of a color parameter found for a specified material.
**For 3ds Max users:** you can add **Controllers** in your materials (standard or physical) and their names will be shown in the dropdown menu. In addition, diffuse (or "base") color inputs for standard or physical material nodes are also accessible. In case of **glTF-compliant PBR** materials the **Base Color** and **Emission** inputs are only accessible with this puzzle.
**For Blender users:** you can add **RGB** nodes in your node-based materials (GLSL Internal, Cycles, Eevee) and their names will be shown in the dropdown menu. In addition, diffuse (or "base") color inputs for Material, Extended Material, BSDF Principled, BSDF Diffuse and BSDF Glossy nodes are also accessible. In case of **glTF-compliant PBR materials** the **BaseColor** and **Emissive** inputs are only accessible with this puzzle.
This puzzle can also be used to modify the environment shader. In the drop-down, the name of the environment shader starts with "Verge3D\_Environment".
For more information on materials available to Verge3D users, please refer to Material system overview chapters of this manual: [3ds Max](https://www.soft8soft.com/docs/manual/en/introduction/Material-System-Max.html), [Blender](https://www.soft8soft.com/docs/manual/en/introduction/Material-System-Blender.html).
[#](https://www.soft8soft.com/docs/manual/en/puzzles/Materials.html#materials_set_value)
### **"set value"**
Set a value parameter found for a specified material.
**For 3ds Max users:** you can add **Controllers** in your materials (standard or physical) and their names will be shown in the dropdown menu. In case of **glTF-compliant PBR** materials the following inputs are accessible with this puzzle: Metalness, Roughness, Bump Scale, Emissive Intensity and Environment Map Intensity.
**For Blender users:** you can add **Value** nodes in your node-based materials (GLSL Internal, Cycles, Eevee) and their names will be shown in the dropdown menu. In case of **glTF-compliant PBR** materials the following inputs are accessible with this puzzle: metalness (MetallicFactor in PBR node), roughness (RoughnessFactor in PBR node), bumpScale (NormalScale in PBR node), emissiveIntesity (EmissiveFactor in PBR node) and envMapIntensity (not presented in PBR node).
This puzzle can also be used to modify the environment shader. In the drop-down, the name of the environment shader starts with "Verge3D\_Environment".
For more information on materials available to Verge3D users, please refer to Material system overview chapters of this manual: [3ds Max](https://www.soft8soft.com/docs/manual/en/introduction/Material-System-Max.html), [Blender](https://www.soft8soft.com/docs/manual/en/introduction/Material-System-Blender.html).
[#](https://www.soft8soft.com/docs/manual/en/puzzles/Materials.html#get_material)
### **"get material"**
Retrieves the name of a material assigned to an object. If multiple materials are assigned to the same object, returns the first one.
# Animation
The puzzles from this category perform operations with animation clips.
[#](https://www.soft8soft.com/docs/manual/en/puzzles/Animation.html#play_animation)
**"play animation"**
Plays an animation clip. Animation clip names correspond to objects to which animation is assigned in 3ds Max or Blender (only one animation clip can be assigned per object). Use the [animation selector](https://www.soft8soft.com/docs/manual/en/puzzles/Selectors.html#select_animation) puzzle to provide an animation clip for this puzzle.
Use the "from" and "to" fields to specify the frame range. Use the "speed" field to specify the playback speed. The "reversed" checkbox enables reversed playback. The drop-down can be used to change the animation mode - "auto" allows for using the animation mode specified in 3ds Max or Blender, while the other modes override the settings specified in 3ds Max or Blender.
Puzzles in the "when finished: do" slot are processed once the animation is finished (this only is valid for the "once" animation mode).
This puzzle also works for a list of animation clips.
[#](https://www.soft8soft.com/docs/manual/en/puzzles/Animation.html#stop_animation)
**"stop animation"**
Stops playing back an animation clip. Also works for a list of animation clips.
[#](https://www.soft8soft.com/docs/manual/en/puzzles/Animation.html#pause_animation)
**"pause animation"**
Pauses an animation clip playback so that it can be resumed later starting from the frame it was paused on. Also works for a list of animation clips.
[#](https://www.soft8soft.com/docs/manual/en/puzzles/Animation.html#resume_animation)
**"resume animation"**
Resumes a previously paused animation clip. Also works for a list of animation clips.
[#](https://www.soft8soft.com/docs/manual/en/puzzles/Animation.html#set_animation_frame)
**"set animation frame"**
Sets an animation clip to a specified frame. Also works for a list of animation clips.
[#](https://www.soft8soft.com/docs/manual/en/puzzles/Animation.html#is_animation_playing)
**"is animation playing"**
Checks if an animation clip (or any of animations in a list) is currently being played back.
[#](https://www.soft8soft.com/docs/manual/en/puzzles/Animation.html#get_animation)
**"get animation"**
Retrieves a specified object's animation clip. Also works for a list of objects, a group (or a list of groups) or with the [all objects](https://www.soft8soft.com/docs/manual/en/puzzles/Selectors.html#all_objects) puzzle. The return value is always a list of animation clips (even if there is only one of them).
[#](https://www.soft8soft.com/docs/manual/en/puzzles/Animation.html#animate_param)
**"animate param"**
Animates a numeric parameter (or all parameters in a list or a [dictionary](https://www.soft8soft.com/docs/manual/en/puzzles/Dictionaries.html)) in between **from** and **to**, during a period specified with **duration** (in seconds). The **easing** dropdown allows you to specify the animation mode (see below).
The **repeat** field specifies the number of repetitions after the first animation is complete. The **yoyo** checkbox enables backtrack movement (works for **repeat** > 1).
Puzzles in the **on update do** slot are triggered every rendering frame while the parameter is animated. Puzzles in the **when finished do** slot are triggered once the animation is finished.
This puzzle wraps the [Tween.js](https://github.com/tweenjs/tween.js/blob/master/docs/user_guide.md) library, exposing its all [31 easing modes](http://tweenjs.github.io/tween.js/examples/03_graphs.html) (pictured), duration, repeat and yoyo settings, and the update and complete callbacks.
The in-between value may be retrieved with an [updated value](https://www.soft8soft.com/docs/manual/en/puzzles/Animation.html#updated_value) puzzle usually placed inside the **on update do** slot.
[#](https://www.soft8soft.com/docs/manual/en/puzzles/Animation.html#updated_value)
**"updated value"**
Returns the in-between value produced by the [animate param](https://www.soft8soft.com/docs/manual/en/puzzles/Animation.html#animate_param) puzzle. Depending on the type of the animated parameter, can be a number, a list or a [dictionary](https://www.soft8soft.com/docs/manual/en/puzzles/Dictionaries.html).
This puzzle may be placed anywhere in a scenario, but naturally works in the **on update do** slot of the [animate param](https://www.soft8soft.com/docs/manual/en/puzzles/Animation.html#animate_param) puzzle where it is updated every frame.
# Camera
The puzzles from this category perform operations with the camera.
[#](https://www.soft8soft.com/docs/manual/en/puzzles/Camera.html#look_at)
**"look at"**
Smoothly animates the active camera so that it finally targets a specified object. The numeric parameter specifies the time period over which the animation is performed (in seconds).
[#](https://www.soft8soft.com/docs/manual/en/puzzles/Camera.html#tween_camera)
**"tween camera"**
Smoothly animates the active camera so that its position finally coincides with the position of a specified object, and the camera targets another specified object. The numeric parameter specifies the time period for the animation (in seconds).
The optional **when finished do** slot may be used to detect the moment when the tweening is finished.
[#](https://www.soft8soft.com/docs/manual/en/puzzles/Camera.html#set_active_camera)
**"set active camera"**
Makes a specified camera active. This can be used to change camera control mode ("orbit" vs "flying" vs "no controls"), field of view and other settings on the fly.
[#](https://www.soft8soft.com/docs/manual/en/puzzles/Camera.html#get_camera_direction)
**"get camera direction"**
Returns a list of X, Y and Z components of the active camera's world direction vector. If **from mouse/touch** is checked, this puzzle casts a ray from the camera to the cursor's screen position and returns the direction of that ray. If additionaly **inverted**is checked, then the cursor's screen position coordinates are negated.
In the following example, an object looks at the mouse cursor. This can be achived by mapping the position of an empty/dummy object to mouse cursor with some simple math.
In order to setup such behavior in 3ds Max, make your object follow a dummy object by utilizing the **Rotation Controllers / LookAt Constraint**. In Blender, this corresponds to the **TrackTo** constraint.
[#](https://www.soft8soft.com/docs/manual/en/puzzles/Camera.html#autorotate_camera)
**"autorotate camera"**
Smoothly animates the active **Orbit** camera by rotating it around the target.
In the following example, the camera starts to rotate after 3 seconds of user inactivity. When the user clicks a mouse button (or touches the screen), he or she regains the control over the camera until further 3 second period of inactivity.
# Scenes
The puzzles from this category perform loading/unloading operations with scenes.
[#](https://www.soft8soft.com/docs/manual/en/puzzles/Scenes.html#load_scene)
**"load scene" + "percentage"**
When this puzzle is triggered, the current scene is unloaded and a new scene is loaded from a specified .gltf file. After loading is finished, the puzzles in the "when loaded do" slot are triggered. Also there can be enabled the "on progress do" slot. Puzzles placed in this slot are continuously triggered during the loading and can utilize the "percentage" puzzle.
[#](https://www.soft8soft.com/docs/manual/en/puzzles/Scenes.html#append_scene)
**"append scene" + "percentage"**
When this puzzle is triggered, a new scene is loaded from a specified .gltf file and appended to the current scene. After loading is finished, the puzzles in the "when loaded do" slot are triggered. Also there can be enabled the "on progress do" slot. Puzzles placed in this slot are continuously triggered during the loading and can utilize the "percentage" puzzle. The "append scene" puzzle doesn't load cameras and lights from a new scene by default. This behavior can be changed in the puzzle's options.
[#](https://www.soft8soft.com/docs/manual/en/puzzles/Scenes.html#unload_scene)
**"unload scene"**
Unloads the specified scene or its part from the application. Use the empty text value in order to unload all scenes.
[#](https://www.soft8soft.com/docs/manual/en/puzzles/Scenes.html#enable_rendering)
**"enable rendering"**
Resumes previously disabled rendering.
[#](https://www.soft8soft.com/docs/manual/en/puzzles/Scenes.html#disable_rendering)
**"disable rendering"**
Disables rendering. The graphics won't be updated but the user events will be captured and animation timelines will progress.
You can use disable rendering for the purpose of saving batteries on mobile devices or laptops, and getting rid of cooler noise on desktops. You can also use it together with the **supersamping** puzzle to significantly increase the rendering quality and compensate the loss of performance.
# Misc
Miscellaneous puzzles to perform various operations on a high level.
### **"open web page"**
When this puzzle is triggered, a specified URL is opened in a new or in the same browser tab depending on the drop-down selection. When triggered from the Puzzles editor, it will ask for a user confirmation before leaving the tab.
### **"social share link"**
Generates a link for sharing your application in popular social media.
### **"call JS function"**
Executes a function specified in the JavaScript code of the application. Optionally passes parameters to be used as function arguments.
In order to add a function to JavaScript code, open the application **.js** file (for example, my\_awesome\_app.js located in verge3d/applications/my\_awesome\_app) with any text editor. Search for "prepareExternalInterface" and add your function inside that declaration (between the curly brackets), so that it looks like this:`function prepareExternalInterface(app) { app.ExternalInterface.myJSFunction = function(numericArg, textArg) { alert('Got some params from Puzzles: ' + numericArg + ' and ' + textArg); } }`
### **"when called from JS"**
Allows for triggering Puzzles from the JavaScript code of the application. Optionally retrieves parameters passed from the JavaScript code and saves them as variables to be used by puzzles in the "do" slot.
In order to trigger this puzzle from the JavaScript code, open the application **.js** file (for example, my\_awesome\_app.js located in verge3d/applications/my\_awesome\_app) with any text editor. Search for "runCode" and add a function call inside that declaration (between the curly brackets), so that it looks like this:`function runCode(app) { app.ExternalInterface.myJSCallback('Hello, Puzzles!', 80); }`
### **"load data"**
Attempts to load data from a specified location. The puzzles in the "once ready do" slot are interpreted regardless of whether the attempt was a success. The retrieved data can be accessed via the [loaded data](https://www.soft8soft.com/docs/manual/en/puzzles/Misc.html#loaded_data) puzzle.
### **"send data"**
Attempts to send a specified data to a remote location using an asynchronous [POST HTTP](https://en.wikipedia.org/wiki/POST_\(HTTP\)) request. The puzzles in the "once ready do" slot are interpreted regardless of whether the attempt was a success. If there is any response data, it can be accessed via the [loaded data](https://www.soft8soft.com/docs/manual/en/puzzles/Misc.html#loaded_data) puzzle.
### **"loaded data"**
Returns data retrieved by the [load data](https://www.soft8soft.com/docs/manual/en/puzzles/Misc.html#load_data) or [send data](https://www.soft8soft.com/docs/manual/en/puzzles/Misc.html#send_data) puzzles.
### **"read JSON"**
Interprets text as [JavaScript Object Notation](https://en.wikipedia.org/wiki/JSON#Example) data which are returned in a dictionary.
[#](https://www.soft8soft.com/docs/manual/en/puzzles/Misc.html#read_CSV)
### **"read CSV"**
Interprets text as [comma-separated values](https://en.wikipedia.org/wiki/Comma-separated_values#Example). Returns a list of table rows, with each row represented as a list of values. The delimiter can be selected with the drop-down to correspond a CSV file's export settings. "From row" value denotes how many rows will be skipped starting from the top.
Table rows and values are accessed by their numeric indices starting from 0.
### **"save state"**
Saves the state of specified objects and/or the values of variables specified by their names. The objects are cloned and stored in memory. The values of the variables are retrieved and stored in memory for each specified variable name.
If this puzzle is called several times, the states are saved in sequence so that it is possible to return to any previous state with the [undo state](https://www.soft8soft.com/docs/manual/en/puzzles/Misc.html#undo_state) puzzle.
### **"undo state"**
Restores the state of objects and/or variables saved with the [save state](https://www.soft8soft.com/docs/manual/en/puzzles/Misc.html#save_state) puzzle.
If this puzzle is called several times, the states are restored from the saved sequence (if any) which makes it possible to return to any previously saved state from the stack.
### **"all variable names"**
Returns a list with the names of all variables used in Puzzles.
### **"variable value by name"**
Returns the value of a variable specified by its name. This puzzle works similarly to the standard variable value puzzle, yet does not require to select a variable from the predefined dropdown menu.
### **"place order"**
Composes a hidden order form with the "title", "contents" and "total price" fields and an optional screenshot and submits this form to a specified URL according to the specification explicated in the Wordpress Plugin section. By default the order form is submitted to the [demo ordering page](https://sandbox.soft8soft.com/order-form/).
Verge3D comes with a free Wordpress plug-in that is able to handle requests submitted by this puzzle. Upon receiving such a request, this Wordpress plug-in renders a page with an extended form supplemented with contact and comments fields, the embedded screenshot and a captcha. Filled out form is finally submitted by the customer and a new order is created in Wordpress admin interface. Both the customer and the sales manager are notified about the order by e-mail.
Please refer to the Wordpress Plugin section of this Manual for setup information.
Be sure to enable screenshots in the [configure application](https://www.soft8soft.com/docs/manual/en/puzzles/Initialization.html#configure_application) puzzle otherwise the screenshot may be rendered in black.
# Time
These puzzles count time and trigger time-based events.
[#](https://www.soft8soft.com/docs/manual/en/puzzles/Time.html#after)
**"after"**
Waits for a specified amount of time and then triggers puzzles placed inside the "do" slot.
[#](https://www.soft8soft.com/docs/manual/en/puzzles/Time.html#every)
**"every"**
Waits for a specified amount of time and then triggers puzzles placed inside the "do" slot. Then repeats.
[#](https://www.soft8soft.com/docs/manual/en/puzzles/Time.html#every_frame)
**"every frame"**
Triggers puzzles placed inside the "do" slot every rendering frame (normally at the rate of 60 frames per second).
[#](https://www.soft8soft.com/docs/manual/en/puzzles/Time.html#elapsed_delta)
**"elapsed delta"**
Outputs the amount of time (in seconds) passed from the previous rendering frame. Can be used with the "every frame" puzzle to implement frame-independent animation.
[#](https://www.soft8soft.com/docs/manual/en/puzzles/Time.html#elapsed_total)
**"elapsed total"**
Outputs the amount of time (in seconds) passed from the application start. Can be used with the "every frame" puzzle to implement procedural animation and various visual effects.
[#](https://www.soft8soft.com/docs/manual/en/puzzles/Time.html#set_timer)
**"set timer"**
Waits for a specified amount of time and then triggers puzzles placed inside the "do" slot. The specified ID can be used to override or remove the timer.
[#](https://www.soft8soft.com/docs/manual/en/puzzles/Time.html#remove_timer)
**"remove timer"**
Removes a previosly set timer by using its ID.
[#](https://www.soft8soft.com/docs/manual/en/puzzles/Time.html#get_date_time)
**"system date / time"**
Get system date and time. Enable UTC checkbox in order to get time of the UTC/GMT zone instead of the local time zone.
# HTML
These puzzles manipulate HTML DOM elements.
[#](https://www.soft8soft.com/docs/manual/en/puzzles/HTML.html#add_HTML_element)
**"add HTML element"**
Creates an HTML element with a specified [type](https://www.w3schools.com/tags/default.asp) and identifier (corresponds to "id" attribute) and appends it to the document body. Also sets its style property "position" to "absolute".
[#](https://www.soft8soft.com/docs/manual/en/puzzles/HTML.html#get_attribute)
**"get attribute"**
Gets an [attribute](https://www.w3schools.com/tags/ref_attributes.asp) from an HTML element with a specified id. The "in parent doc" checkbox should be enabled if the HTML element is located in an external HTML document (in which Verge3D application's **.html** file is embedded using **iframe**).
[#](https://www.soft8soft.com/docs/manual/en/puzzles/HTML.html#set_attribute)
**"set attribute"**
Sets an [attribute](https://www.w3schools.com/tags/ref_attributes.asp) for an HTML element with a specified id. The "in parent doc" checkbox should be enabled if the HTML element is located in an external HTML document (in which Verge3D application's **.html** file is embedded using **iframe**). Also works with lists of element ids.
[#](https://www.soft8soft.com/docs/manual/en/puzzles/HTML.html#set_style)
**"set style"**
Sets a [CSS property](https://www.w3schools.com/cssref/default.asp) for an HTML element with a specified id. The "in parent doc" checkbox should be enabled if the HTML element is located in an external HTML document (in which Verge3D application's **.html** file is embedded using **iframe**). Also works with lists of element ids.
[#](https://www.soft8soft.com/docs/manual/en/puzzles/HTML.html#set_css_rule)
**"set css rule"**
Sets a [CSS property](https://www.w3schools.com/cssref/default.asp) for a specified CSS rule (found in **.css** files of an application). The "in parent doc" checkbox should be enabled if the style sheets belong to an external HTML document (in which Verge3D application's **.html** file is embedded using **iframe**).
[#](https://www.soft8soft.com/docs/manual/en/puzzles/HTML.html#event)
**"event"**
Registers an [event listener](https://www.w3schools.com/jsref/dom_obj_event.asp) for an HTML element with a specified id. The "in parent doc" checkbox should be enabled if the HTML element is located in an external HTML document (in which Verge3D application's **.html** file is embedded using **iframe**). Once an event occurs, the puzzles placed in the "do" slot are triggered. Also works with lists of element ids.
[#](https://www.soft8soft.com/docs/manual/en/puzzles/HTML.html#get_event_property)
**"get event property"**
Outputs the value of a [property](https://www.w3schools.com/jsref/obj_events.asp) of an event generated by the "event" puzzle.
[#](https://www.soft8soft.com/docs/manual/en/puzzles/HTML.html#window)
**"window"**
Represents the [DOM window object](https://www.w3schools.com/jsref/obj_window.asp) - a browser tab or an iframe to which an HTML document is loaded.
[#](https://www.soft8soft.com/docs/manual/en/puzzles/HTML.html#document)
**"document"**
Represents the [DOM document object](https://www.w3schools.com/jsref/dom_obj_document.asp) - the root node of an HTML document.
[#](https://www.soft8soft.com/docs/manual/en/puzzles/HTML.html#body)
**"body"**
Represents the [DOM body object](https://www.w3schools.com/jsref/dom_obj_body.asp) - the \ element of an HTML document.
[#](https://www.soft8soft.com/docs/manual/en/puzzles/HTML.html#draw_line)
**"draw line"**
Connects a specified 3D object with a specified HTML element by a dynamically updated line. The "in parent doc" checkbox should be enabled if the HTML element is located in an external HTML document (in which Verge3D application's **.html** file is embedded using **iframe**). You can also set the width, color and offset for the line.
[#](https://www.soft8soft.com/docs/manual/en/puzzles/HTML.html#remove_line)
**"remove line"**
Removes a previously created line from a specified object.
[#](https://www.soft8soft.com/docs/manual/en/puzzles/HTML.html#bind_element)
**"bind element"**
Makes a specified HTML element follow the center of a specified 3D object in screen space. The "in parent doc" checkbox should be enabled if the HTML element is located in an external HTML document (in which Verge3D application's **.html** file is embedded using **iframe**). A more customizable variant of the "add annotation" puzzle.
[#](https://www.soft8soft.com/docs/manual/en/puzzles/HTML.html#init_fullscreen)
**"init fullscreen"**
Makes a specified HTML element behave as a fullscreen mode button - the first click on it triggers entering the fullscreen mode, the second click exits fullscreen. Puzzles placed in the "on enter do" and "on exit do" slots are triggered upon entering or exiting the fullscreen mode. Puzzles placed in the "if unavailable do" are triggered if fullscreen is not supported by the browser (e.g. iOS Safari).
[#](https://www.soft8soft.com/docs/manual/en/puzzles/HTML.html#get_url_data)
**"get URL data"**
Retrieves URL data of the window to which an application is loaded:
* **Entire URL** - text, e.g. ""
* **Parameters** - dictionary, e.g. {"image\_url": "
* **Host name** - text, e.g. "[www.example.com](http://www.example.com)"
This puzzle may be useful in situations when the configuration data of an application are stored in its URL. For example, you can specify an image to be used as a texture in the following way:
```
https://www.example.com/my_awesome_app.html?image_url=https://www.uploadserver.com/path/to/image.jpg
```
Then you can retrieve the **image\_url** parameter, load and apply the texture as follows:
See the **Custom Image** demo in your Verge3D distribution for a working example.
[#](https://www.soft8soft.com/docs/manual/en/puzzles/HTML.html#set_url_param)
**"set URL param"**
Assigns or updates a value of a parameter in a specified URL by automatically forming a valid [query string](https://en.wikipedia.org/wiki/Query_string) if necessary, and returns the updated URL.
This puzzle may be useful in situations when the configuration data of an application are stored in its URL. For example, you can specify an image to be used as a texture in the following way:
```
https://www.example.com/my_awesome_app.html?image_url=https://www.uploadserver.com/path/to/image.jpg
```
You can upload a texture, retrieve its server-side path and save it to the **image\_url** parameter of the app URL as follows:
See the **Custom Image** demo in your Verge3D distribution for a working example.
[#](https://www.soft8soft.com/docs/manual/en/puzzles/HTML.html#take_screenshot)
**"take screenshot"**
Takes a screenshot of the viewport and outputs it in [Data URI](https://en.wikipedia.org/wiki/Data_URI_scheme#Examples_of_use) format.
[#](https://www.soft8soft.com/docs/manual/en/puzzles/HTML.html#open_file)
**"open file" and "opened file"**
Invokes the browser's native dialog window for selecting files from the user's device. Once the user have selected a file, returns the file's contents in [Data URI](https://en.wikipedia.org/wiki/Data_URI_scheme#Examples_of_use) format.
# AR/VR
# Sound
# Physics
# Post-processing
# Dictionaries
# Variables
# Procedures
# System
# Library
# 编程基础
Programming Basics 待校订
本节的目的是简要介绍Verge3D。我们将首先使用旋转立方体设置场景。页面底部提供了一个工作示例，以防您遇到困难并需要帮助。
### 在我们开始之前
在使用Verge3D之前，您需要在某处显示它。将以下HTML保存到计算机上的文件中，并在应用程序目录中保存Verge3D副本，然后在浏览器中打开它。` My first Verge3D app `就这样。下面的所有代码都进入空的\ `
# 矩阵变换
Matrix Transformations 待校订
Verge3D使用**矩阵**编码3D变换 - 平移（位置），旋转和缩放。Object3D的每个实例都有一个矩阵，用于存储该对象的位置，旋转和缩放。本页介绍如何更新对象的转换。
### 便利性和**matrixAutoUpdate**
有两种方法可以更新对象的转换：
1. 修改对象的**位置**，**四元数**和**缩放**属性，让Verge3D从这些属性中重新计算对象的矩阵： 默认情况下，**matrixAutoUpdate**属性设置为true，矩阵将自动重新计算。如果对象是静态的，或者您希望在重新计算时手动控制，则可以通过将属性设置为false来获得更好的性能： 在更改任何属性后，手动更新矩阵：`object.position.copy(start_position); object.quaternion.copy(quaternion);object.matrixAutoUpdate = false;object.updateMatrix();`
2. 直接修改对象的矩阵。该Matrix4类有修改矩阵的各种方法： 注意**matrixAutoUpdate** *必须*设置为**假**在这种情况下，你应该确保*不*调用**updateMatrix**。调用**updateMatrix**将破坏对矩阵所做的手动更改，从**位置**，**比例等**重新计算矩阵。`object.matrix.setRotationFromQuaternion(quaternion); object.matrix.setPosition(start_position); object.matrixAutoUpdate = false;`
### 对象和世界矩阵
对象的矩阵存储对象*相*对于对象父级的转换; 要在*世界*坐标中获取对象的变换，您必须访问对象的Object3D.matrixWorld。
当父对象或子对象的转换发生更改时，您可以通过调用updateMatrixWorld（）来请求更新子对象的matrixWorld。
### 旋转和四元数
Verge3D提供了两种表示3D旋转的方法：欧拉角和四元数，以及两者之间的转换方法。欧拉角受到称为“万向节锁定”的问题，其中某些配置可能失去一定程度的自由度（防止物体绕一个轴旋转）。因此，对象旋转*始终*存储在对象的四元数中。
该库的**早期**版本包含一个**useQuaternion**属性，当设置为false时，将导致从Euler角度计算对象的矩阵。这种做法已被弃用 - 相反，您应该使用setRotationFromEuler方法，该方法将更新四元数。
# 动画系统
Animation System 待校订
### 概观
在Verge3D动画系统中，您可以为模型的各种属性设置动画：蒙皮和装配模型的骨骼， 变形目标，不同材质属性（颜色，不透明度，布尔值），可见性和变换。动画属性可以淡入，淡出，交叉淡化和扭曲。可以独立地改变同一对象以及不同对象上的不同同时动画的权重和时间尺度。可以同步在相同和不同对象上的各种动画。\
\
为了在一个同类系统中实现所有这一切，Verge3D动画系统 [在2015年彻底改变了](https://github.com/mrdoob/three.js/issues/6881) （注意过时的信息！），它现在有一个类似于Unity /虚幻引擎4的架构。这个页面简要概述了系统的主要组件以及它们如何协同工作。
#### 动画片段
如果您已成功导入动画3D对象（如果它具有骨骼或变形目标或两者都无关紧要） - 例如，使用Blender导出器将其从Blender导出并使用GLTFLoader将其加载到Verge3D场景中，其中一个几何体加载网格的属性应该是一个名为“animations”的数组，其中包含此模型的AnimationClips（请参阅下面的可能加载器列表）。\
\
每个**AnimationClip**通常保存对象的某个活动的数据。例如，如果网格是一个角色，则可能有一个动作剪辑用于步行循环，第二个用于跳跃，第三个用于回避等等。
#### 关键帧轨道
在这样的**AnimationClip**内部，每个动画属性的数据存储在单独的KeyframeTrack中。假设一个角色对象有一个骨架，一个关键帧轨道可以存储下臂骨骼随时间的位置变化的数据，一个不同的轨道用于相同骨骼的旋转变化的数据，第三个是轨道位置，旋转或缩放另一个骨头，等等。应该清楚的是，AnimationClip可以由许多这样的轨道组成。\
\
假设模型具有变形目标（例如，一个变形目标显示友好的面部，另一个显示愤怒的面部），每个轨道保存有关影响的信息 在剪辑的执行期间某个变形目标的变化。
#### 动画混音器
存储的数据仅构成动画的基础 - 实际播放由AnimationMixer控制。你可以想象这不仅仅是一个动画播放器，而是一个模拟硬件，如真正的调音台控制台，它可以同时控制几个动画，混合和合并它们。
#### 动画动作
该**AnimationMixer**本身只有很少的（一般）属性和方法，因为它可以通过控制AnimationActions。通过配置 **AnimationAction，**您可以确定某个**AnimationClip**何时应在其中一个混音器上播放，暂停或停止，是否必须重复剪辑，是否应该使用淡入淡出或时间缩放，以及其他的东西，例如交叉淡化或同步。
#### 动画对象组
如果希望一组对象接收共享动画状态，则可以使用 AnimationObjectGroup。
#### 支持的格式和加载器
请注意，并非所有模型格式都包含动画（特别是OBJ），并且只有一些Verge3D加载器支持AnimationClip序列。有几个是做 支持这种动画类型：
* v3d.JSONLoader
* v3d.ObjectLoader
* v3d.BVHLoader
* v3d.ColladaLoader
* v3d.FBXLoader
* v3d.GLTFLoader
* v3d.MMDLoader
* v3d.SEA3DLoader
请注意，3ds max和Maya当前无法将多个动画（即不在同一时间轴上的动画）直接导出到单个文件。
### 例
`var mesh; // Create an AnimationMixer, and get the list of AnimationClip instances var mixer = new v3d.AnimationMixer(mesh); var clips = mesh.animations; // Update the mixer on each frame function update () { mixer.update(deltaSeconds); } // Play a specific animation var clip = v3d.AnimationClip.findByName(clips, 'dance'); var action = mixer.clipAction(clip); action.play(); // Play all animations clips.forEach(function(clip) { mixer.clipAction(clip).play(); });`
# 创建文本
Creating Text 待校订
有时您可能需要在Verge3D应用程序中使用文本 - 这里有几种方法可以执行此操作。
### 1. DOM + CSS
使用HTML通常是添加文本最简单，最快捷的方式。这是大多数Verge3D示例中用于描述性叠加的方法。
您可以向a添加内容`
### 物料 所有制服值都可以自由更改（例如颜色，纹理，不透明度等），每帧都会将值发送到着色器。 此外，GLstate相关参数可以随时更改（depthTest，blend，polygonOffset等）。 平滑/平滑的阴影被烘焙成法线。您需要重置法线缓冲区（见上文）。 在运行时无法轻松更改以下属性（一旦材质至少呈现一次）： * 制服的数量和类型 * 数字和灯的类型 * 存在与否 * 质地 * 多雾路段 * 顶点颜色 * 剥皮 * 变形 * 阴影贴图 * 阿尔法测试 这些变化需要构建新的着色器程序。你需要设置`material.needsUpdate = true` 请记住，这可能会非常缓慢并导致帧率的急动（特别是在Windows上，因为着色器编译在DirectX中比OpenGL慢）。 为了获得更流畅的体验，您可以通过“虚拟”值（如零强度灯，白色纹理或零密度雾）在一定程度上模拟这些功能的变化。 您可以自由更改用于几何块的材质，但是无法更改对象如何划分为块（根据面材）。 #### 如果您需要在运行时使用不同的材料配置： 如果材料/块的数量很少，您可以事先预先划分物体（例如，人的头发/脸部/身体/上衣/裤子，前部/侧面/顶部/玻璃/轮胎/内部用于汽车）。 如果数量很大（例如，每个面可能有所不同），请考虑使用不同的解决方案，例如使用属性/纹理来驱动不同的每个面部外观。 #### 例子： [WebGL /材料/汽车](https://cdn.soft8soft.com/demo/examples/index.html#webgl_materials_cars)\ [WebGL / webgl\_postprocessing / dof](https://cdn.soft8soft.com/demo/examples/index.html#webgl_postprocessing_dof) ### 纹理 如果更改了图像，画布，视频和数据纹理，则需要设置以下标志：`texture.needsUpdate = true;` 渲染目标会自动更新。 #### 例子： [WebGL /材料/视频](https://cdn.soft8soft.com/demo/examples/index.html#webgl_materials_video)\ [WebGL / rtt](https://cdn.soft8soft.com/demo/examples/index.html#webgl_rtt) ### 相机 相机的位置和目标会自动更新。如果你需要改变 * FOV * 方面 * 近 * 远 那么你需要重新计算投影矩阵：`camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix();` # 约定 Conventions 待校订 ### 约定汇总表  ### Conventions Summary Table  # 获取资源 How to Obtain Sources 待校订 ## 如何获取Verge3D源 完整的Verge3D源代码作为Verge3D Enterprise软件包的一部分提供（请参阅[本页](https://www.soft8soft.com/licensing/)的许可证比较图表）。 但是，由于Verge3D基于开源的Three.js框架，因此可以仅使用[GitHub上托管的](https://github.com/mrdoob/three.js) Three.js源来掌握其API和内部结构。 如果您在使用任何API方法时遇到困难，请查看Verge3D [示例应用程序](https://cdn.soft8soft.com/demo/examples/index.html)或咨询Soft8Soft [论坛](https://www.soft8soft.com/forums/)上的Verge3D开发人员和社区。 # Animation # AnimationAction ## AnimationAction AnimationActions调度存储在AnimationClips中的动画的表现。\ 注意：大多数AnimationAction的方法都可以链接。\ 有关Verge3D动画系统的不同元素的概述，请参阅本手册“后续步骤”部分中的“动画系统”一文。 ### 构造函数 #### AnimationAction(mixer : AnimationMixer, clip : AnimationClip, localRoot : Object3D) mixer - the **AnimationMixer** that is controlled by this action.\ clip - the **AnimationClip** that holds the animation data for this action.\ localRoot - the root object on which this action is performed.\ \ 注意：不应直接调用此构造函数，而应使用AnimationMixer.clipAction实例化AnimationAction，因为此方法提供了缓存以获得更好的性能。 ### 属性 #### #.clampWhenFinished : Boolean If **clampWhenFinished** is set to true the animation will automatically be paused on its last frame.\ \ 如果**clampWhenFinished**设置为false，则在操作的最后一个循环结束时，enabled将自动切换为false，因此该操作不会产生进一步的影响。\ \ 默认值为false。\ \ Note: **clampWhenFinished** has no impact if the action is interrupted (it has only an effect if its last loop has really finished). #### #.enabled : Boolean Setting **enabled** to **false** disables this action, so that it has no impact. Default is **true**.\ \ When the action is re-enabled, the animation continues from its current time (setting **enabled** to **false** doesn't reset the action).\ \ Note: Setting **enabled** to **true** doesn’t automatically restart the animation. Setting **enabled** to **true** will only restart the animation immediately if the following condition is fulfilled: paused is **false**, this action has not been deactivated in the meantime (by executing a stop or reset command), and neither weight nor timeScale is 0. #### #.loop : Number The looping mode (can be changed with setLoop). Default is v3d.LoopRepeat (with an infinite number of repetitions)\ \ Must be one of these constants:\ \ v3d.LoopOnce - playing the clip once,\ v3d.LoopRepeat - playing the clip with the choosen number of **repetitions**, each time jumping from the end of the clip directly to its beginning,\ v3d.LoopPingPong - playing the clip with the choosen number of **repetitions**, alternately playing forward and backward. #### #.paused : Boolean Setting **paused** to **true** pauses the execution of the action by setting the effective time scale to 0. Default is **false**.\
#### #.repetitions : Number The number of repetitions of the performed AnimationClip over the course of this action. Can be set via setLoop. Default is **Infinity**.\ \ Setting this number has no effect, if the loop mode is set to v3d.LoopOnce. #### #.time : Number The local time of this action (in seconds, starting with 0).\ \ The value gets clamped or wrapped to 0...clip.duration (according to the loop state). It can be scaled relativly to the global mixer time by changing timeScale (using setEffectiveTimeScale or setDuration).
#### #.timeScale : Number Scaling factor for the time. A value of 0 causes the animation to pause. Negative values cause the animation to play backwards. Default is 1.\ \ Properties/methods concerning **timeScale** (respectively **time**) are: getEffectiveTimeScale, halt, paused, setDuration,setEffectiveTimeScale, stopWarping, syncWith, warp. #### #.timeStart : Number The local start time for this action (in seconds). Use with AnimationClip.duration to set the playback range.\
#### #.weight : Number The degree of influence of this action (in the interval \[0, 1]). Values between 0 (no impact) and 1 (full impact) can be used to blend between several actions. Default is 1. \ \ Properties/methods concerning **weight** are: crossFadeFrom, crossFadeTo, enabled, fadeIn, fadeOut, getEffectiveWeight,setEffectiveWeight, stopFading. #### #.zeroSlopeAtEnd : Boolean Enables smooth interpolation without separate clips for start, loop and end. Default is **true**. #### #.zeroSlopeAtStart : Boolean Enables smooth interpolation without separate clips for start, loop and end. Default is **true**. ### 方法 #### #.crossFadeFrom (fadeOutAction : AnimationAction, durationInSeconds : Number, warpBoolean : Boolean) : AnimationAction Causes this action to fade in, fading out another action simultaneously, within the passed time interval. This method can be chained.\ \ If warpBoolean is true, additional warping (gradually changes of the time scales) will be applied.\ \ Note: Like with **fadeIn**/**fadeOut**, the fading starts/ends with a weight of 1. #### #.crossFadeTo (fadeInAction : AnimationAction, durationInSeconds : Number, warpBoolean : Boolean) : AnimationAction Causes this action to fade out, fading in another action simultaneously, within the passed time interval. This method can be chained.\ \ If warpBoolean is true, additional warping (gradually changes of the time scales) will be applied.\ \ Note: Like with **fadeIn**/**fadeOut**, the fading starts/ends with a weight of 1. #### #.fadeIn (durationInSeconds : Number) : AnimationAction Increases the weight of this action gradually from 0 to 1, within the passed time interval. This method can be chained. #### #.fadeOut (durationInSeconds : Number) : AnimationAction Decreases the weight of this action gradually from 1 to 0, within the passed time interval. This method can be chained. #### #.getEffectiveTimeScale () : Number Returns the effective time scale (considering the current states of warping and paused). #### #.getEffectiveWeight () : number Returns the effective weight (considering the current states of fading and enabled). #### #.getClip () : AnimationClip Returns the clip which holds the animation data for this action. #### #.getMixer () : AnimationMixer Returns the mixer which is responsible for playing this action. #### #.getRoot () : Object3D Returns the root object on which this action is performed. #### #.halt (durationInSeconds : Number) : AnimationAction Decelerates this animation's speed to 0 by decreasing timeScale gradually (starting from its current value), within the passed time interval. This method can be chained. #### #.isRunning () : Boolean Returns true if the action’s time is currently running.\ \ In addition to being activated in the mixer (see isScheduled) the following conditions must be fulfilled: paused is equal to false, enabled is equal to true, timeScale is different from 0, and there is no scheduling for a delayed start (startAt).\ \ Note: **isRunning** being true doesn’t necessarily mean that the animation can actually be seen. This is only the case, if weight is additionally set to a non-zero value. #### #.isScheduled () : Boolean Returns true, if this action is activated in the mixer.\ \ Note: This doesn’t necessarily mean that the animation is actually running (compare the additional conditions for isRunning). #### #.play () : AnimationAction Tells the mixer to activate the action. This method can be chained.\ \ Note: Activating this action doesn’t necessarily mean that the animation starts immediately: If the action had already finished before (by reaching the end of its last loop), or if a time for a delayed start has been set (via startAt), a reset must be executed first. Some other settings (paused=true, enabled=false, weight=0, timeScale=0) can prevent the animation from playing, too. #### #.reset () : AnimationAction Resets the action. This method can be chained.\ \ This method sets paused to false, enabled to true, time to 0, interrupts any scheduled fading and warping, and removes the internal loop count and scheduling for delayed starting.\ \ Note: .**reset** is always called by stop, but .**reset** doesn’t call .**stop** itself. This means: If you want both, resetting and stopping, don’t call .**reset**; call .**stop** instead. #### #.setDuration (durationInSeconds : Number) : AnimationAction Sets the duration for a single loop of this action (by adjusting timeScale and stopping any scheduled warping). This method can be chained. #### #.setEffectiveTimeScale (timeScale : Number) : AnimationAction Sets the timeScale and stops any scheduled warping. This method can be chained.\ \ If paused is false, the effective time scale (an internal property) will also be set to this value; otherwise the effective time scale (directly affecting the animation at this moment) will be set to 0.\ \ Note: .**paused** will not be switched to **true** automatically, if .**timeScale** is set to 0 by this method. #### #.setEffectiveWeight (weight : Number) : AnimationAction Sets the weight and stops any scheduled fading. This method can be chained.\ \ If enabled is true, the effective weight (an internal property) will also be set to this value; otherwise the effective weight (directly affecting the animation at this moment) will be set to 0.\ \ Note: .**enabled** will not be switched to **false** automatically, if .**weight** is set to 0 by this method. #### #.setLoop (loopMode : Number, repetitions : Number) : AnimationAction Sets the loop mode and the number of repetitions. This method can be chained. #### #.startAt (startTimeInSeconds : Number) : AnimationAction Defines the time for a delayed start (usually passed as AnimationMixer.time + deltaTimeInSeconds). This method can be chained.\ \ Note: The animation will only start at the given time, if .**startAt** is chained with play, or if the action has already been activated in the mixer (by a previous call of .**play**, without stopping or resetting it in the meantime). #### #.stop () : AnimationAction Tells the mixer to deactivate this action. This method can be chained.\ \ The action will be immediately stopped and completely reset.\ \ Note: You can stop all active actions on the same mixer in one go via mixer.stopAllAction. #### #.stopFading () : AnimationAction Stops any scheduled fading which is applied to this action. This method can be chained. #### #.stopWarping () : AnimationAction Stops any scheduled warping which is applied to this action. This method can be chained. #### #.syncWith (otherAction : AnimationAction) : AnimationAction Synchronizes this action with the passed other action. This method can be chained.\ \ Synchronizing is done by setting this action’s time and timeScale values to the corresponding values of the other action (stopping any scheduled warping).\ \ Note: Future changes of the other action's **time** and **timeScale** will not be detected. #### #.warp (startTimeScale : Number, endTimeScale : Number, durationInSeconds : Number) : AnimationAction Changes the playback speed, within the passed time interval, by modifying timeScale gradually from **startTimeScale** to **endTimeScale**. This method can be chained. ### 事件 There are two events indicating when a single loop of the action respectively the entire action has finished. You can react to them with:`mixer.addEventListener('loop', function(e) { …}); // properties of e: type, action and loopDelta mixer.addEventListener('finished', function(e) { …}); // properties of e: type, action and direction` ### 资源 有关如何获取此模块源代码的详细信息，请参阅[此页面](http://www.soft8soft.com/docs/manual/en/introduction/How-to-obtain-Verge3D-sources.html)。 # AnimationClip # AnimationMixer # AnimationObjectGroup # AnimationUtils # KeyframeTrack # PropertyBinding # PropertyMixer # Animation / Tracks # BooleanKeyframeTrack # ColorKeyframeTrack # NumberKeyframeTrack # QuaternionKeyframeTrack # StringKeyframeTrack # VectorKeyframeTrack # Application # App # AppPuzzles # AppUtils # Audio # Audio # AudioAnalyser # AudioContext # AudioListener # PositionalAudio # Cameras # ArrayCamera # Camera # CubeCamera # OrthographicCamera # PerspectiveCamera # StereoCamera # Constants # Animation # Core # CustomBlendingEquation # DrawModes # DrawModes # Materials --- [Next Page](/llms-full.txt/1)
Description
`
并使用CSS标记绝对位于所有其他位置的z-index位置，尤其是在运行Verge3D全屏时。`#info { position: absolute; top: 10px; width: 100%; text-align: center; z-index: 100; display:block; }`
### 2.将文本绘制到画布并用作纹理
如果您希望在Verge3D场景中的平面上轻松绘制文本，请使用此方法。
### 3.在您喜欢的3D应用程序中创建模型并导出到Verge3D
如果您更喜欢使用3d应用程序并将模型导入Verge3D，请使用此方法
### 4.程序文本几何
如果您更喜欢纯粹在v3d.js中工作或创建过程和动态3D文本几何，则可以创建一个几何为v3d.TextGeometry实例的网格：
`new v3d.TextGeometry(text, parameters);`
但是，为了使其工作，TextGeometry将需要在其“font”参数上设置v3d.Font的实例。有关如何执行此操作的详细信息，每个接受参数的说明以及v3d.js分发本身附带的JSON字体列表，请参阅TextGeometry页面。
#### 例子
[WebGL /几何/文本](https://cdn.soft8soft.com/demo/examples/index.html#webgl_geometry_text)\
[WebGL / shadowmap](https://cdn.soft8soft.com/demo/examples/index.html#webgl_shadowmap)
如果Typeface已关闭，或者您想要使用不存在的字体，那么有一个带有blender的python脚本的教程，允许您将文本导出为Verge3D的JSON格式：[http](http://www.jaanga.com/2012/03/blender-to-threejs-create-3d-text-with.html)： [//www.jaanga.com/2012/03 /blender-to-threejs-create-3d-text-with.html](http://www.jaanga.com/2012/03/blender-to-threejs-create-3d-text-with.html)
### 5.位图字体
BMFonts（位图字体）允许将字形批处理为单个BufferGeometry。BMFont渲染支持自动换行，字母间距，字距调整，带标准导数的带符号距离场，多通道有符号距离场，多纹理字体等。请参阅[three-bmfont-text](https://github.com/Jam3/three-bmfont-text)。
库存字体在[A-Frame Fonts](https://github.com/etiennepinchon/aframe-fonts)等项目中可用 ，或者您可以从任何.TTF字体创建自己的字体，优化以仅包括项目所需的字符。
一些有用的工具：
* [msdf-bmfont-web ](http://msdf-bmfont.donmccurdy.com/)（基于网络）
* [msdf-bmfont-xml ](https://github.com/soimy/msdf-bmfont-xml)（命令行）
* [hiero ](https://github.com/libgdx/libgdx/wiki/Hiero)（桌面应用）
# 绘制线条
Drawing Lines 待校订
假设您要绘制直线或圆，而不是线框网格。首先，我们需要设置渲染器，场景和相机（请参阅创建场景页面）。
这是我们将使用的代码：`var renderer = new v3d.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); var camera = new v3d.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 500); camera.position.set(0, 0, 100); camera.lookAt(0, 0, 0); var scene = new v3d.Scene();`
接下来我们要做的是定义一种材料。对于行，我们必须使用LineBasicMaterial或LineDashedMaterial。`//create a blue LineBasicMaterial var material = new v3d.LineBasicMaterial({ color: 0x0000ff });`
在材质之后，我们需要一个带有一些顶点的Geometry或BufferGeometry（建议使用BufferGeometry，因为它更高效，但为了简单起见，我们将在这里使用Geometry）：`var geometry = new v3d.Geometry(); geometry.vertices.push(new v3d.Vector3(-10, 0, 0)); geometry.vertices.push(new v3d.Vector3(0, 10, 0)); geometry.vertices.push(new v3d.Vector3(10, 0, 0));`
请注意，在每对连续的顶点之间绘制线条，但不在第一个和最后一个顶点之间绘制线条（线条未关闭）。
现在我们有两条线和一条材料的点，我们可以将它们组合在一起形成一条线。`var line = new v3d.Line(geometry, material);`
剩下的就是将它添加到场景中并调用渲染。`scene.add(line); renderer.render(scene, camera);`
你现在应该看到一个向上的箭头，由两条蓝线组成。
# 更新事物
How to Update Things 待校订
## 如何用代码更新事物
默认情况下，所有对象都会自动更新它们的矩阵（如果它们已添加到场景中）`var object = new v3d.Object3D(); scene.add(object);`或者如果它们是已添加到场景中的另一个对象的子节点：`var object1 = new v3d.Object3D(); var object2 = new v3d.Object3D(); object1.add(object2); scene.add(object1); //object1 and object2 will automatically update their matrices`
但是，如果您知道对象将是静态的，则可以禁用此选项并在需要时手动更新转换矩阵。`object.matrixAutoUpdate = false; object.updateMatrix();`
### 几何形状
#### BufferGeometry
BufferGeometries存储信息（如顶点位置，面指数，法线，色彩，UV的，并且任何自定义属性）在缓冲液 -即， [类型化数组](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays)。这使得它们通常比标准几何图形更快，但代价是更难以使用。
关于更新BufferGeometries，最重要的是要理解你无法调整缓冲区的大小（这非常昂贵，基本上相当于创建一个新的几何体）。但是，您可以更新缓冲区的内容。
这意味着如果您知道BufferGeometry的属性将增长（例如顶点数），则必须预先分配足够大的缓冲区以容纳可能创建的任何新顶点。当然，这也意味着BufferGeometry将有一个最大大小 - 没有办法创建一个可以无限期有效扩展的BufferGeometry。
我们将使用在渲染时扩展的行的示例。我们将在缓冲区中为500个顶点分配空间，但最初只使用BufferGeometry.drawRange绘制两个顶点。`var MAX_POINTS = 500; // geometry var geometry = new v3d.BufferGeometry(); // attributes var positions = new Float32Array(MAX_POINTS * 3); // 3 vertices per point geometry.addAttribute('position', new v3d.BufferAttribute(positions, 3)); // draw range var drawCount = 2; // draw the first 2 points, only geometry.setDrawRange(0, drawCount); // material var material = new v3d.LineBasicMaterial({ color: 0xff0000, linewidth: 2 }); // line var line = new v3d.Line(geometry, material); scene.add(line);`
接下来，我们将使用以下模式随机向线条添加点：`var positions = line.geometry.attributes.position.array; var x, y, z, index; x = y = z = index = 0; for (var i = 0, l = MAX_POINTS; i < l; i++) { positions[index ++] = x; positions[index ++] = y; positions[index ++] = z; x += (Math.random() - 0.5) * 30; y += (Math.random() - 0.5) * 30; z += (Math.random() - 0.5) * 30; }`
如果要更改第一次渲染后渲染*的点数*，请执行以下操作：`line.geometry.setDrawRange(0, newValue);`
如果要在第一次渲染后更改位置数据值，则需要设置needsUpdate标志，如下所示：`line.geometry.attributes.position.needsUpdate = true; // required after the first render`
如果在初始渲染后更改位置数据值，则可能需要调用\`.computeBoundingSphere（）\`以重新计算几何的边界球。`line.geometry.computeBoundingSphere();`
[这是一个小提琴，](http://jsfiddle.net/w67tzfhx/)显示一个动画线，你可以适应你的用例。
#### 例子：
[WebGL / custom / attributes ](https://cdn.soft8soft.com/demo/examples/index.html#webgl_custom_attributes)\
[WebGL / buffergeometry / custom / attributes / particles](https://cdn.soft8soft.com/demo/examples/index.html#webgl_buffergeometry_custom_attributes_particles)
#### 几何
以下标志控制各种几何属性的更新。仅为需要更新的属性设置标志，更新成本很高。缓冲区更改后，这些标志会自动重置为false。如果要继续更新缓冲区，则需要将它们设置为true。请注意，这仅适用于Geometry 而不适用于BufferGeometry。`var geometry = new v3d.Geometry(); geometry.verticesNeedUpdate = true; geometry.elementsNeedUpdate = true; geometry.morphTargetsNeedUpdate = true; geometry.uvsNeedUpdate = true; geometry.normalsNeedUpdate = true; geometry.colorsNeedUpdate = true; geometry.tangentsNeedUpdate = true;`
在[r66](https://github.com/mrdoob/three.js/releases/tag/r66)网格之前的版本中，还需要启用*动态*标志（以保持内部类型化数组）：`//removed after r66 geometry.dynamic = true;`
#### 例子：
[WebGL /几何/动态](https://cdn.soft8soft.com/demo/examples/index.html#webgl_geometry_dynamic)### 物料 所有制服值都可以自由更改（例如颜色，纹理，不透明度等），每帧都会将值发送到着色器。 此外，GLstate相关参数可以随时更改（depthTest，blend，polygonOffset等）。 平滑/平滑的阴影被烘焙成法线。您需要重置法线缓冲区（见上文）。 在运行时无法轻松更改以下属性（一旦材质至少呈现一次）： * 制服的数量和类型 * 数字和灯的类型 * 存在与否 * 质地 * 多雾路段 * 顶点颜色 * 剥皮 * 变形 * 阴影贴图 * 阿尔法测试 这些变化需要构建新的着色器程序。你需要设置`material.needsUpdate = true` 请记住，这可能会非常缓慢并导致帧率的急动（特别是在Windows上，因为着色器编译在DirectX中比OpenGL慢）。 为了获得更流畅的体验，您可以通过“虚拟”值（如零强度灯，白色纹理或零密度雾）在一定程度上模拟这些功能的变化。 您可以自由更改用于几何块的材质，但是无法更改对象如何划分为块（根据面材）。 #### 如果您需要在运行时使用不同的材料配置： 如果材料/块的数量很少，您可以事先预先划分物体（例如，人的头发/脸部/身体/上衣/裤子，前部/侧面/顶部/玻璃/轮胎/内部用于汽车）。 如果数量很大（例如，每个面可能有所不同），请考虑使用不同的解决方案，例如使用属性/纹理来驱动不同的每个面部外观。 #### 例子： [WebGL /材料/汽车](https://cdn.soft8soft.com/demo/examples/index.html#webgl_materials_cars)\ [WebGL / webgl\_postprocessing / dof](https://cdn.soft8soft.com/demo/examples/index.html#webgl_postprocessing_dof) ### 纹理 如果更改了图像，画布，视频和数据纹理，则需要设置以下标志：`texture.needsUpdate = true;` 渲染目标会自动更新。 #### 例子： [WebGL /材料/视频](https://cdn.soft8soft.com/demo/examples/index.html#webgl_materials_video)\ [WebGL / rtt](https://cdn.soft8soft.com/demo/examples/index.html#webgl_rtt) ### 相机 相机的位置和目标会自动更新。如果你需要改变 * FOV * 方面 * 近 * 远 那么你需要重新计算投影矩阵：`camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix();` # 约定 Conventions 待校订 ### 约定汇总表  ### Conventions Summary Table  # 获取资源 How to Obtain Sources 待校订 ## 如何获取Verge3D源 完整的Verge3D源代码作为Verge3D Enterprise软件包的一部分提供（请参阅[本页](https://www.soft8soft.com/licensing/)的许可证比较图表）。 但是，由于Verge3D基于开源的Three.js框架，因此可以仅使用[GitHub上托管的](https://github.com/mrdoob/three.js) Three.js源来掌握其API和内部结构。 如果您在使用任何API方法时遇到困难，请查看Verge3D [示例应用程序](https://cdn.soft8soft.com/demo/examples/index.html)或咨询Soft8Soft [论坛](https://www.soft8soft.com/forums/)上的Verge3D开发人员和社区。 # Animation # AnimationAction ## AnimationAction AnimationActions调度存储在AnimationClips中的动画的表现。\ 注意：大多数AnimationAction的方法都可以链接。\ 有关Verge3D动画系统的不同元素的概述，请参阅本手册“后续步骤”部分中的“动画系统”一文。 ### 构造函数 #### AnimationAction(mixer : AnimationMixer, clip : AnimationClip, localRoot : Object3D) mixer - the **AnimationMixer** that is controlled by this action.\ clip - the **AnimationClip** that holds the animation data for this action.\ localRoot - the root object on which this action is performed.\ \ 注意：不应直接调用此构造函数，而应使用AnimationMixer.clipAction实例化AnimationAction，因为此方法提供了缓存以获得更好的性能。 ### 属性 #### #.clampWhenFinished : Boolean If **clampWhenFinished** is set to true the animation will automatically be paused on its last frame.\ \ 如果**clampWhenFinished**设置为false，则在操作的最后一个循环结束时，enabled将自动切换为false，因此该操作不会产生进一步的影响。\ \ 默认值为false。\ \ Note: **clampWhenFinished** has no impact if the action is interrupted (it has only an effect if its last loop has really finished). #### #.enabled : Boolean Setting **enabled** to **false** disables this action, so that it has no impact. Default is **true**.\ \ When the action is re-enabled, the animation continues from its current time (setting **enabled** to **false** doesn't reset the action).\ \ Note: Setting **enabled** to **true** doesn’t automatically restart the animation. Setting **enabled** to **true** will only restart the animation immediately if the following condition is fulfilled: paused is **false**, this action has not been deactivated in the meantime (by executing a stop or reset command), and neither weight nor timeScale is 0. #### #.loop : Number The looping mode (can be changed with setLoop). Default is v3d.LoopRepeat (with an infinite number of repetitions)\ \ Must be one of these constants:\ \ v3d.LoopOnce - playing the clip once,\ v3d.LoopRepeat - playing the clip with the choosen number of **repetitions**, each time jumping from the end of the clip directly to its beginning,\ v3d.LoopPingPong - playing the clip with the choosen number of **repetitions**, alternately playing forward and backward. #### #.paused : Boolean Setting **paused** to **true** pauses the execution of the action by setting the effective time scale to 0. Default is **false**.\
#### #.repetitions : Number The number of repetitions of the performed AnimationClip over the course of this action. Can be set via setLoop. Default is **Infinity**.\ \ Setting this number has no effect, if the loop mode is set to v3d.LoopOnce. #### #.time : Number The local time of this action (in seconds, starting with 0).\ \ The value gets clamped or wrapped to 0...clip.duration (according to the loop state). It can be scaled relativly to the global mixer time by changing timeScale (using setEffectiveTimeScale or setDuration).
#### #.timeScale : Number Scaling factor for the time. A value of 0 causes the animation to pause. Negative values cause the animation to play backwards. Default is 1.\ \ Properties/methods concerning **timeScale** (respectively **time**) are: getEffectiveTimeScale, halt, paused, setDuration,setEffectiveTimeScale, stopWarping, syncWith, warp. #### #.timeStart : Number The local start time for this action (in seconds). Use with AnimationClip.duration to set the playback range.\
#### #.weight : Number The degree of influence of this action (in the interval \[0, 1]). Values between 0 (no impact) and 1 (full impact) can be used to blend between several actions. Default is 1. \ \ Properties/methods concerning **weight** are: crossFadeFrom, crossFadeTo, enabled, fadeIn, fadeOut, getEffectiveWeight,setEffectiveWeight, stopFading. #### #.zeroSlopeAtEnd : Boolean Enables smooth interpolation without separate clips for start, loop and end. Default is **true**. #### #.zeroSlopeAtStart : Boolean Enables smooth interpolation without separate clips for start, loop and end. Default is **true**. ### 方法 #### #.crossFadeFrom (fadeOutAction : AnimationAction, durationInSeconds : Number, warpBoolean : Boolean) : AnimationAction Causes this action to fade in, fading out another action simultaneously, within the passed time interval. This method can be chained.\ \ If warpBoolean is true, additional warping (gradually changes of the time scales) will be applied.\ \ Note: Like with **fadeIn**/**fadeOut**, the fading starts/ends with a weight of 1. #### #.crossFadeTo (fadeInAction : AnimationAction, durationInSeconds : Number, warpBoolean : Boolean) : AnimationAction Causes this action to fade out, fading in another action simultaneously, within the passed time interval. This method can be chained.\ \ If warpBoolean is true, additional warping (gradually changes of the time scales) will be applied.\ \ Note: Like with **fadeIn**/**fadeOut**, the fading starts/ends with a weight of 1. #### #.fadeIn (durationInSeconds : Number) : AnimationAction Increases the weight of this action gradually from 0 to 1, within the passed time interval. This method can be chained. #### #.fadeOut (durationInSeconds : Number) : AnimationAction Decreases the weight of this action gradually from 1 to 0, within the passed time interval. This method can be chained. #### #.getEffectiveTimeScale () : Number Returns the effective time scale (considering the current states of warping and paused). #### #.getEffectiveWeight () : number Returns the effective weight (considering the current states of fading and enabled). #### #.getClip () : AnimationClip Returns the clip which holds the animation data for this action. #### #.getMixer () : AnimationMixer Returns the mixer which is responsible for playing this action. #### #.getRoot () : Object3D Returns the root object on which this action is performed. #### #.halt (durationInSeconds : Number) : AnimationAction Decelerates this animation's speed to 0 by decreasing timeScale gradually (starting from its current value), within the passed time interval. This method can be chained. #### #.isRunning () : Boolean Returns true if the action’s time is currently running.\ \ In addition to being activated in the mixer (see isScheduled) the following conditions must be fulfilled: paused is equal to false, enabled is equal to true, timeScale is different from 0, and there is no scheduling for a delayed start (startAt).\ \ Note: **isRunning** being true doesn’t necessarily mean that the animation can actually be seen. This is only the case, if weight is additionally set to a non-zero value. #### #.isScheduled () : Boolean Returns true, if this action is activated in the mixer.\ \ Note: This doesn’t necessarily mean that the animation is actually running (compare the additional conditions for isRunning). #### #.play () : AnimationAction Tells the mixer to activate the action. This method can be chained.\ \ Note: Activating this action doesn’t necessarily mean that the animation starts immediately: If the action had already finished before (by reaching the end of its last loop), or if a time for a delayed start has been set (via startAt), a reset must be executed first. Some other settings (paused=true, enabled=false, weight=0, timeScale=0) can prevent the animation from playing, too. #### #.reset () : AnimationAction Resets the action. This method can be chained.\ \ This method sets paused to false, enabled to true, time to 0, interrupts any scheduled fading and warping, and removes the internal loop count and scheduling for delayed starting.\ \ Note: .**reset** is always called by stop, but .**reset** doesn’t call .**stop** itself. This means: If you want both, resetting and stopping, don’t call .**reset**; call .**stop** instead. #### #.setDuration (durationInSeconds : Number) : AnimationAction Sets the duration for a single loop of this action (by adjusting timeScale and stopping any scheduled warping). This method can be chained. #### #.setEffectiveTimeScale (timeScale : Number) : AnimationAction Sets the timeScale and stops any scheduled warping. This method can be chained.\ \ If paused is false, the effective time scale (an internal property) will also be set to this value; otherwise the effective time scale (directly affecting the animation at this moment) will be set to 0.\ \ Note: .**paused** will not be switched to **true** automatically, if .**timeScale** is set to 0 by this method. #### #.setEffectiveWeight (weight : Number) : AnimationAction Sets the weight and stops any scheduled fading. This method can be chained.\ \ If enabled is true, the effective weight (an internal property) will also be set to this value; otherwise the effective weight (directly affecting the animation at this moment) will be set to 0.\ \ Note: .**enabled** will not be switched to **false** automatically, if .**weight** is set to 0 by this method. #### #.setLoop (loopMode : Number, repetitions : Number) : AnimationAction Sets the loop mode and the number of repetitions. This method can be chained. #### #.startAt (startTimeInSeconds : Number) : AnimationAction Defines the time for a delayed start (usually passed as AnimationMixer.time + deltaTimeInSeconds). This method can be chained.\ \ Note: The animation will only start at the given time, if .**startAt** is chained with play, or if the action has already been activated in the mixer (by a previous call of .**play**, without stopping or resetting it in the meantime). #### #.stop () : AnimationAction Tells the mixer to deactivate this action. This method can be chained.\ \ The action will be immediately stopped and completely reset.\ \ Note: You can stop all active actions on the same mixer in one go via mixer.stopAllAction. #### #.stopFading () : AnimationAction Stops any scheduled fading which is applied to this action. This method can be chained. #### #.stopWarping () : AnimationAction Stops any scheduled warping which is applied to this action. This method can be chained. #### #.syncWith (otherAction : AnimationAction) : AnimationAction Synchronizes this action with the passed other action. This method can be chained.\ \ Synchronizing is done by setting this action’s time and timeScale values to the corresponding values of the other action (stopping any scheduled warping).\ \ Note: Future changes of the other action's **time** and **timeScale** will not be detected. #### #.warp (startTimeScale : Number, endTimeScale : Number, durationInSeconds : Number) : AnimationAction Changes the playback speed, within the passed time interval, by modifying timeScale gradually from **startTimeScale** to **endTimeScale**. This method can be chained. ### 事件 There are two events indicating when a single loop of the action respectively the entire action has finished. You can react to them with:`mixer.addEventListener('loop', function(e) { …}); // properties of e: type, action and loopDelta mixer.addEventListener('finished', function(e) { …}); // properties of e: type, action and direction` ### 资源 有关如何获取此模块源代码的详细信息，请参阅[此页面](http://www.soft8soft.com/docs/manual/en/introduction/How-to-obtain-Verge3D-sources.html)。 # AnimationClip # AnimationMixer # AnimationObjectGroup # AnimationUtils # KeyframeTrack # PropertyBinding # PropertyMixer # Animation / Tracks # BooleanKeyframeTrack # ColorKeyframeTrack # NumberKeyframeTrack # QuaternionKeyframeTrack # StringKeyframeTrack # VectorKeyframeTrack # Application # App # AppPuzzles # AppUtils # Audio # Audio # AudioAnalyser # AudioContext # AudioListener # PositionalAudio # Cameras # ArrayCamera # Camera # CubeCamera # OrthographicCamera # PerspectiveCamera # StereoCamera # Constants # Animation # Core # CustomBlendingEquation # DrawModes # DrawModes # Materials --- [Next Page](/llms-full.txt/1)