# 拼图进阶 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)搭建。

疑问?

请在钉钉群:21935218交流。群内除聚集众多开发者,还有最新动态、视频教程、智能客服@宅小呗、答疑、直播、下载等实用功能。如需宅家呗提供技术支持,请加钉钉好友:zjbcool

Verge3D知识社区 客服
上次更新: 2020-10-20 19:43:26