初识 Laya3d

export default class game_mgr extends Laya.Script {

    constructor() { 
        super(); 

        //搭建3d场景
        var secne3d = new Laya.Scene3D();
        Laya.stage.addChild(secne3d);

        //camera 
        //从一个位置或者一个朝向,以一定的视区来查看3d
        var camera = new Laya.Camera(0, 0.3, 100);
        camera.fieldOfView = 60;//角度
        secne3d.addChild(camera);
        camera.transform.translate(new Laya.Vector3(0, 1, 0));

        //物体
            //网格( Mesh,模型,骨骼,骨架)
            //纹理贴图 --》皮肤 “包住这个模型,然后显示出来,让这个模型穿上衣服”
            //Shader 绘制方式(绘制算法):Shader(给显卡执行的程序,显卡会按照Shader来绘制物体)
        //材质(Meterial):配置数据,选好一个Shader,给这个Shader需要的参数
        var cube = new Laya.MeshSprite3D(Laya.PrimitiveMesh.createBox(1,1,1));
        secne3d.addChild(cube);
        cube.transform.translate(new Laya.Vector3(0, 0, -10));
        //cubumeshRender MeshRender 绘制
        
        //材质 Shader(算法 + 参数) 自带默认的Shader  --> 创建出来
        var m = new Laya.UnlitMaterial();
        Laya.Texture2D.load("res/layabox.png", Laya.Handler.create(this, function(tex){
            m.albedoTexture = tex;
        }));

        //告诉我们的MeshRender需要绘制出来
        cube.meshRenderer.material = m;
        //引擎MeshRender对象 --》物体的网格 --》材质(绘制算法,需要的数据) --》显卡 --》成像绘制出来
    }
    
    onEnable() {
    }

    onDisable() {
    }
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Laya3D是一款基于HTML5技术的3D游戏引擎,它可以运行在多个平台上,包括PC、移动设备和Web。实现战争迷雾效果需要以下步骤: 1. 创建一个地图模型,包括战场和障碍物。 2. 创建一个相机,并设置其位置和朝向,以便能够正确地观察地图。 3. 创建一个光源,可以使用点光源、方向光源或者环境光源。 4. 创建一些材质,用于给地图和障碍物上色。 5. 创建一个迷雾层,用于遮挡地图和障碍物。 6. 在场景中添加一个渲染器,用于将场景渲染到屏幕上。 7. 在每帧更新时,根据相机的位置和迷雾层的范围,计算出需要显示的部分,并将其渲染到屏幕上。 以下是一个简单的示例代码: ```javascript Laya3D.init(0, 0, true); // 创建场景和相机 var scene = Laya.stage.addChild(new Laya.Scene()); var camera = scene.addChild(new Laya.Camera(0, 0.1, 100)); camera.transform.translate(new Laya.Vector3(0, 10, -20)); camera.transform.rotate(new Laya.Vector3(-30, 0, 0), true, false); // 创建光源 var light = scene.addChild(new Laya.DirectionLight()); light.color = new Laya.Vector3(1, 1, 1); light.direction = new Laya.Vector3(0.3, -1, 0); // 创建地图模型和材质 var map = scene.addChild(new Laya.MeshSprite3D(Laya.PrimitiveMesh.createPlane(50, 50))); var mapMat = new Laya.BlinnPhongMaterial(); mapMat.albedoColor = new Laya.Vector4(0.5, 0.5, 0.5, 1); mapMat.renderMode = Laya.BlinnPhongMaterial.RENDERMODE_OPAQUE; map.meshRenderer.material = mapMat; // 创建障碍物模型和材质 var obstacle = scene.addChild(new Laya.MeshSprite3D(Laya.PrimitiveMesh.createBox(1, 2, 1))); var obstacleMat = new Laya.BlinnPhongMaterial(); obstacleMat.albedoColor = new Laya.Vector4(0, 0.5, 0, 1); obstacleMat.renderMode = Laya.BlinnPhongMaterial.RENDERMODE_OPAQUE; obstacle.meshRenderer.material = obstacleMat; obstacle.transform.translate(new Laya.Vector3(-5, 0, 0)); // 创建迷雾层和材质 var fogLayer = scene.addChild(new Laya.MeshSprite3D(Laya.PrimitiveMesh.createPlane(50, 50))); var fogMat = new Laya.UnlitMaterial(); fogMat.albedoColor = new Laya.Vector4(0, 0, 0, 1); fogMat.renderMode = Laya.UnlitMaterial.RENDERMODE_TRANSPARENT; fogMat.renderQueue = Laya.Material.RENDERQUEUE_TRANSPARENT; fogLayer.meshRenderer.material = fogMat; fogLayer.transform.translate(new Laya.Vector3(0, 10, 0)); fogLayer.transform.rotate(new Laya.Vector3(90, 0, 0), true, false); // 创建渲染器 var renderer = Laya.stage.addChild(new Laya.Renderer()); renderer.render(scene, camera); // 更新迷雾层 Laya.timer.frameLoop(1, this, function() { var range = 5; // 迷雾范围 var pos = camera.transform.position; var fogPos = fogLayer.transform.position; fogPos.x = pos.x; fogPos.z = pos.z; fogMat.tilingOffset = new Laya.Vector4(range, range, -pos.x / range, -pos.z / range); }); ``` 在这个示例中,我们创建了一个简单的地图和障碍物,并使用BlinnPhongMaterial和UnlitMaterial给它们上色。然后创建了一个迷雾层,使用UnlitMaterial和透明渲染模式来遮挡地图和障碍物。在每帧更新时,根据相机的位置和迷雾范围,更新迷雾层的位置和纹理坐标,以实现迷雾效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值