Laya3D 使用代码绘制简单的3D模型

Laya创建简单的网格在 PrimitiveMesh类中,官方在这里提供了 创建立方体、胶囊体、圆锥体、圆柱体、平面、球体、四边形 这几种模型的现成方法,里面提到的Mesh指的是所有用三角形面组合成的三维物体,比如一个四边形由两个三角形组成 ,一个正方体由一些关键点绕线成三角形,这些三角形两两组成一个面来构成立方体, 如下图:
四边形由 ABC BCD 组成 如果是立方体 就再加关键点 E F G H 再绕线就可以了。注意绘制出的这些三角形都是单面可见的。
在这里插入图片描述
下面是立方体的官网代码

createBox=function(long,height,width){
		(long===void 0)&& (long=1);
		(height===void 0)&& (height=1);
		(width===void 0)&& (width=1);
		var vertexCount=24;
		var indexCount=36;
		var vertexDeclaration= Laya.VertexMesh.getVertexDeclaration("POSITION,NORMAL,UV");
		var halfLong=long / 2;
		var halfHeight=height / 2;
		var halfWidth=width / 2;
		var vertices=new Float32Array([
		-halfLong,halfHeight,-halfWidth,0,1,0,0,0,halfLong,halfHeight,-halfWidth,0,1,0,1,0,halfLong,halfHeight,halfWidth,0,1,0,1,1,-halfLong,halfHeight,halfWidth,0,1,0,0,1,
		-halfLong,-halfHeight,-halfWidth,0,-1,0,0,1,halfLong,-halfHeight,-halfWidth,0,-1,0,1,1,halfLong,-halfHeight,halfWidth,0,-1,0,1,0,-halfLong,-halfHeight,halfWidth,0,-1,0,0,0,
		-halfLong,halfHeight,-halfWidth,-1,0,0,0,0,-halfLong,halfHeight,halfWidth,-1,0,0,1,0,-halfLong,-halfHeight,halfWidth,-1,0,0,1,1,-halfLong,-halfHeight,-halfWidth,-1,0,0,0,1,
		halfLong,halfHeight,-halfWidth,1,0,0,1,0,halfLong,halfHeight,halfWidth,1,0,0,0,0,halfLong,-halfHeight,halfWidth,1,0,0,0,1,halfLong,-halfHeight,-halfWidth,1,0,0,1,1,
		-halfLong,halfHeight,halfWidth,0,0,1,0,0,halfLong,halfHeight,halfWidth,0,0,1,1,0,halfLong,-halfHeight,halfWidth,0,0,1,1,1,-halfLong,-halfHeight,halfWidth,0,0,1,0,1,
		-halfLong,halfHeight,-halfWidth,0,0,-1,1,0,halfLong,halfHeight,-halfWidth,0,0,-1,0,0,halfLong,-halfHeight,-halfWidth,0,0,-1,0,1,-halfLong,-halfHeight,-halfWidth,0,0,-1,1,1]);
		var indices=new Uint16Array([
		0,1,2,2,3,0,  //由三角形012,和三角形230 组成上面 
		4,7,6,6,5,4, //同上 组成底面
		8,9,10,10,11,8, //组成左侧面
		12,15,14,14,13,12,//组成右侧面
		16,17,18,18,19,16,//组成正面
		20,23,22,22,21,20]);//后面
		return Laya.PrimitiveMesh._createMesh(vertexDeclaration,vertices,indices);
	}

1)里面的vertices是立方体用到的三维顶点,indices索引指这些点的绕线顺序。
2) Laya.VertexMesh.getVertexDeclaration(“POSITION,NORMAL,UV”);这里获取顶点声明, POSITION 表示每个点的前三个数值代表这个点的位置XYZ;NORMAL 指中间的三个数值,这三个数值在-1到1之间,会影响到光照;最后UV后面两个点的数值会影响到贴图,可以理解成贴图在模型上的位置。
挺好理解的 然后就可以根据公式画自己需要的图形了。我工作上用到了扇形 和三角体,直接用正方体和圆柱体稍作修改就能得到模型。

比如绘制一个三角体,代码如下:

