Layaair 2d显示3d

19 February 2019

简单显示

laya只支持简单的2d 3d混合。只需要把3d的scene添加到舞台上即可显示3d内容。但是不能做到2d和3d交叉显示。但是理论上laya的2d和3d都是基于webgl的，而且laya引擎是开源的，而且我以前自己写过和研究过各种3d和2d引擎。所以我有信心花点时间把这个内容攻克。

目标

laya的基本节点是Node，2d的基本节点是Sprite，3d的基本节点是Sprite3D。而且Sprite3D是不能添加到Sprite上的。所以我新建一个类，继承了Sprite。

接口是这个样子的

My3D(scene:MyScene,sprite3d:Sprite3D=null) 

把一个3d对象传进2d对象。然后重写它的render方法。这样就达到了，2d显示3d的目的

原理

laya的渲染分为2步，第一步执行Node的render函数。函数里可以把ISubmit对象放入渲染数组。

第二步遍历这个数组，进行实际的渲染。

scene也是一个ISubmit。当scene执行render方法时会把自身添加到submit数组。

我的做法是重写掉scene的render方法。然后2d对象的容器的render方法把scene添加到submit数组。这样后，每个要显示3d对象的2d对象都会添加一个scene到submit数组。

然后我重写掉renderSubmit进行这个3d对象的渲染。laya原版的scene是渲染整个child，而我重写的方法只渲染当前的3d对象。

最终api和效果

看着还是挺舒服，好用的。

//建立3d显示对象
var objs:Array = [box, LayaMonkey, layaEffect];
var i:int = parseInt(Math.random() * objs.length);
var box2:Sprite3D = Sprite3D.instantiate(objs[i]);
if(i==0){
	box2.transform.rotate(new Vector3(Math.PI * Math.random(), Math.PI * Math.random()));
	Laya.timer.frameLoop(1, this, rota3d, [box2], false);
}

//创建2d的3d容器
var node3d:My3D = my3d.create(box2);

//跟2d一样控制2d
node3d.x = x;
node3d.y = y;
Laya.stage.addChild(node3d);

测试demo

h5 5