宅家呗

# 拼图进阶 Pro

下列拼图通常涉及开发中的一些高级操作，教程在《用户手册-拼图参考》基础上进一步扩展，结合案例讲解实用的开发技术。

购买进阶课

# Scenes拼图

Scenes拼图用于控制场景的动态加载，控制场景的渲染，控制场景的环境；另外，在优化程序性能上，这些拼图有着特殊作用。

# 1.动态加载场景 18'17''

结合load_unload案例分析，介绍场景替换、附加、卸载及场景加载器的实现。拼图：load scene、append scene、unload scene、percentage

  • 动态加载场景(1) 1'54''
  • 动态加载场景(2) 2'40''
  • 动态加载场景(3) 3'9''
  • 动态加载场景(4) 4'54''
  • 动态加载场景(5) 3'47''
  • 动态加载场景(6) 1'53''

# 2.开启/禁用渲染 4'44''

临时禁用渲染可以节省性能和提高渲染质量。拼图：enable rendering、disable rendering

  • 开启/禁用渲染 4'44''

# 3.动态创建环境 7'32''

创建环境拼图用于动态修改背景颜色、环境贴图、HDR照明，以及实现一个glTF查看器。拼图：create environment

  • 动态创建环境(1) 2'14''
  • 动态创建环境(2) 2'7''
  • 动态创建环境(3) 3'11''

# 4.射线检测拼图 10'7''

射线检测是WebGL中重要的功能，Verge3D 3.4版中加入该拼图后可以实现很多高级功能。视频介绍了raycast拼图的基础用法和实现双击、右键等三维事件。

  • raycast拼图(1) 5'55''
  • raycast拼图(2) 4'12''
  • raycast拼图(3) 3'19''

# HTML拼图

课程介绍了对于3D美术和设计人员如何学习HTML分类下涉及的前端知识；并将HTML分类下的拼图分为3类，分别通过案例演示介绍如何组合使用；最后介绍了动态操作DOM的典型应用场景。

# 1. HTML拼图介绍 4'44''

HTML类别的拼图可以分成三类：DOM操作拼图、2D和3D结合拼图、BOM操作拼图。对于HTML初学者可以现用现查，学习案例。

视频

# 2. 动态操作页面元素 13'5''

在拼图中动态创建一个按钮，用3种方式修改其样式，获取和修改其属性，最后实现通过按钮控制材质的功能。相关拼图：add HTML element,get attribute,set attribute,set style,set css rule,event,get event property,query selector...

# 3. 动态绑定页面元素 4'25''

相关拼图：draw line,remove line,bind element,add annotation(添加注释拼图，object分类)

# 4. 浏览器操作 8'56''

涉及全屏功能，操作URL参数，截屏功能，打开本地文件，相关拼图：init fullscreen,get URL data,set URL param,take screenshot,open file and opened file

# 5. 应用案例 7'24''

模拟从数据库获取数据，动态创建下拉菜单组件，实现通过菜单选项控制三维元素。 附案例源文件。

# Physics拼图

物理拼图用于实现游戏引擎的功能，可以模拟重力环境、碰撞检测、运动约束等功能，可用于游戏、VR/AR、仿真程序开发。本课程案例通过FPS相机结合物理模块实现了一个第一人称的小球发射场景，通过案例介绍物理模块拼图功能和用法，并介绍了v3d 3.1.1版新增的vector拼图、get dir拼图等新特性。

# 1. 物理拼图介绍 2'8''

课程介绍，学习方式及案例演示。

视频

# 2. 初始化和创建碰撞体 4'45''

介绍初始化物理引擎的参数和碰撞体的几种类型。

# 3. 应用矢量 4'8''

介绍在物理环境下如何控制碰撞体的运动。

# 4. 复杂矢量运算 5'

矢量用于为物理碰撞体施加力，这里介绍了通过矢量运算为物体添加一个相机水平方向的力。

# 5. 优化碰撞检测 6'8''

优化碰撞效果的设置。发射小球案例。

# 6. FPS相机与物理模块结合 1'48

第一人称的小球发射场景。

附演示案例2个

# System拼图

System分类下的拼图用于实现代码调试、性能调试、设备功能检测、系统信息、游戏外设支持等方面的功能。以下视频介绍这些功能的实际应用场景，包括移动端显示效果优化，HiDPI/Retina高清屏适配。

# 1. 代码调试和性能调试 5'7''

介绍Verge3D自带的测试工具。V3D 3.2更新有相关更新，详见更新日志。

# 2. 多设备支持和显示优化 4'29''

在不同型号的移动设备上优化渲染效果，包括移动端常见的抗锯齿问题。

# 3. 游戏手柄支持和游戏手柄检测工具 6'32''

Verge3D对游戏手柄的支持，相关拼图：detect gamepad device，gamepad index，get gamepad property。

# Advanced拼图

Advanced分类下的拼图用于实现一些高级操作，如向服务器发起AJAX请求，加载和解析TXT、HTML、JSON、CSV数据格式，在拼图中调用JS函数，undo功能，社交分享功能等。课程中结合实例演示了上述功能，重点讲解了get、post请求，顺带讲解了通过调用js函数实现雾效。本节课有助于深入理解拼图功能和应用场景。

verge3d 3.3版该分类由Misc改名为Advanced

# 1. 一键分享到微博

自带的社交分享功能。

视频

# 2. 从拼图调用JS函数 5'31''

拼图的功能毕竟有限，我们可以在拼图中调用JS中定义的函数，这样极大扩展了拼图的开发能力。

# 3. 从服务器和外部加载数据 9'26''

相关拼图：load data，loaded data，read JSON

# 4. 从CSV文件中读取数据 5'3''

相关拼图：read CSV

# 5. 向服务器发起POST请求 3'9''

相关拼图：send data

# 6. 实现撤消操作 5'21''

相关拼图：save state，undo state，all variable names，variable value by name。

# 7. exec script拼图 8'56''

exec script拼图提供了一种新的在Verge3D中使用JavaScript的方式，由于它既是一段代码又是一个拼图，在使用上非常灵活，模糊了拼图编程和代码编程的界线。

  • exec script拼图(1) 5'50''
  • rexec script拼图(2) 3'6''

# E-Commerce拼图

Verge3D有一个强大的功能，它能够不写代码就能实现一个wordpress (opens new window)的3D购物网站，本节课将通过实现一个3D座椅案例，介绍电商分类下拼图的使用，以及实现一个3D电商网站的完整步骤。

# 1. 电商拼图介绍和准备工作 2'31''

Verge3D的Wordpress插件和WooCommerce实现3D电商。

案例演示 (opens new window)。

# 2. 新建商品和添加商品属性 3'45''

在Wordpress电商网站后台创建商品和添加用于Verge3D应用的商品属性。

# 3. 创建应用和接收商品属性 4'5''

相关拼图：connect to WooCommerce，product info，product attribute

# 4. 上传应用和嵌入商品页面 3'18''

介绍Verge3D插件如何在Wordpress后台上传和管理应用程序。

# 5. 手动生成表单 5'23''

不依赖WooCommerce，生成订单表单。

补充：关于搭建wordpress网站方面的知识，请在电商专题下学习。 本地开发环境使用PHP study (opens new window)搭建。

上次更新: 2020/10/20 下午7:43:26

← 案例教学 →