createTriangle(long,height,width){
		(long===void 0)&& (long=1);
		(height===void 0)&& (height=1);
		(width===void 0)&& (width=1);
		var vertexCount=3;
		var indexCount=3;
		var vertexDeclaration= Laya.VertexMesh.getVertexDeclaration("POSITION,NORMAL,UV");
		var halfLong=long / 2;
		var halfHeight=height / 2;
		var halfWidth=width / 2;

		var vertices=new Float32Array([
	    -halfLong,halfHeight,-halfWidth,0,1,0,0,0,halfLong,halfHeight,-halfWidth,0,1,0,1,0,halfLong,halfHeight,halfWidth,0,1,0,1,1,
		-halfLong,-halfHeight,-halfWidth,0,-1,0,0,0,halfLong,-halfHeight,-halfWidth,0,-1,0,-1,0,halfLong,-halfHeight,halfWidth,0,-1,0,-1,-1,
        -halfLong,halfHeight,-halfWidth,0,-1,0,0,0, halfLong,halfHeight,-halfWidth,0,-1,0,-1,0,halfLong,-halfHeight,-halfWidth,0,-1,0,0,-1,-halfLong,-halfHeight,-halfWidth,0,-1,0,-1,-1,
        halfLong,halfHeight,-halfWidth,0,1,0,0,0,halfLong,halfHeight,halfWidth,0,1,0,1,0,halfLong,-halfHeight,-halfWidth,0,1,0,0,1,halfLong,-halfHeight,halfWidth,0,1,0,1,1,
		-halfLong,halfHeight,-halfWidth,0,1,0,0,0,halfLong,halfHeight,halfWidth,0,1,0,0,0,halfLong,-halfHeight,halfWidth,0,1,0,0,1,-halfLong,-halfHeight,-halfWidth,0,1,0,1,1
		]);
		var indices=new Uint16Array([
		0,1,2,
		5,4,3,
		6,9,8,8,7,6,
		11,10,12,12,13,11,
		14,15,16,16,17,14,
		]);
		return Laya.PrimitiveMesh._createMesh(vertexDeclaration,vertices,indices);
	}

代码绘制其它的简单模型也是一样的操作,主要就是关键点,绕线顺序 ,NORMAL和UV参数这些。

创建完成后,可以在meshRenderer.material 那里给创建好的模型赋予材质,再对材质的属性进行调整,比如颜色 贴图 金属度 光滑度等等。多个模型可以公用一个材质,

      var vice_material : Laya.PBRStandardMaterial = new Laya.PBRStandardMaterial();
      vice_material.albedoColor = new Laya.Vector4(2,2,2,2)
      vice_material.smoothness=0;

Cocos开发技术交流群:199678137,欢迎你的加入。

LayaAir3D是一个基于WebGL的3D引擎,使用它可以在网页上创建和显示3D内容。要使用LayaAir3D实现一个球在立体空间中的弹跳效果,并播放立体空间音效,你需要完成以下几个步骤: 1. 创建3D场景和摄像机: 首先,你需要创建一个3D场景和一个摄像机,摄像机将用来从不同角度观看场景中的物体。 2. 添加地面: 为了实现弹跳效果,需要在场景中添加一个平面作为地面。 3. 创建球体并添加物理组件: 创建一个球体对象,并为其添加刚体组件(Rigidbody),以便它能够响应重力和碰撞。 4. 实现弹跳逻辑: 通过物理引擎来控制球体的行为,使球体在触碰地面时产生弹跳效果。通常需要设置球体的物理属性,如质量、弹性等。 5. 添加立体空间音效: 在LayaAir3D中,立体空间音效可以通过设置音频源(AudioSource)和音频监听器(AudioListener)来实现。你需要准备一个音频文件,并将其设置为球体或场景中某个对象的音频源。同时,确保场景中有音频监听器来捕捉和播放音效。 以下是一个简化的代码示例,用于演示如何在LayaAir3D中创建一个简单的弹跳球: ```javascript // 初始化引擎 LayaAir.init(0, 0); // 创建场景 var scene = Laya.stage.addChild(new Laya.Scene3D()); // 创建摄像机 var camera = new Laya.Camera(0, 0.1, 100); camera.transform.position = new Laya.Vector3(0, 6, 8); camera.transform谯仰(0, -15); scene.addChild(camera); // 创建光照 var directionalLight = scene.addChild(new Laya.DirectionLight()); directionalLight.transform.position = new Laya.Vector3(1, 1, 0); directionalLight.transform谯仰(0, -30); // 创建地面 var ground = scene.addChild(new Laya.MeshSprite3D(Laya.PrimitiveMesh.createPlane(10, 10))); ground.transform.position = new Laya.Vector3(0, 0.5, 0); // 创建球体 var sphere = scene.addChild(new Laya.MeshSprite3D(Laya.PrimitiveMesh.createSphere(1))); sphere.transform.position = new Laya.Vector3(0, 5, 0); sphere.meshRender.material = new Laya.StandardMaterial(); // 添加刚体组件 var rigidbody = sphere.addComponent(Laya.Rigidbody); rigidbody的质量 = 1; rigidbody.isKinematic = false; rigidbody.enableGravity = true; // 添加碰撞组件 sphere.addComponent(Laya.Collision); // 添加音效(需要先加载音频文件) var audio = sphere.addComponent(Laya.AudioSource); audio.clip = Laya.SoundManager.load("audio/yourAudio.wav"); sphere.addComponent(Laya.AudioListener); // 这里需要编写碰撞事件处理逻辑,使球体在碰撞地面后弹跳 ``` 注意:上述代码仅为示例,具体实现时需要结合实际的项目需求进行调整,并且确保有正确的资源路径和物理参数设置。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值