CocosCreator+TS动态创建模型（扇形区域）

我这边是要在角色脚下创建一个扇形区域。效果图如下：

我用的版本是2.3.4，注意3.0以上版本接口不一样。

3.0以上版本可以参考社区一位大佬写的，我这边是用了他的顶点数据和UV。

出处：分享一个绘制扇形网格组件 - Creator 3.x - Cocos中文社区

import GameMgr from "../Mgrs/GameMgr";const { ccclass, property } = cc._decorator;@ccclass
/** * 绘制扇形网格*/
export class SectorComp extends cc.Component {@property({ type: cc.Material })public mat: cc.Material | null = null;@property({tooltip: "外圈半径"})public radius: number = 5;@property({tooltip: "内圈半径"})public innerRadius: number = 1;@property({tooltip: "扇形角度"})public angledegree: number = 60;start() {this.createMesh()}createMesh() {const model = this.node.addComponent(cc.MeshRenderer)!;const segments: number = Math.floor(this.angledegree / 4) + 1;                 var positions: number[] = [];                                                    // 组装顶点数据var vertices_count: number = segments * 2 + 2;                                    var vertices: Array<cc.Vec3> = new Array<cc.Vec3>(vertices_count);var angleRad: number = this.angledegree * cc.macro.RAD;                           var angleCur: number = angleRad;var angledelta: number = angleRad / segments;                                   for (var i = 0; i < vertices_count; i += 2) {                                     var cosA: number = Math.cos(angleCur);var sinA: number = Math.sin(angleCur);vertices[i] = new cc.Vec3(this.radius * cosA, 0, this.radius * sinA);              vertices[i + 1] = new cc.Vec3(this.innerRadius * cosA, 0, this.innerRadius * sinA); angleCur -= angledelta;positions.push(vertices[i].x);positions.push(vertices[i].y);positions.push(vertices[i].z);positions.push(vertices[i + 1].x);positions.push(vertices[i + 1].y);positions.push(vertices[i + 1].z);}// 组装三角形数据var indice_count: number = segments * 6;                                               var indices: Array<number> = new Array<number>(indice_count);for (var i = 0, vi = 0; i < indice_count; i += 6, vi += 2) {                           indices[i] = vi;indices[i + 1] = vi + 3;indices[i + 2] = vi + 1;indices[i + 3] = vi + 2;indices[i + 4] = vi + 3;indices[i + 5] = vi;}// 组装UV数据var uvs: number[] = [];for (var i = 0; i < vertices_count; i++) {var u = vertices[i].x / this.radius / 2 + 0.5var v = vertices[i].z / this.radius / 2 + 0.5uvs.push(u, v);}//@ts-ignorelet gfx = cc.gfx;//创建Meshconst mesh = new cc.Mesh();//初始化格式let vfmtPosColor = new gfx.VertexFormat([{ name: gfx.ATTR_POSITION, type: gfx.ATTR_TYPE_FLOAT32, num: 3 },{ name: gfx.ATTR_UV0, type: gfx.ATTR_TYPE_FLOAT32, num: 2 },]);mesh.init(vfmtPosColor,vertices_count,true);//设置顶点位置mesh.setVertices(gfx.ATTR_POSITION,positions);//UVmesh.setVertices(gfx.ATTR_UV0,uvs);mesh.setIndices(indices);model.mesh = mesh;model.setMaterial(0,this.mat);}
}

CocosCreator+TS动态创建模型（扇形区域）相关推荐

Ember.js之动态创建模型
本人原文地址发布在:点击这里 What problem did we meet? As ember document suggestion, we may define a model as a st ...
django orm原理_django 动态创建一个模型的多个table name，并通过 Django ORM 操作
动态创建table, 并通过 Django ORM 操作. 动态的创建表动态的创建模型其实就是在运行时生成 Model 类, 这个可以通过函数实现, 通过传参(今天的日期, 如: 20181211) ...
草图大师里创建动态组件_教你搞定SketchUp草图大师动态组件模型下载
昨天最角模型上发布了一个"室内概念草图"的视频,里面涉及到一个门的开关,很多SketchUp爱好者非常好奇,是怎么制作的?虽然不是利用动态组件制作的,但其实就是动态组件的意思.大家 ...
Angular动态创建组件之Portals
本文主要介绍使用Angular api 和 CDK Portals两种方式实现动态创建组件,另外还会讲一些跟它相关的内容.如:Angular多级依赖注入.ViewContainerRef,Portal ...
Java程序员从笨鸟到菜鸟之（八十七）跟我学jquery（三）jquery动态创建元素和常用函数示例
在上面两篇博客中列举了太多的API相信大家看着眼晕. 不过这些基础还必须要讲, 基础要扎实.其实对于这些列表大家可以跳过, 等以后用到时再回头看或者查询官方的API说明.在本博客中就给大家讲解一下这些 ...
python变量类型是动态的_Python 学习第四篇：动态类型模型
Python的变量不用声明,赋值之后就可以直接使用,类型是在运行过程中自动确定的,这就是动态类型模型.该模型把变量和对象设计成两个不同的实体,对象是存储数据的地方,对象的类型是由初始值自动决定的,而变 ...
php yanzhengm,ThinkPHP 在使用M方法（不创建模型类）时实现自动验证与自动填充
ThinkPHP M方法实现自动验证与自动填充通常,我们会将自动验证与自动填充规则写入模型类里,然后再用 D 方法实例化模型类来实现对表单的自动验证与自动填充功能.由于 M 方法只是实例化基础模型类 ...
SAP UI5 应用开发教程之五十八 - 使用工厂方法在运行时动态创建不同类型的列表行项目控件试读版
一套适合 SAP UI5 初学者循序渐进的学习教程教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 应用开发教程之一:Hello World SAP UI5 应用开发教程之二:SAP U ...
动态创建 @ViewChild 导致运行时错误的原因分析
本文讨论问题的代码,位于 Github:https://github.com/wangzixi-diablo/ngDynamic 问题描述我的 Component 代码如下图所示: 使用依赖注入,引 ...

CocosCreator+TS动态创建模型（扇形区域）

CocosCreator+TS动态创建模型（扇形区域）相关推荐

最新文章

热门文章