跳到主要内容

96 篇文档带有标签「tutorial」

查看所有标签

360 度环视相机

使用鼠标和触摸旋转相机,创建全景或第一人称查看体验。

暗角与色差

在后处理通道中通过暗角压暗图像边缘,同时分离颜色通道以产生轻微色差。

捕获截图

将相机渲染到纹理并导出 PNG 像素,支持应用截图分享。

车辆物理

使用 Ammo 的射线检测车轮、悬挂和转向驱动车辆,同时支持桌面、移动端和 WebXR。

程序化渐变纹理

通过代码生成渐变纹理并应用到材质,无需导入位图即可实现平滑的颜色过渡。

橙色房间

探索结合动态反射与烘焙 HDR 光照贴图的室内建筑可视化示例,了解逼真的光照和材质。

冲击波

使用后处理着色器为帧缓冲区添加径向冲击波扭曲,表现撞击和电影式相机脉冲效果。

代码创建刚体

完全通过脚本生成带碰撞和刚体的实体,实现程序化物理对象。

地球

结合地球纹理、材质和着色器,实时呈现风格化的球形天体。

第三人称控制器

使用跟随相机追踪可控制的角色,处理输入和物理行为,构建基本的第三人称移动系统。

点击移动

通过屏幕到世界的射线检测,使角色或对象移动到点击的地面位置,实现简单导航。

定时器

扩展引擎以支持延时触发回调的单次定时器,并通过时间缩放响应全局暂停。

对象淡入淡出

动画控制材质不透明度,让独立模型淡入淡出,无需复制几何体或材质。

多点触控输入

跟踪所有活动触点,并通过绘制手指之间的连线将多点触控手势可视化。

多视口渲染

调整各相机矩形,将画布拆分为画中画或分屏视图。

多相机图层

组合相机与图层,在同一场景混合屏幕 UI 与世界空间元素。

分辨率缩放

通过分离世界与叠加界面的渲染流程,降低内部三维分辨率以提高性能,同时保持屏幕空间界面清晰。

广告牌

让平面始终面向相机,适合树木、光晕和精灵。

环绕相机

使用鼠标和触摸绕焦点实体环绕,支持滚轮与双指缩放。

环形加载界面

使用材质和动画实现环形加载指示器,在内容加载期间提供清晰反馈。

加载 Draco 压缩的 GLB

在 PlayCanvas 中通过正确的加载流程使用 Draco 压缩的 GLB 模型,减小网格体积并确保正常渲染。

加载 glTF GLB

在运行时将 glTF GLB 文件作为二进制资源加载,并将生成的模型实例添加到 PlayCanvas 场景层级。

检测双击

通过计时检测双击,移动相机或触发桌面浏览器操作。

检测长按

测量鼠标或触摸按住时间,达到时长后触发操作。

简单水面

通过滚动法线和带菲涅耳着色的材质近似表现风格化水面,制作简单的反射表面。

教程:布局组

使用 Layout Group 与子元素布局规则排列按钮和面板,构建自适应的 PlayCanvas 界面。

井字棋

制作可玩的三维井字棋棋盘,在小型示例游戏中实现回合处理、胜负检测和界面反馈。

静态批处理

通过批处理将静态网格合并为更少的绘制调用,降低 CPU 开销,提高静止几何体的渲染效率。

平滑相机运动

每帧用向量 lerp 和四元数 slerp 平滑过渡位置与朝向,形成电影镜头运动。

平面镜面反射

通过反射着色器通道将场景投影到平面,为镜子和水面渲染平面反射。

燃烧火球

粒子火球跟随指针,实现魔法投射物与拖尾。

使用 GLSL 扭曲精灵

在自定义 GLSL 着色器中扭曲精灵 UV,制作波浪或鼓起效果,无需每帧重建网格几何体。

使用连续碰撞检测

为刚体启用连续碰撞检测,避免高速投射物在物理步之间穿过薄碰撞体。

使用曲线控制音量

对曲线数据进行采样以驱动声音槽位的音量,使用预设的变化曲线控制响度。

