PIXI.JS和THREE.JS的结合使用（1）

一.PIXIJS的导入

1.cdn方式（此链接不建议使用于生产环境）

<script src="https://pixijs.download/release/pixi.js"></script>

2.npm方式

--npm install pixi.js

二.入门使用

1.绘制舞台

const app = new PIXI.Application({ backgroundColor: 0x1099bb });

 

2.添加内容

 

    /*举了一个绘制文本的例子*/
    const basicText = new PIXI.Text("text -- pixi");
    basicText.x = 50;
    basicText.y = 100;

    app.stage.addChild(basicText);

3.放置舞台

    document.body.appendChild(app.view);

　　以上便是最基础利用pixijs所设置出来的应用

 

三.一种结合threejs的应用（基础）

1.mesh材质

2.PlaneGeometry 用于生成平面几何图形的类。

3.MeshBasicMaterial 一种以简单的阴影（平面或线框）方式绘制几何图形的材料。

现在我们有这三项threejs提供给我们的方法，思路就是pixijs生成的 canvas一张照片，更形象的说作为一种材质模型放置到场景scene里

代码举例：

      let geometry1 = new THREE.PlaneGeometry(80, 50);
      let material1 = new THREE.MeshBasicMaterial({
        map: new THREE.TextureLoader().load(url),
        side: THREE.DoubleSide,
      });
      let rect = new THREE.Mesh(geometry1, material1);
      rect.position.set(0, 50, 25.1);
      scene.add(rect);

四.会遇见的问题

在生产过程中有时候可能需要获取 pixiJs 生成的 canvas 上下文，或者需要导出当前 canvas 的 base64 ，从而实现保存图片的功能等，这里我需要获取canvas上下文来生成材质。

 

      const stage = app.stage;
      const renderer = app.renderer;
      var x = renderer.plugins.extract.canvas(stage).toDataURL();

 

如果你是原生canvas可直接

   　　canvas.toDataURL("image/jpeg")，