PLOY3D引擎系列教程——创建场景3D对象

PLOY3D引擎系列教程——创建场景3D对象

大多数情况下，我们使用引擎编辑器创建资源包、创建模型预制件以及搭建复杂的场景，然后在运行端加载资源包、实例化预制件或者直接加载完整场景。后续教程会介绍资源包的使用，本章详细介绍如果通过API一步步创建场景3D对象。具体包括创建贴图Texture2D，创建材质Material，创建网格Mesh，创建网格渲染器组件Mesh Renderer，创建物理碰撞组件Collider，创建3D对象等。

提示：PLOY3D引擎是卜云 PLOYCLOUD推出的基于WebGPU、WebGL2.0、WebAssembly和TypeScript开发的原生Web3D、AR和VR引擎。获取引擎SDK和样例代码请访问gitee以及查阅api文档 。更多引擎和引擎编辑器演示视频请关注抖音号。文章可转载，谢谢！

系列目录

• PLOY3D引擎系列教程

---

---

一、创建场景3D对象

所有代码添加在WebApp.InitScene方法中。

大概流程可分为以下步骤：

1. 加载图片创建贴图；
2. 基于贴图和材质属性值创建材质；
3. 创建网格；
4. 创建空3D对象并初始化变换组件；
5. 为对象添加网格变换组件（绑定网格、设置材质）；
6. 为对象添加物理碰撞组件；

二、步骤

1.添加水平面网格对象

添加水平面网格对象，有助于我们确认其它对象的空间位置。

const horiObj = await Engine.scenes.CreateHorizontalGrid(100, 100);

// 为水平面网格对象添加碰撞组件，使其能接住空中落下的对象
const horiCollider = await Engine.resources.CreateCollider({
    type: "rigid",
    parent: null,
    parent_: horiObj,
    rigid: {
        shapeType: "box",
        mass: 0,
        extents: [50, 0.01, 50],
        position: [0, 0, 0]
    }
});

2.添加变换组件控制器

添加变换组件控制器，添加后可以点击选中对象，然后进行平移、旋转、缩放操作。

await Engine.scenes.CreateTransformCtrl();

3.创建立方块网格

仅创建1个网格，所有对象共享该网格。

// 立方块大小
const cubeSize = 0.4;

// 立方块网格
const cubeMesh = await Engine.resources.CreateMesh({
    operator: "box",
    box: {
        width: cubeSize,
        height: cubeSize,
        depth: cubeSize,
        widthSegments: 1,
        heightSegments: 1,
        depthSegments: 1
    }
});

4.实现立方块创建方法

实现一个共享方法，在不同的位置创建不同颜色的3D对象。

async function cubeCreate(index: number, pos: number[], color: number[]) {
    // 使用内建标准着色器创建材质
    const cubeMat = await Engine.resources.CreateMaterial("standard", 0);
    // 设置材质基础色
    cubeMat.view.baseColor = color;

    // 创建3D对象
    const cubeObj = await Engine.resources.CreateObject("Cube:" + index);

    // 设置3D对象坐标
    cubeObj.localPosition = new Engine.Vector3(pos);

    // 为3D对象添加网格渲染器，使用共享的网格和新场景的材质
    const cubeMR = await Engine.resources.CreateMeshRenderer({
        master: cubeObj,
        mesh: cubeMesh,
        materials: [
            {
                group: 0,
                material: cubeMat
            }
        ]
    });

    // 为3D对象添加物理碰撞组件
    const cubeCollider = await Engine.resources.CreateCollider({
        type: "rigid",
        parent: null,
        parent_: cubeObj,
        rigid: {
            shapeType: "box",
            mass: 1,
            extents: [cubeSize * 0.5, cubeSize * 0.5, cubeSize * 0.5],
            position: pos
        }
    });

    return cubeObj;
}

5.在场景中堆砌125个立方块3D对象

使用随机颜色创建对象，创建完成后开启场景的物理演算。

for (let y = 0; y < 5; y++) {
    for (let z = 0; z < 5; z++) {
        for (let x = 0; x < 5; x++) {
            await cubeCreate(index++, [x * cubeSize - 1.0, y * cubeSize + 3.0, z * cubeSize - 1.0], [Math.random() * 0.5 + 0.5, Math.random() * 0.5 + 0.5, Math.random() * 0.5 + 0.5]);
        }
    }
}

// 开启场景物理模拟
Engine.scenes.phySimul = true;

---

总结

以上即为PLOY3D通过API创建场景3D对象的完成流程，相关方法的详细参数和说明请查阅API文档。