基础 3D 物体

Cocos Creator 可以导入由大部分 3D 模型制作软件生成的模型文件,也可以直接在 Creator 中创建一些常见的基础 3D 物体,比如长方体、胶囊体、球体、圆柱体等。

创建基础 3D 物体

Creator 提供了以下两种方式来创建基础 3D 物体。

通过脚本创建

Cocos Creator 提供了 cc.primitive 脚本接口来创建基础 3D 模型的顶点数据,然后根据这些顶点数据创建出对应的 mesh 给 Mesh Renderer 组件 使用。

  1. function createMesh (data, color) {
  2. let gfx = cc.gfx;
  3. let vfmt = new gfx.VertexFormat([
  4. { name: gfx.ATTR_POSITION, type: gfx.ATTR_TYPE_FLOAT32, num: 3 },
  5. { name: gfx.ATTR_NORMAL, type: gfx.ATTR_TYPE_FLOAT32, num: 3 },
  6. { name: gfx.ATTR_COLOR, type: gfx.ATTR_TYPE_UINT8, num: 4, normalize: true },
  7. ]);
  8. let colors = [];
  9. for (let i = 0; i < data.positions.length; i++) {
  10. colors.push(color);
  11. }
  12. let mesh = new cc.Mesh();
  13. mesh.init(vfmt, data.positions.length);
  14. mesh.setVertices(gfx.ATTR_POSITION, data.positions);
  15. mesh.setVertices(gfx.ATTR_NORMAL, data.normals);
  16. mesh.setVertices(gfx.ATTR_COLOR, colors);
  17. mesh.setIndices(data.indices);
  18. mesh.setBoundingBox(data.minPos, data.maxPos);
  19. return mesh;
  20. }
  21. // 创建长方体顶点数据
  22. let data = cc.primitive.box(100, 100, 100);
  23. // 根据顶点数据创建网格
  24. let mesh = createMesh(data, cc.color(100, 100, 100));
  25. // 将创建的网格设置到 Mesh Renderer 上
  26. let renderer = this.getComponent(cc.MeshRenderer);
  27. renderer.mesh = mesh;

更多关于 cc.primitive 的使用请查看 Primitive API。用户也可以下载 TheAviator Demo 来学习如何使用 cc.primitive

通过编辑器创建

层级管理器 中点击左上角的 + 按钮,然后选择 创建 3D 节点,即可在编辑器内创建长方体、胶囊体、球体圆柱体等基础 3D 物体:

primitive

创建长方体

primitive

创建胶囊体

primitive

创建圆锥体

primitive

创建圆柱体

primitive

创建平面

primitive

创建球体

primitive

创建圆环

primitive

创建面片

primitive