如何用PlayCanvas打造一个令人惊叹的3D模型在线展示-优快云博客

Alt

本文由ScriptEcho平台提供技术支持

项目地址：传送门

使用 PlayCanvas 渲染 3D 模型

应用场景介绍

PlayCanvas 是一款用于创建交互式 3D 内容的跨平台引擎。它广泛应用于游戏开发、建筑可视化和虚拟现实体验等领域。

代码基本功能介绍

本代码演示了如何使用 PlayCanvas 渲染一个 3D 模型，并通过鼠标控制模型的旋转。

功能实现步骤及关键代码分析说明

1. 初始化 PlayCanvas

首先，需要创建一个 canvas 元素，然后使用 createGraphicsDevice 函数创建 PlayCanvas 的图形设备。接下来，使用 AppBase 创建一个 PlayCanvas 应用程序，并设置其选项，包括图形设备、组件系统和资源处理程序。

const canvas = document.getElementById('canvas')
const device = await pc.createGraphicsDevice(canvas, gfxOptions)
const app = new pc.AppBase(canvas)
app.init(createOptions)

2. 加载资源

接下来，需要加载 3D 模型和纹理等资源。本代码使用 AssetListLoader 加载了 helipad 环境纹理和 statue 模型。

const assets = {
  helipad: new pc.Asset(
    'helipad-env-atlas',
    'texture',
    { url: 'playcanvas/assets/cubemaps/helipad-env-atlas.png' },
    { type: pc.TEXTURETYPE_RGBP, mipmaps: false },
  ),
  statue: new pc.Asset('statue', 'container', {
    url: 'playcanvas/assets/models/statue.glb',
  }),
}
const assetListLoader = new pc.AssetListLoader(
  Object.values(assets),
  app.assets,
)

3. 设置场景

资源加载完成后，需要设置场景。本代码设置了天空盒、色调映射和曝光度。

app.scene.envAtlas = assets.helipad.resource
app.scene.toneMapping = pc.TONEMAP_ACES
app.scene.exposure = 1.6
app.scene.skyboxMip = 1

4. 创建相机和模型

接下来，需要创建一个带有相机组件的实体，以及一个带有渲染组件的模型实体。

const camera = new pc.Entity()
camera.addComponent('camera', {
  clearColor: new pc.Color(0.4, 0.45, 0.5),
})
const entity = assets.statue.resource.instantiateRenderEntity()

5. 鼠标控制

最后，需要添加鼠标控制代码，以便用户可以通过鼠标拖动旋转模型。

const mouse = new pc.Mouse(document.body)
let x = 0
const y = 0

mouse.on('mousemove', function (event) {
  if (event.buttons[pc.MOUSEBUTTON_LEFT]) {
    x += event.dx

    entity.setLocalEulerAngles(0.2 * y, 0.2 * x, 0)
  }
})