playcanvas知识点总结

2020-08-06

最近因为要做新的项目学习了playcanvas，之前是用threejs，

前置知识

用户手册：https://developer.playcanvas.com/zh/user-manual/
Api：https://developer.playcanvas.com/en/api/

自定义加载

在设置中的loading scene设置对应js

官网案例：
https://developer.playcanvas.com/zh/tutorials/advance-loading-screen/

透明画布

设置页面 -> RENDERING -> Transparent Canvas 勾选
将当前摄像机的Clear Color属性设置为00000000

精灵图

https://developer.playcanvas.com/zh/tutorials/sprite-sheets-with-textures/

摄像机轨道控制器

https://developer.playcanvas.com/zh/tutorials/orbit-camera/
可以用hammer.js实现更平滑的控制

物体拖拽、缩放、自动旋转

鼠标/单指控制物体旋转

https://developer.playcanvas.com/zh/tutorials/rotating-objects-with-mouse

拖拽、双指缩放

// 使用hammerjs
// 初始化
var options = {
    recognizers:[
        [Hammer.Pinch],
        [Hammer.Pan]
    ]
};

this.hammer = new Hammer(app.graphicsDevice.canvas, options);

var scaleRadio = 1; // 初始
var maxSize = 3.2, minSize = 1; // 限定大小范围

var dX = 0, dY = 0;
var xLimit = 100, yLimit = 100; // 限制移动范围

var s = new pc.Vec3(0, 0, 0); // 存储移动坐标

var moveObject = this.moveObject; // 要操作的对象

function pinch () {
  moveObject.setLocalScale(scaleRadio);

  marsContainer.setPosition(s.x, s.y, 0); // z固定
}

// 双指缩放
hammer.on("pinchstart", function(e) {
    var _scaleRadio = scaleRadio;

    hammer.on("pinchout", function(e) {
        scaleRadio = _scaleRadio * e.scale;
        if (scaleRadio > maxSize) scaleRadio = maxSize;
        
        pinch();
    });
    hammer.on("pinchin", function(e) {
        scaleRadio = _scaleRadio * e.scale;
        if (scaleRadio < minSize) scaleRadio = minSize;

        pinch();
    });
}.bind(this));

// 移动
hammer.on("panstart", function (e) {
});

hammer.on("panmove", function (e) {
    dX = dX + e.deltaX;
    dY = dY + e.deltaY;
    
    if (dY < -yLimit) dY = -yLimit;
    if (dY > yLimit) dY = yLimit;
    
    if (dX < -xLimit) dX = -xLimit;
    if (dX > xLimit) dX = xLimit;
    
    // 以750*1624屏幕中心为基准点计算，可自定义
    s = _this.cameraEntity.camera.screenToWorld(375 + dX, 812 + dY, _this.cameraEntity.camera.farClip);

    pinch();
}.bind(this));

脚本通信

https://developer.playcanvas.com/zh/user-manual/scripting/communication/

射线

案例
https://developer.playcanvas.com/zh/tutorials/?tags=raycast
两种射线判断方式
https://developer.playcanvas.com/zh/tutorials/entity-picking/

屏幕截图

直接调用canvas.toDataURL()是不行的，当前帧可能还没有渲染后，正确的方式是在app的postrender事件中调用

var Screenshot = pc.createScript('screenshot');

Screenshot.prototype.initialize = function() {
    this._triggerScreenshot = false;
    this._window = null;

    // 可以通过用户点击事件触发
    this.app.on('ui:takeScreenshot', function () {
        this._triggerScreenshot = true;
        
        // Open a new tab
        this._window = window.open('', '');
        this._window.document.title = "Screenshot";
        this._window.document.body.style.margin = "0";
    }, this);
    
    this.app.on('postrender', this.postRender, this); // 在postrender中调用方法
};

Screenshot.prototype.takeScreenshot = function () {
    // 获取当前canvas
    var canvas = this.app.graphicsDevice.canvas;

    // Show the image data in a new window/tab. 
    var img = new Image();
    img.src = canvas.toDataURL();
    this._window.document.body.appendChild(img);
};

Screenshot.prototype.postRender = function () {
    if (this._triggerScreenshot) {
        this.takeScreenshot();
        this._triggerScreenshot = false;
    }
};

https://developer.playcanvas.com/zh/tutorials/capturing-a-screenshot

线上贴图加载

// 从属性添加要改变贴图的材质
UiManager.attributes.add('myMaterial', {
    title: 'myMaterial',
    description: '贴图',
    type: 'asset',
    assetType: 'material'
});

var material = this.myMaterial.resource;

this.app.loader.getHandler("texture").crossOrigin = "anonymous"; // 如果有跨域问题

this.app.assets.loadFromUrl(url, "texture", function (err, asset) {
    var texture = asset.resource;
    
    material.diffuseMap = texture;
    material.update();
});

playcanvas与dom的交互

在编辑器使用html和css解析
这边可以直接引入vue然后在html中使用，这种方式比较利于管理代码，资源有更新时能保持统一，但是线上编辑器对于html并不友好，开发时没有本地顺畅。

var HtmlcssDriver = pc.createScript('htmlcssDriver');

// 获取html和css资源并载入
HtmlcssDriver.prototype.initialize = function() {
    var htmlAsset = this.app.assets.find('index.html');
    var div = document.createElement('div');
    div.innerHTML = htmlAsset.resource;
    document.body.appendChild(div);
    htmlAsset.on('load', function () {
        div.innerHTML = htmlAsset.resource;
    });

    var cssAsset = this.app.assets.find('main.css');
    var style = document.createElement('style');
    document.head.appendChild(style);
    style.innerHTML = cssAsset.resource;

    cssAsset.on('load', function() {
        style.innerHTML = cssAsset.resource;
    });
};

在外部使用
写好程序后打包下载，再到生成的文件夹去写，打包时取消Concatenete Scripts的勾选，这样打包下来的js文件都是分开的，容易修改。使用这种方式代码容易分散，而且打包下来的文件并没有按类型分，而是在不同文件夹，查找文件有一点麻烦，另外就是修改线上资源时要替换代码容易混乱，但是这种方式在处理dom交互逻辑时比线上开发方便，也更容易使用其他插件和库。