# 通用技术

下列内容是一些经常被咨询的问题,以及对《用户手册-通用》章节的内容扩展,建议先阅读手册再来学习本教程。

购买进阶课

# 实用技术

# 如何优雅地实现开关切换功能?4'57''

这是很多编程语言中常用的编程技巧,通过对变量取非实现真假值的切换。类似技巧有很多,掌握它们能够极大提高开发效率,还能体会觅得捷径的喜悦。

视频

# 如何优雅地为模型指定多个材质?6'12''

对重复的操作进行抽象和简化是基本的编程思维,简洁的代码能让你在维护时更舒心。

视频

# 如何在网页游戏中添加switch手柄支持?6'45''

Verge3D支持大多数标准游戏手柄,这里以switch手柄为例介绍如何实现。

视频

# 当指定材质时如何实现颜色过渡效果?7'35''

点击按钮为模型改变颜色时,添加颜色过渡效果可以增强用户体验,这里介绍了一种实现方式。

视频

# 如何实现游戏中的迷你导航地图?18'51''

介绍了游戏中导航地图的实现方式,结合FPS相机实现了漫游效果。

视频

# 如何实现可拖拽电线效果?9'48''

该效果可用于交互式物理教学课件,原理演示。

视频

# 如何优雅地实现计数器功能?7'2''

计数器在很多组件中用到,如轮播图。

视频

# 将Verge3D应用程序嵌入到微信小程序4'4''

微信内置浏览器基于chromin内核,支持Verge3D应用,教程从微信开发角度介绍如何实现嵌入,还介绍了一些存在的问题和解决方法。注:效果演示视频中的小程序已不可用。

视频

# 将Verge3D应用程序打包成安卓apk 9'17''

Verge3D应用作为HTML网页程序,是可以嵌入到安卓应用程序中的,但是部署安卓开发环境过于繁琐。本视频介绍了一种简单易行的方案。

# 应该掌握的几个控制程序动画的技巧 7'33''

这里介绍了使用拼图实现程序动画的一些技巧,及一些拼图背后的原理。涉及时间和动画分类下的拼图。

# 如何为一组物体添加拖拽事件——理解事件的执行 4'47''

when dragged拼图无法直接对一组物体实现批量的可拖拽效果,但是你也不需要单独为每个物体添加拖拽事件,这里介绍了两种批量实现方式。

# 相机自动适配窗口 9'12''

这个视频讲解如何让相机自动适配浏览器窗口大小,这个问题是很重要的,比如在移动设备上,我们需要根据设备尺寸采用不同的构图方式,保持饱满的构图。

# 修改Verge3D应用

# 1.自定义加载器

自定义加载器课程对于HTML/CSS初学者提供了简便直观的实现方法,降低了学习难度;如果有一定前端基础,这里还演示了手写加载器的实现过程。

  • 修改Verge3D应用-自定义加载器(1) 1'18''
  • 修改Verge3D应用-自定义加载器(2) 6'34''
  • 修改Verge3D应用-自定义加载器(3) 1'48''
  • 修改Verge3D应用-自定义加载器(4) 4'13''
  • 修改Verge3D应用-自定义加载器(5) 4'35''

# 2.修改背景

使用默认的环境设置可以得到纯色背景,但是它也存在一些问题,这里介绍了一些更加灵活有效的方法,可以轻松实现纯色、渐变、图片背景。

  • 修改Verge3D应用-纯色背景 2'11''
  • 修改Verge3D应用-渐变背景 3'30''
  • 修改Verge3D应用-图片和透明背景 1'51''
  • 动态创建环境

# 3.全屏按钮、注释和自定义模板

将前面所做的个性设置保存为自定义模板,在新建项目时继承模板的设置,避免重复性的工作。

  • 修改Verge3D应用-全屏按钮(见拼图进阶4浏览器操作
  • 修改Verge3D应用-注释(见拼图进阶3动态绑定页面元素)
  • 修改Verge3D应用-将个性化设置保存为模板 3'34''
  • 修改Verge3D应用-修改自定义注释的定位点 3'55''

# 优化技术

用户手册中多处涉及优化技术,应将所有技术结合起来,综合运用。

# 1.影响性能的主要因素 4'20''

材质数量、贴图数量、复杂程序纹理和后期效果是影响性能的主要因素。

# 2.性能指标 3'31''

了解如何查看程序的性能,从哪些方面优化性能。

# 3.启用LZMA压缩 2'29''

启用压缩是最简单也是最有效的优化方式,但要在合适的时候开启。

# 4.glTF2.0兼容材质 3'

什么是标准glTF2.0,和Verge3D gltf有什么区别?

# 5.纯色渐变色材质优化 1'53''

当场景中存在很多纯色、渐变化材质时,这种方式很有效。

# 6.贴图优化 2'26''

贴图要尽量控制数量,同时提高利用率,这里介绍了一些常用方式。

# 7.动态加载场景

Verge3D对场景、贴图、背景都提供了相应的动态加载能力,这有助于减少程序初次加载时间。参见拼图进阶-动态加载场景

# 8.开启/禁用渲染

暂时禁用渲染,可以提高画面质量,同时优化性能。参见拼图进阶-开启/禁用渲染

# 使用JavaScript

拼图能满足大多数常用需求,但实际开发中往往要应付各种个性化需求,这时候需要使用JavaScript扩展Verge3D应用的功能。如何在Verge3D应用中使用JavaScript,请看视频教程,或参阅用户手册Call JS function

# 1.添加拾色器组件10'26''

HTML默认拾色器样式过于朴素,不同设备上样式不一致,而自己订制一个成本又太高,这里推荐一个外观现代并且可订制化,功能强大的拾色器组件——Pickr,本视频重点介绍如何在Verge3D应用内集成Pickr。

知识点:Pickr样式,事件,配置

源码下载

视频

# 2.【文章】添加虚拟摇杆组件

在移动设备上控制物体的移动,一个比较理想的解决方案就是实现虚拟摇杆功能。nipplejs.js 是一个流行的虚拟摇杆组件库,本视频讲解如何在Verge3D应用内集成该组件。

知识点:在JS中调用拼图函数,渲染回调函数renderCallbacks()

案例程序:查看

购买进阶课

可免费获得教程附赠的案例源文件。

视频

# 常用交互功能 录制中

# 1. 键盘控制

# 2.实现吸附模型表面功能

视频讲解如何获取模型点击位置的坐标。

https://i0.hdslb.com/bfs/album/ae59d49b67fc3cc28b825848659b541490f9641f.gif@518w_1e_1c.gif

# 3.实现点击地面传送功能

在上个教程基础上,进一步实现相机传送功能。

疑问?

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

Verge3D知识社区 客服
上次更新: 2020-9-16 11:18:28