附上官网Demo链接 https://layaair.ldc.layabox.com/demo2/?language=ch&category=3d&group=Advance&name=Laya3DCombineHtml
顺便说一下,我使用的版本是2.1.0
想实现上面图中Laya与HTML结合的效果,光使用官方的代码是不够的。先看一下官方代码:
class Laya3DCombineHtml {
constructor() {
var div = Laya.Browser.window.document.createElement("div");
div.innerHTML = "<h1 style='color: red;'>此内容来源于HTML网页, 可直接在html代码中书写 - h1标签</h1>";
document.body.appendChild(div);
//1.开启第四个参数
var config3D:Laya.Config3D = new Laya.Config3D();
config3D.isAlpha = true;
Laya3D.init(0, 0);
Laya.stage.scaleMode = Laya.Stage.SCALE_FULL;
Laya.stage.screenMode = Laya.Stage.SCREEN_NONE;
//2.设置舞台背景色为空
Laya.stage.bgColor = null;
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, 0.5, 1));
camera.transform.rotate(new Laya.Vector3(-15, 0, 0), true, false);
//3.清除照相机颜色
camera.clearColor = null;
var directionLight:Laya.DirectionLight = scene.addChild(new Laya.DirectionLight()) as Laya.DirectionLight;
directionLight.color = new Laya.Vector3(0.7, 0.6, 0.6);
Laya.Sprite3D.load("res/threeDimen/skinModel/LayaMonkey/LayaMonkey.lh",Laya.Handler.create(null,function(layaMonkey:Laya.Sprite3D):void{
scene.addChild(layaMonkey);
}));
}
}
new Laya3DCombineHtml;
我需要使用的就只有:
//1.开启第四个参数
var config3D:Laya.Config3D = new Laya.Config3D();
config3D.isAlpha = true;
//2.设置舞台背景色为空
Laya.stage.bgColor = null;
//3.清除照相机颜色
camera.clearColor = null;
看着是那么回事,当我使用"Laya.Config3D"的时候却发现Laya中没有Config3D
,当然也有可能是我操作不当|ू・ω・` )。在跟同事找了半天解决方法之后,我想到了初始化脚本中有这种代码:
Laya["Physics"] && Laya["Physics"].enable();
Laya["DebugPanel"] && Laya["DebugPanel"].enable();
我就想会不会也可以这样去调用Config3D,结果是可以的!附上代码:
var config3D:any = new Laya["Config3D"]();
config3D["isAlpha"] = true;
Laya.init(GameConfig.width, GameConfig.height, config3D);
|ू・ω・` )嗯!在我测试后成功实现了上面图片的那种效果。