Playcanvas之加载material/skybox/font/script

这里很多都是依照官方demo做的尝试，但是奈何硬件条件一般，所以就先将常用语法记录下来，以备后用，之后再慢慢深入学习

• 简单的颜色设置

var material = new pc.BasicMaterial();
material.color.set(1, 0, 0);
// material.colorMap = diffuseMap; // 默认可以为空
material.update();
box1.model.material = material;
// or
// box1.model.meshInstances[0].material = material;
// 目前不知道原理，留个坑

• 更改模型材质

app.assets.loadFromUrl("../FYPlaycanvas/assets/textures/heart.png", "texture", 
function (err, asset) {
                var material = new pc.StandardMaterial();
                material.diffuseMap = asset.resource;
                material.update();

                entity.model.meshInstances[0].material = material;
                console.log(entity.model.meshInstances);
            });

• 为金属器具设置pc自带的金属色泽

var material = new pc.StandardMaterial();
material.metalness = 1; // 0..1 更加具有金属色泽
material.shininess = 0.5 * 100; // 0..100 由粗糙到更加具有金属光泽，甚至反光
material.useMetalness = true;
material.update();
var box1 = new pc.Entity();
box1.addComponent("model", {
   material: material,
   type: "box"
});
app.root.addChild(box1);

• 为场景添加天空盒,dds是一种图片格式

var cubemapAsset = new pc.Asset('helipad.dds', 'cubemap', {
            url: "../FYPlaycanvas/assets/cubemaps/helipad.dds"
        }, {
            type: pc.TEXTURETYPE_RGBM
        });
app.assets.add(cubemapAsset);
app.assets.load(cubemapAsset);
cubemapAsset.ready(function () {
    app.scene.setSkybox(cubemapAsset.resources);
});

• 添加文字

var createText = function (fontAsset, message, x, y, z, rot) {
            // Create a text element-based entity
            var text = new pc.Entity();
            text.addComponent("element", {
                anchor: [0.5, 0.5, 0.5, 0.5],
                fontAsset: fontAsset,
                fontSize: 0.5,
                pivot: [0.5, 0.5],
                text: message,
                type: pc.ELEMENTTYPE_TEXT
            });
            text.setLocalPosition(x, y, z);
            text.setLocalEulerAngles(0, 0, rot);
            app.root.addChild(text);
        };
// 加载字体
var fontAsset = new pc.Asset('arial.json', "font", { url: "../FYPlaycanvas/assets/fonts/arial.json" });
        fontAsset.on('load', function () {
            createText(fontAsset, 'Glossiness', 0, -2 * 0.5, 0, 0);
            createText(fontAsset, 'Metalness', -3 * 0.5, 0, 0, 90);
        });
app.assets.add(fontAsset);
app.assets.load(fontAsset);

• 为entity挂载脚本，这里是为相机实体挂载官方的飞行相机脚本

// 注意这个创建的app不是那种基础的，如：var app = new pc.Application(canvas);需要鼠标权限
var app = new pc.Application(canvas, {
    mouse: new pc.Mouse(canvas),
    keyboard: new pc.Keyboard(window)
});
var camera = new pc.Entity();
camera.addComponent("camera", {
    clearColor: new pc.Color(0.4, 0.45, 0.5)
});
camera.translate(0, 0, 4);

app.assets.loadFromUrl('../FYPlaycanvas/assets/scripts/camera/fly-camera.js', 'script', function (err, asset) {
    camera.addComponent("script");
    camera.script.create("flyCamera");
});
app.root.addChild(camera);