3D建模 Cocos Creator:WebXR 项目配置 推荐:将NSDT场景编辑器加入你的3D工具链 3D工具集:NSDT简石数字孪生 WebXR 项目配置 WebXR 项目的创建和普通XR项目创建流程保持一致。 若需要创建沉浸式虚拟现实(VR)体验的工程,可以参考 VR 项目创建。 若需要创建沉浸式增强现实(AR)体验的工程,可以参考 AR 项目创建。 部署完毕之后需要为 XR Agent 节点添加 cc.WebXRSessionController 组件,组件位置为:XR > Device > WebXRSessionController。 根据需要选择默认 Session Mode: * IMMERSIVE_AR:Session 将独占访问沉浸式 XR 设备,渲染的内容将与现实世界的环境混合在一起。 * IMMERSIVE_VR:Session 对场景的渲染不会被被覆盖或融入现实环境。 * INLINE:3D 内容输出在标准 HTML 文档的元素上下文中内联显示,
3D建模 Cocos Creator:AR 项目构建与发布 推荐:将NSDT场景编辑器加入你的3D工具链 3D工具集:NSDT简石数字孪生 AR 项目构建与发布 完成 AR 应用的项目设置并完成项目开发之后,即可打包 AR 应用。点击 菜单栏 -> 项目 -> 构建发布。 ARCore、AREngine 针对于安卓和华为平台的手机发布 AR 应用,新建构建任务,平台选择 安卓。 填写应用 ID 并勾选 Enable AR,连接好移动端设备后点击 构建 -> 生成 -> 运行 即可一键发布 AR 应用。 注意:安卓平台 AR 应用的渲染后端不支持 VULKAN。 ARKit iOS发布需要的各项配置属性请参考 iOS 平台构建选项,需要在
3D建模 Cocos Creator:AR 项目创建 推荐:将NSDT场景编辑器加入你的3D工具链 3D工具集:NSDT简石数字孪生 AR 项目创建 参照以下步骤完成对项目的 AR 相关特性配置。 以下提供三种方法,可以任选一种来配置扩展或直接打开内置 AR 项目。 方法一:将 xr-plugin 应用到项目 在 Cocos Store 中搜索 xr-plugin,获取扩展并安装,具体安装说明请参考 说明。 安装完毕后将扩展添加至对应工程。 这种方式适合为存量 3D 项目做 XR 模式迁移。 方法二:创建 AR 模板工程 Dashboard 中新建项目,编辑器版本选择 v3.7.1 或更高,模板类别下选择 Empty(AR Mobile) 进行创建。 打开项目,进入 scene
3D建模 Cocos Creator:VR 项目构建与发布 推荐:将NSDT场景编辑器加入你的3D工具链 3D工具集:NSDT简石数字孪生 VR 项目构建与发布 当项目开发完成后,需要将项目打包到对应的平台上,在菜单栏中选中 项目 -> 构建发布 打开构建发布面板,通过 发布平台 属性下的下拉框中选择目标平台: 属性 构建通用属性可以参考:构建选项介绍。 目前支持的 VR 设备都采用了安卓系统,开发者需搭建对应的开发环境,详情可参考 安装配置原生开发环境。 XR专用构建属性描述如下: Rendering Scale:渲染分辨率。 MSAA:调整多重采样抗锯齿等级。 Remote Preview:启用无限投屏预览。 Foveation Level:调整注视点渲染等级,级别越高时 GPU 负载越低,但双目渲染纹理边缘分辨率也会降低。(注:1、注视点渲染采用 OpenXR 通用接口,若设备 FFR 功能未对接 OpenXR
3D建模 Cocos Creator:VR 项目创建 推荐:将NSDT场景编辑器加入你的3D工具链 3D工具集:NSDT简石数字孪生 VR 项目创建 Cocos CreatorXR 支持用户使用以下几种方式快速创建 VR 项目。 注意:创建 XR 项目时务必保证编辑器版本 >= 3.6.1。 使用模板新建 VR 项目:在 Cocos Dashboard 中新建项目时,选择 v3.6.1 及以上的编辑器(若需要体验完整功能,引擎请选择v3.7.1及以上的版本),选择 Empty(VR) 模板创建。 使用案例体验学习创建 VR 项目:在 Cocos Dashboard 中新建项目,选择 v3.6.1 及以上的编辑器(
3D建模 Cocos Creator:AR 交互 推荐:将NSDT场景编辑器加入你的3D工具链 3D工具集:NSDT简石数字孪生 AR 交互 AR 交互主要由 cc.ScreenTouchInteractor 组件驱动,该组件将触摸事件转换为点击、拖拽和捏合等手势,交互器将这些手势传递给可以交互的虚拟交互物,完成手势对应触发的行为。 手势交互 AR 手势交互器组件将屏幕触摸转换为手势。Cocos Creator 的输入系统将手势信号传递给交互物,然后交互物响应手势事件发生变换行为。交互物能发生交互行为的前提是必须绑定 cc.Selectable 组件,关于此组件的属性描述详见交互组件 Selectable。 想要使用 屏幕手势交互器,在层级管理器中右键创建 XR -> Screen Touch Interactor 。 随意创建一个 3D 物体(以 Cube 为例)。 修改 Cube 的 Scale 属性为(0.1,0.
3D建模 Cocos Creator:AR 自动化行为编辑 推荐:将NSDT场景编辑器加入你的3D工具链 3D工具集:NSDT简石数字孪生 AR 自动化行为编辑 AR 场景中,虚拟物体与现实实体间总是存在未知的依赖关系,如果能够清晰方便的描述现实实体的条件特征并针对此种条件执行匹配的行为,可以很大程度上简化开发者处理复杂的 AR 功能特性而专注于编写项目核心逻辑。Cocos CreatorXR 提供了 AR 自动化行为编辑组件,将常用的物理特征和逻辑行为抽象成元素供开发者自由搭配,图形化的操作极大程度降低了 AR 应用的开发成本和开发门槛。 每种特性的自动化行为编辑组件都有其独特的特征库和行为库,以下介绍了当前版本支持自动化行为的所有 AR 特性: 平面追踪 在编辑器的层级管理器中右键 创建 -> XR -> Plane Tracking,创建平面代理节点,此节点可用于描述物理世界中的某一个平面实体。 选中创建好的 Plane Tracking 节点,在属性检查器中可以看到默认添加好的 cc.ARPlaneTracking,选择 Factor 或 Action 页签可以查看当前已有的特征或行为项。点击 Add
3D建模 Cocos Creator:AR Manager 推荐:将NSDT场景编辑器加入你的3D工具链 3D工具集:NSDT简石数字孪生 AR Manager Cocos CreatorXR 的 AR 模块提供了一个全局管理器,用于收集当前项目使用到的 AR 特性并进行管理,特性管理器中每个特性的属性都是全局属性,调整参数会修改设备相关的或者项目全局的功能。cc.ARManager 默认挂载在 XR Agent 节点上,当您创建 AR 自动化行为节点时,ARManager 会收集此节点到其对应的特性列表中,方便后续管理和维护所有特性节点。 当前版本针对以支持的 AR 特性提供了对应的全局功能属性: 平面追踪特性 当您在场景中创建一个或多个 Plane Tracking 节点,AR Manager 中的 Configuration 会新增 Plane Feature 属性。您可以调整特性下的各项参数,或定位到对应的特性节点。 Direction Type 汇集了当前场景所有平面代理需要识别的平面朝向。 Tracking
3D建模 Cocos Creator:AR 相机 推荐:将NSDT场景编辑器加入你的3D工具链 3D工具集:NSDT简石数字孪生 AR 相机 和头戴显示器一样,场景中为了能够抽象表式移动端设备带有 AR 能力的摄像机,XR 插件使用 AR Camera 组件封装一系列属性来映射物理设备的摄像头 AR 功能。 AR Camera 对象包含三种必要的组件:cc.Camera、cc.PoseTracker和cc.ARCameraMgr。 cc.Camera 是 Cocos Creator 引擎提供的传统的摄像机组件,为了保证良好的体验,推荐将缓冲清除标志位(Clear Flags)设置为 SOLID_COLOR,近裁剪面(Near Plane)设置为0.01。更多相机参数介绍请查阅 相机组件 介绍。 cc.PoseTracker 用于将物理设备的位姿信息同步至 AR
3D建模 Cocos Creator:透视 推荐:将NSDT场景编辑器加入你的3D工具链 3D工具集:NSDT简石数字孪生 透视 透视(Pass Through)的实现方式是通过 XR 设备的摄像头捕捉现实世界的场景,再将其传输到显示器上,让用户可以看到现实世界的场景。在虚拟现实环境中,用户无法感知现实世界的环境,容易发生碰撞或者其他安全问题,使用 Pass Through 技术可以让用户感知现实世界的环境,不但可以更加安全地在虚拟现实环境中行动,还可以增强虚拟现实的沉浸感。 透视功能 XR 扩展提供了专门用于渲染透视图像的层,同时使用合成层技术控制透视图像与虚拟场景的融合显示关系。 属性说明Placement指定 Pass Through Layer 的合成方式。Depth设置深度来指定 Pass Through在Composition Layer 的排序。Opacity设置 Pass Through 图像的不透明度。 注意:透视功能对接 OpenXR 的非核心扩展API。当前版本只对接了 Meta Quest 系列设备。 开启透视 调整
3D建模 Cocos Creator:XR 合成层 推荐:将NSDT场景编辑器加入你的3D工具链 3D工具集:NSDT简石数字孪生 XR 合成层 在 XR 应用开发中,合成层(Composition Layer)是一种常用的技术,通常应用在混合现实场景,将虚拟现实场景和真实世界场景进行混合,合成层将根据用户设定的 layer 深度将不同的 layer 分别渲染到不同的图层中,然后将这些图层进行合成,形成一个完整的XR场景。同时,通过调整图层的透明度和深度,能达到虚拟对象与真实世界对象完美融合的效果。Composition Layer 技术可以实现高质量的XR渲染效果,为 XR 应用的开发和体验提供了很大的帮助和支持。 合成层功能 属性说明Layer Setting合成层效果设置。--Type合成层的类型: Overlay:将纹理呈现在 Eye Buffer 前面。 Underlay:将纹理呈现在 Eye Buffer 后面。--Shape提供两种种形状的合成层: Quad:具有四个顶点的平面纹理,通常用来显示场景中的文本或信息。 Cylinder具有柱面弧度的圆柱形纹理,
3D建模 Cocos Creator:XR 空间音频 推荐:将NSDT场景编辑器加入你的3D工具链 3D工具集:NSDT简石数字孪生 XR 空间音频 XR 空间音频是虚拟现实领域中的一项重要技术,它可以模拟现实世界中的音频环境,让用户在虚拟现实环境中获得更加真实的听觉体验。基于头戴显示器的声音跟踪技术可以通过跟踪用户的头部运动来模拟现实世界中的音频环境。当用户在虚拟现实环境中移动头部时,系统可以根据用户的头部运动和位置来调整音频的位置和方向,从而模拟出现实世界中的音频环境。 XR 空间音频功能 属性描述Clip引用需要挂载的音频文件。Loop是否循环播放音频。Play On Wake是否在启动项目时自动播放音频。Volume音量大小。Distance Rolloff Model音量根据距离效应进行衰减的模型。 XR 空间音频使用 选择想要添加音频的节点对象,在属性管理器中添加组件:XR > Extra > XRSpatialAudioSource 3D建模学习工作室 翻译整理,转载请注明出处 上一篇:Cocos Creator:XR 网页浏览器 (mvrlink.com) 下一篇:Cocos Creator:XR
3D建模 Cocos Creator:XR 网页浏览器 推荐:将NSDT场景编辑器加入你的3D工具链 3D工具集:NSDT简石数字孪生 XR 网页浏览器 在XR中,网页浏览器可以让用户在虚拟现实环境中访问和浏览网页。用户可以设备控制器与网页界面进行交互,如选择链接、滚动页面等等操作,以增强用户的沉浸感和体验。 XR 网页浏览器功能 属性描述Content指定用于渲染网页内容的MeshRenderer对象。Url网页链接。 使用 XR 网页浏览器 层级管理器右键 创建 > XR > XR Webview。 默认创建一个带有 cc.MeshRenderer 组件的节点作为子节点 Webview Content。 构建发布应用即可看到网页内容。 3D建模学习工作室 翻译整理,转载请注明出处 上一篇:Cocos Creator:XR 视频播放 (mvrlink.com) 下一篇:Cocos Creator:XR 空间音频 (mvrlink.com)
3D建模 Cocos Creator:XR 视频播放 推荐:将NSDT场景编辑器加入你的3D工具链 3D工具集:NSDT简石数字孪生 XR 视频播放器 XR 头戴设备相较于传统的显示器拥有更为多样化的视频展示方式,结合设备自身的多轴向定位特性和双屏渲染画面,可以满足用户在 3D 场景中浏览全景视频或动态材质的需要。Cocos CreatorXR v1.1.0提供了通用化的 XR 视频播放器,针对 XR 设备优化了视频渲染管线并支持切换展示窗口、180 度、360 度多风格的视频。同时,播放器还提供了交互功能辅助您进行播放控制,您只需要添加或替换视频资源即可完成简易的视频播放功能的内容开发,简化创作步骤,降低开发门槛。 创建视频播放器,请在层级管理器右键 创建 -> XR -> XR Video Player。 其节点中包含的核心组件如下: XR Video Player cc.XRVideoPlayer 用于调整视频的各项属性 属性说明Source Type视频来源:REMOTE
3D建模 Cocos Creator:预览 推荐:将NSDT场景编辑器加入你的3D工具链 3D工具集:NSDT简石数字孪生 预览 为了方便开发者在项目开发过程中实时调试,快速验证一些传统的功能逻辑来提高开发效率,Cocos CreatorXR 基于 Cocos Creator 的 Web Preview 功能开发了适用于 XR 项目的预览功能。 操作说明 在 xr-plugin 的资源库中找到 XR Simulator,将其拖拽至场景中。 在编辑器的预览选项中选择浏览器预览,并点击运行。 运行后即可在浏览器中进行模拟预览。 键盘 WASD 来控制角色整体(HMD + 手柄)进行前左后右移动,QE 控制整体上升和下降。 键盘 Latin 部分的数字键 123 功能分别为:1.鼠标键盘的控制对象切换至 XR Agent (角色自身)此时前后左右上下作用于整体角色,鼠标滑动控制 HMD(Camera)
3D建模 Cocos Creator:XR组件 推荐:将NSDT场景编辑器加入你的3D工具链 3D工具集:NSDT简石数字孪生 XR组件 Cocos CreatorXR 通过组件的组合封装为实体赋能,实体根据其不同特性又被不同的功能系统所管理。所以编辑器中所有 XR 相关的功能底层都是由封装好的特殊 XR 组件驱动的。 Cocos CreatorXR 的功能组件主要由 5 部分构成: * 设备映射 * 交互组件 * 交互限制组件 * 虚拟移动组件 * XR UI 开启了 xr-plugin 扩展之后,想要给场景中的对象添加 XR 相关的功能组件可以在 属性检查器 中点击 添加组件 按钮,在出现的组件列表中找到 XR 分类,选择 XR 分类下的想要添加的 XR 组件类别再找到类别下的对应组件即可。 设备映射组件 此类组件主要用以同步现实世界中物理设备和虚拟世界中的代理节点之间的 I/O 信息。确保在用户在 XR
3D建模 Cocos Creator:内置资源与预制体 推荐:将NSDT场景编辑器加入你的3D工具链 3D工具集:NSDT简石数字孪生 内置资源与预制体 在 Cocos Creator 扩展管理器中 开启XR扩展 之后就可以允许在编辑器中使用传统创建对象的方式创建 XR 对象。 在 层级管理器 右键选择 创建 -> XR,右侧会出现当前可以创建的所有 XR 预制体。选择想要实例化生成的对象即可在场景中创建出来。 名称说明包含组件XR Agent现实世界主角相关的信息在虚拟场景中的代理节点,同时具有用于控制虚拟世界中 XR 主角的生命周期的功能。TrackingOriginXR HMD头戴显示器设备在虚拟世界中的抽象节点,基于 Camera 对象进行改造生成,用于同步现实世界中头戴显示器的输入信号并将引擎渲染结果输出至设备。Camera AudioSource HMDCtrl PoseTracker TargetEyeAR Camera抽象表式移动端设备带有 AR 能力的摄像机,用于来映射物理设备的摄像头 AR 功能。Camera PoseTracker ARCameraMgrRay Interactor用于进行远距离交互的射线交
3D建模 Cocos Creator:EXCEL 导入示例 推荐:将NSDT场景编辑器加入你的3D工具链 3D工具集:NSDT简石数字孪生 EXCEL 导入示例 在开始本篇之前,请开发者准备好支持 L10N 的引擎(v3.6以及以上),并创建一个空的项目,我们将通过该示例演示如何在项目中使用 EXCEL 文件作为多语言的数据文件。 其他文件类型如 PO、CSV,其使用流程与 EXCEL 类似。 准备工作 首先打开 Dashboard 创建任意空项目 通过菜单打开 L10N 的面板 启用 L10N 功能 配置好对应的语言,这里 本地开发语言 以简体中文为例,目标语言为 英语(美国): 导出文件 注意:为确保流程正确,请首先使用 导出 功能将对应语言的文件导出为 EXCEL。 添加 键,此处我们将以 L10NLabel
3D建模 Cocos Creator:Localization Editor Api 推荐:将NSDT场景编辑器加入你的3D工具链 3D工具集:NSDT简石数字孪生 Localization Editor Api 快速开始 核心功能 l10n l10n 提供了核心翻译功能以及 ICU 功能,同时也提供的切换语言的功能。 我们会将切换后的目标语言存储于 localStorage 中,同时也会自动重启项目运行时,并在下次启动时读取 localStorage 配置以完成整个语言切换流程。 注意:因此我们希望用户在切换语言之前务必处理好数据持久化工作。 导入 l10n 模块 localization-editor 所提供的所有 API 都将从 db://localization-editor/l10n 进行具名导入,导入示例如下: import { l10n } from 'db://localization-editor/l10n' 使用翻译api // 任意 component 组件代码中 // l10n 是 localization 的核心功能
3D建模 Cocos Creator:脚本使用示例 推荐:将NSDT场景编辑器加入你的3D工具链 3D工具集:NSDT简石数字孪生 脚本使用示例 导入 导入示例: import l10n from 'db://localization-editor/core/L10nManager' * 描述:l10n以api的方式提供了在代码中翻译文本的能力 动态切换语言 代码示例如下: l10n.changeLanguage('zh-Hans-CN') 参数类型请参考 查看 BCP47 Language Tag 以获得更多信息。 注意: 在调用此方法后,会自动重启游戏,请务必做好数据持久化工作。 * 接口定义: t(key: L10nKey, options?: StandardOption): L10nValue 根据键获取 L10N 的值 console.log(l10n.t('this_is_apple')) // 这是一个苹果 此处可以获取到以
3D建模 Cocos Creator:L10nLabel 组件 推荐:将NSDT场景编辑器加入你的3D工具链 3D工具集:NSDT简石数字孪生 L10nLabel 组件 L10nLabel 是可以根据内容进行定制化翻译的组件。配合文本组件使用,可对文本组件的内容进行翻译。 添加组件 用户可以在 属性检查器 上点击 添加组件 并选择 L10nLabel 来添加: 注意:L10nLabel 必须搭配 Label 组件才可以使用,如果节点上没有 Label 组件,则会自动创建一个。 属性和说明 属性说明StringLabel 组件内文本 不可编辑Count变体数量 详情请参考下文Key本地化的键值 变体数量 通过输入不同的数量,本地化会切换不同的变体。 在某些语言中,表示单数和复数会采用不同的格式,比如在英语中,一个苹果表述为:one apple,而两个苹果则会使用苹果的复数格式:two apples。为了可以在翻译后使用正确的格式,我们可以在 变体数量 内填入当前这句话内指定的物体的数量究竟是多少。 通常来说,不同语言的变体数量和当地语言有关,
3D建模 Cocos Creator:语言编译 推荐:将NSDT场景编辑器加入你的3D工具链 3D工具集:NSDT简石数字孪生 语言编译 当在 收集并统计 视图中选定本地开发语言后,即可对编译过程进行配置。这里将包含 自动翻译、手动翻译 以及 变体 等功能。 语言 开发者可以在此处选择目标版本的语言。 第一行的语言为 本地开发语言,记录当前开发过程中所使用的本地语言,通常可以选择为开发者熟悉的语言。在该语言下,操作 栏中会出现 补全 功能,用于记录 Label 组件的原文,需搭配 L10nLabel 使用,在有键无值的情况下使用;或匹配非文本资源的多语言。详情请参考下文 补全 部分。 从第二行开始,则是目标国家/地区所使用的语言,开发者需至少选择一个目标国家/地区的语言,才会出现翻译选项。 译文服务商识别的语言 上图用于在自动翻译时选择译文服务商的输入/输出的语言类型: * 对于本地开发语言,选择的是输入语言类型。 * 对于译文语言来说,选择的是输出语言类型。
3D建模 Cocos Creator:收集并统计 推荐:将NSDT场景编辑器加入你的3D工具链 3D工具集:NSDT简石数字孪生 收集并统计 收集功能会将项目内文本、Typescript 脚本、场景资源、预制体、视频、引擎和图片等文件搜集起来,并允许开发者进行本地化配置。 属性和说明 本地开发语言: 本地开发语言,指的是开发者在开发时使用的语言。此处选择的语言会作为源语言,提供给译文服务商进行翻译。开发者可以通过下拉菜单,根据当前自己的喜好进行选择: 该选项为必选。 从资源文件中收集:本地化编辑功能可以从不同的资源目录收集所需翻译的文本信息,同时也可以选择过滤或排除某些文件/文件夹。 收集组:可添加多个,通过 + 按钮添加不同的收集组,对于已添加的项,鼠标滑过时会显示 删除 按钮。 * 搜索目录:可以指定当前资源数据库内特定的目录,用于收集需要翻译的资源,最少为 1 个即 db://assets。为减少收集时间,我们建议开发者将需要翻译的资源存放在单独的目录。再通过此选项进行分类整理。 * 扩展名:指定通过特定的文件后缀名进行收集,若无,则收集所有文件。 * 排除路径:
3D建模 Cocos Creator:译文服务商 推荐:将NSDT场景编辑器加入你的3D工具链 3D工具集:NSDT简石数字孪生 译文服务商 译文服务商是第三方软件商,引擎通过抹平他们之间 API 的差异将其整合到一起。通常开发者需要注册服务商的账号并开启相应的 API 才可以启动自动翻译的功能。 若您没有对应的开发者账号也无需担心,L10N 支持手动翻译。 译文服务商:该下拉菜单允许开发者选择不同的译文服务商,如选择 None 则无法使用自动翻译功能,手动翻译功能不受影响。 目前支持的服务商的地址如下: * 有道智云平台 * Google Cloud AppKey/AppSecret:选择不同的服务商后,开发者需要输入 AppKey 和 AppSecret 才可以继续后续的操作。通常这些信息需要在译文服务商的网站上获取。 输入完成后,点击保存即可。 3D建模学习工作室 翻译整理,转载请注明出处 上一篇:Cocos Creator:多语言本地化(L10N) (mvrlink.com) 下一篇:Cocos Creator:收集并统计
3D建模 Cocos Creator:多语言本地化(L10N) 推荐:将NSDT场景编辑器加入你的3D工具链 3D工具集:NSDT简石数字孪生 多语言本地化(L10N) 多语言本地化(以下简称 L10N 或本地化)是 Cocos Creator 3.6 推出的功能,该功能整合了第三方译文服务商的翻译服务,同时运行将文本、音频和图片等资源的本地化功能整合到引擎内,并支持一键发布到不同语言。 L10N 是单词 Localization 的首字母以及尾字母的缩写,10 代表 Localization 中间有 10 个字母。 L10N 总览 在引擎顶部菜单中选择 面板 -> 本地化编辑器 中即可打开本地化编辑器面板。 首次启动时,用户需手动启用 L10N 功能: 启动后即可进行编辑。 在面板的右上角,L10N 提供了 关闭 L10N 以及 卸载数据 两项功能: