參考：
一 常用資源類型
場景 .ls
預設 .lh
模型網格 .lm
材質 .lmat
動畫文件 .lani
貼圖 .jpg .png .ltc等
二 場景加載
下面加載XunLongShi(馴龍師?)場景，並創建攝像機和光照到場景中。
ResourceDemo.ts：
export default class ResourceDemo extends Laya.Script{
constructor() {
super();
//3d場景加載
Laya.Scene3D.load("res/threeDimen/scene/XunLongShi/XunLongShi.ls",Laya.Handler.create(this,function(scene){
Laya.stage.addChild(scene);
//添加相機
var camera = new Laya.Camera();
scene.addChild(camera);
//設置相機清楚標記，使用天空
camera.clearFlag = Laya.BaseCamera.CLEARFLAG_SKY;
//調整相機的位置
camera.transform.translate(new Laya.Vector3(3, 20, 47));
//添加光照
var directionLight = scene.addChild(new Laya.DirectionLight());
directionLight.color = new Laya.Vector3(1, 1, 1);
directionLight.transform.rotate(new Laya.Vector3( -3.14 / 3, 0, 0));
}));
}
}
加載后顯示效果
加載場景時，雖然只加載.ls文件。但是.ls文件內所有的相關資源都加載了下來。例如下圖中的Skybox.lmat等。
場景.ls、材質.lmat等加載方式也是一樣，凡是文件內的資源都會被自動加載。
XunLongShi.ls：
三 材質加載
下面加載天空盒材質，並賦值給天空渲染器。
| - 天空網格
天空的組成 = 天空渲染器模型 -|
| - 天空材質 - 天空紋理
ResourceDemo.ts：
//材質加載
Laya.BaseMaterial.load("res/threeDimen/skyBox/skyBox2/skyBox2.lmat", Laya.Handler.create(null, function(mat){
//獲取相機的天空渲染器
var skyRenderer:Laya.SkyRenderer = camera.skyRenderer;
//創建天空盒的mesh
skyRenderer.mesh = Laya.SkyBox.instance;
//設置天空盒材質
skyRenderer.material = mat;
}));
加載skyBox2.lmat文件時，它所包含的文件以及子文件都會被加載。
skyBox2.lmat：
天空顯示效果
四 紋理加載
加載地球紋理，並賦值給一個球體模型。
|- 網格PrimitiveMesh
地球的組成 = 地球模型MeshSprite3D -|
|-材質 BlinnPhongMaterial - 紋理earth.png
ResourceDemo.ts：
Laya.Texture2D.load("res/threeDimen/texture/earth.png", Laya.Handler.create(null, function(tex):void {
//使用紋理
var earth1 = scene.addChild(new Laya.MeshSprite3D(Laya.PrimitiveMesh.createSphere(5, 32, 32))) as Laya.MeshSprite3D;
earth1.transform.translate(new Laya.Vector3(17, 20, 0));
var earthMat = new Laya.BlinnPhongMaterial();
earthMat.albedoTexture = tex;
earthMat.albedoIntensity = 1;
earth1.meshRenderer.material = earthMat;
}));
顯示效果
五 網格加載
下面加載猴子網格，並賦值給一個模型。
|- 網格MeshSprite3D
猴子組成 = -|
|- 材質 (沒有材質，猴子是白色的)
Laya.Mesh.load("res/threeDimen/skinModel/LayaMonkey/Assets/LayaMonkey/LayaMonkey-LayaMonkey.lm", Laya.Handler.create(this, function(mesh) {
var layaMonkey = scene.addChild(new Laya.MeshSprite3D(mesh));
layaMonkey.transform.localScale = new Laya.Vector3(4, 4, 4);
layaMonkey.transform.rotation = new Laya.Quaternion(0.7071068, 0, 0, -0.7071067);
layaMonkey.transform.translate(new Laya.Vector3(5, 3, 13));
}));
顯示效果
六 預設加載
下面加載預設，一只猴子。
|- 猴子網格
猴子預設(精靈) = 猴子模型 -|
|- 猴子材質 - 猴子紋理
Laya.Sprite3D.load("res/threeDimen/skinModel/LayaMonkey/LayaMonkey.lh", Laya.Handler.create(null, function(sp){
var layaMonkey2 = scene.addChild(sp);
layaMonkey2.transform.localScale = new Laya.Vector3(4, 4, 4);
layaMonkey2.transform.translate(new Laya.Vector3(-10, 13, 0));
}));
顯示效果。 猴子添加到舞台后，是帶動畫的。
七 加載動畫
下面加載一個胖子預設，並給胖子預設增加一個動畫。
如果沒Laya.AnimationClip.load加載動畫的話，胖子是靜止的。
|- 胖子網格
| 胖子模型 -|
胖子預設 = -| |- 胖子材質 - 胖子紋理
|
| 動畫組件 -| 動畫狀態1 - 動畫 lani
-| 動畫狀態2 - 動畫2 lani
//加載胖子精靈
Laya.Sprite3D.load("res/threeDimen/skinModel/BoneLinkScene/PangZiNoAni.lh", Laya.Handler.create(null, function(sp) {
let pangzi:Laya.Sprite3D;
pangzi = scene.addChild(sp);
pangzi.transform.localScale = new Laya.Vector3(4, 4, 4);
pangzi.transform.translate(new Laya.Vector3(10, 20, 0));
//獲取動畫組件
let pangziAnimator:Laya.Animator
pangziAnimator = pangzi.getChildAt(0).getComponent(Laya.Animator);
//AnimationClip的加載要放在Avatar加載完成之后
Laya.AnimationClip.load("res/threeDimen/skinModel/BoneLinkScene/Assets/Model3D/PangZi-Take 001.lani", Laya.Handler.create(null, function(aniClip) {
//創建動作狀態
var state1 = new Laya.AnimatorState();
//動作名稱
state1.name = "hello";
//動作播放起始時間
state1.clipStart = 0 / 581;
//動作播放結束時間
state1.clipEnd = 581 / 581;
//設置動作
state1.clip = aniClip;
//設置動作循環
state1.clip.islooping = true;
//為動畫組件添加一個動作狀態
pangziAnimator.addState(state1);
//播放動作
pangziAnimator.play("hello");
}));
}));
實際顯示效果
八 加載粒子
粒子就是一個lh，就是一個預設
Laya3D.init(0, 0);
Laya.stage.scaleMode = Laya.Stage.SCALE_FULL;
Laya.stage.screenMode = Laya.Stage.SCREEN_NONE;
Laya.Stat.show();
var scene:Laya.Scene3D = Laya.stage.addChild(new Laya.Scene3D()) as Laya.Scene3D;
var camera:Laya.Camera = scene.addChild(new Laya.Camera(0, 0.1, 100)) as Laya.Camera;
camera.transform.translate(new Laya.Vector3(0, 2, 4));
camera.transform.rotate(new Laya.Vector3( -15, 0, 0), true, false);
Laya.Sprite3D.load("threeDimen/particle/ETF_Eternal_Light.lh",Laya.Handler.create(this,function(sprite:Laya.Sprite3D):void{
scene.addChild(sprite) as Laya.Sprite3D;
}))
顯示效果
九 批量預加載
2D中使用Laya.loader.load批量加載資源
3D中使用Laya.loader.create批量加載資源
//批量預加載方式
PreloadingRes(){
//預加載所有資源
var resource:Array = ["res/threeDimen/scene/TerrainScene/XunLongShi.ls",
"res/threeDimen/skyBox/skyBox2/skyBox2.lmat",
"res/threeDimen/texture/earth.png", "res/threeDimen/skinModel/LayaMonkey/Assets/LayaMonkey/LayaMonkey-LayaMonkey.lm",
"res/threeDimen/skinModel/LayaMonkey/LayaMonkey.lh",
"res/threeDimen/skinModel/BoneLinkScene/PangZiNoAni.lh",
"res/threeDimen/skinModel/BoneLinkScene/Assets/Model3D/PangZi-Take 001.lani",];
Laya.loader.create(resource, Laya.Handler.create(this, this.onPreLoadFinish));
}
onPreLoadFinish() {
//初始化3D場景
_scene = Laya.stage.addChild(Laya.Loader.getRes("res/threeDimen/scene/TerrainScene/XunLongShi.ls"));
//獲取相機
var camera = _scene.getChildByName("Main Camera");
//設置相機清楚標記，使用天空
camera.clearFlag = Laya.BaseCamera.CLEARFLAG_SKY;
//調整相機的位置
camera.transform.translate(new Laya.Vector3(0, 45, -60));
camera.transform.rotate(new Laya.Vector3(0, 180, 0), false, false);
//相機視角控制組件(腳本)
camera.addComponent(CameraMoveScript);
}