使用鼠标旋转对象

将鼠标在屏幕空间中的拖动增量映射为旋转四元数或欧拉角,逐帧旋转对象。

使用物理系统放置实体

通过对地面进行射线检测,在点击的世界位置生成带物理功能的物体,使新刚体正确参与碰撞。

锁定鼠标

点击时请求指针锁定,隐藏光标并捕获鼠标移动,以控制第一人称相机视角。

太空陨石!

派生一个小行星风格的射击游戏模板,通过鼠标瞄准、射击和一波波陨石了解街机游戏流程。

相机模型遮罩

使用相机和灯光遮罩,让特定灯光与视图只影响选定模型。

相机沿路径移动

沿途经点构成的样条移动相机,实现飞行漫游和引导式镜头运动。

信息热点

通过射线检测和屏幕叠加层,在三维视图中放置可点击并打开信息面板的热点。

移动端界面安全区域

将屏幕界面布局在刘海屏和圆角设备的安全区域内,避免控件被系统栏和屏幕开孔遮挡。

在脚本中使用事件

通过在实体或应用上触发和监听自定义事件解耦脚本,实现模块化的游戏消息通信。

在运行时加载资源

按需加载单个资源,使未使用的资源在脚本请求之前不占用初始预加载列表。

在运行时切换材质

通过代码替换渲染组件上的材质资源,改变颜色、着色器或外观,无需复制网格实体。

在最上层渲染世界空间界面

调整世界空间 Element 面板的渲染层级,使界面四边形在不透明几何体之后绘制,在复杂三维场景中仍清晰可读。

暂停和恢复应用

通过切换 Application 的 timeScale 暂停和恢复游戏,使物理、动画和基于时间的逻辑一起停止。

帧率计数器

添加轻量 FPS 叠加脚本,用于开发监控和性能调优。

Flappy Bird

重现点击飞行、管道和计分的紧凑玩法示例。

HTML/CSS 界面

在 WebGL 画布上叠加标准 HTML/CSS,构建 HUD 与菜单。

VHS/CRT 后处理效果

在全屏通道中叠加扫描线、画面滚动和色彩渗漏,模拟带噪声的 VHS 录像和弯曲的 CRT 显示器。

WebXR 逼真手部

将精细网格和材质绑定到跟踪的手部关节,使沉浸式 VR 会话中的手指动作清晰可辨。

WebXR 跟踪控制器

通过 PlayCanvas WebXR 模板中的姿态、按钮和触觉反馈入门代码,在 VR 中跟踪六自由度控制器。

WebXR 全景视频

在 WebXR 会话中播放全景视频,让头戴设备用户在周围视频播放时自由转动视角。

WebXR 全景图像

在 WebXR 虚拟现实中查看等距柱状投影的全景照片,让用户环顾沉浸式球形背景。

WebXR 入门示例

从配置好 WebXR 相机和会话生命周期回调的最简场景进入沉浸式 VR,并在此基础上扩展。

WebXR 手部跟踪

读取 WebXR 手部跟踪的关节姿态,在场景中同步手指运动,实现无需控制器的自然直接操作。

WebXR AR 形状射线检测

在 AR 会话中对 PlayCanvas 网格进行射线检测,使用户能够在透视相机画面中点击虚拟形状。

WebXR AR:命中测试

使用 WebXR 命中测试 API 向真实世界几何体发射射线,将虚拟对象放置在检测到的地板和桌面上。

WebXR AR:图像跟踪

使用 WebXR 图像跟踪扩展在增强现实中跟踪打印的参考图像,并将三维内容对齐到图像姿态。

WebXR AR:DOM 叠加层

结合 WebXR AR 与 DOM 叠加层 API,在相机画面上方显示带样式的 HTML/CSS 界面,无需自定义 WebGL 文字。

WebXR VR 实验室

探索持续维护的 VR 试验项目,了解适用于不同 XR 设备的可扩展交互模式和自适应布局。

WebXR:平面检测

订阅 WebXR 平面检测更新,可视化估算的地板与桌面,将内容锚定到真实表面。