在vue3中用PlayCanvas构建3D物理模型

Alt

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

项目地址：传送门

3D 物理引擎示例：PlayCanvas 创建可互动的物理场景

应用场景

本示例演示了如何使用 PlayCanvas 创建一个交互式的 3D 物理场景。在这个场景中，用户可以创建和删除椅子，椅子会受到物理引擎的影响，可以相互碰撞和移动。

代码基本功能

此代码的主要功能包括：

使用 PlayCanvas 创建一个 3D 场景，其中包含椅子、地面和灯光。
使用 Ammo.js 物理引擎为椅子和地面添加物理属性。
允许用户通过点击按钮创建和删除椅子。
实时更新物理场景，使椅子可以相互碰撞和移动。

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

1. 创建 PlayCanvas 场景

const app = new pc.AppBase(canvas)
app.init(createOptions)
app.start()

这些代码行创建了 PlayCanvas 应用程序并初始化了场景。createOptions 对象指定了应用程序的设置，例如图形设备、组件系统和资源处理程序。

2. 添加物理引擎

pc.WasmModule.setConfig('Ammo', {
  glueUrl: 'playcanvas/src/lib/ammo/ammo.wasm.js',
  wasmUrl: 'playcanvas/src/lib/ammo/ammo.wasm.wasm',
  fallbackUrl: 'playcanvas/src/lib/ammo/ammo.js',
})

这些代码行配置并加载 Ammo.js 物理引擎。

3. 创建场景层次结构

const scene = [
  // ... (场景定义)
]

scene 变量定义了场景的层次结构，包括椅子、地面和灯光。

4. 解析场景

function parseScene(s) {
  s.forEach(function (e) {
    app.root.addChild(parseEntity(e))
  })
}

parseScene 函数解析场景定义并将其转换为 PlayCanvas 实体。

5. 添加物理属性

function parseEntity(e) {
  // ... (其他代码)
  if (e.components) {
    e.components.forEach(function (c) {
      entity.addComponent(c.type, c.options)
    })
  }
  // ... (其他代码)
}

在解析实体时，parseEntity 函数检查实体是否有 components 属性。如果有，则为实体添加指定的组件，包括碰撞组件和刚体组件。

6. 创建和删除椅子

function spawnChair() {
  const chair = app.root.findByName('Chair')
  const clone = chair.clone()
  clone.setLocalPosition(
    Math.random() * 1 - 0.5,
    Math.random() * 2 + 1,
    Math.random() * 1 - 0.5,
  )
  app.root.addChild(clone)
  numChairs++
}

spawnChair 函数克隆了一个椅子实体并将其添加到场景中。它还更新了场景中椅子的数量。

7. 实时更新物理场景

app.on('update', function (dt) {
  // ... (其他代码)

  app.root
    .findComponents('rigidbody')
    .forEach(function (body) {
      body.entity
        .findComponents('render')
        .forEach(function (render) {
          render.material = body.isActive() ? red : gray
        })
      })
  })
})