Webでできる表現を広げよう、PixiJS編

script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/6.2.0/browser/pixi.min.js"></script>

npm install pixi.js

import * as PIXI from 'pixi.js'

const app = new PIXI.Application({
    width: 760,
    height: 400,
    view: document.getElementById('2d'),
    resolution: window.devicePixelRatio || 1,
    autoResize: true,
    backgroundColor: 0xafeeee,
});
const sprite = PIXI.Sprite.from('./snow_yukiotoko.png');
app.stage.addChild(sprite);

const sprite = PIXI.Sprite.from('./snow_yukiotoko.png');

app.stage.addChild(sprite);

const app = new PIXI.Application({
const app = new PIXI.Application({
    view: document.getElementById('2d'),
    resolution: window.devicePixelRatio || 1,
    autoResize: true,
    backgroundColor: 0x1099bb
});

const spriteWidth = 512;
const spriteHeight = 512;
// テクスチャの配列を用意する
const frames = [
    PIXI.Texture.from('img/Jump (1).png'),
    PIXI.Texture.from('img/Jump (2).png'),
    PIXI.Texture.from('img/Jump (3).png'),
    PIXI.Texture.from('img/Jump (4).png'),
    PIXI.Texture.from('img/Jump (5).png'),
    PIXI.Texture.from('img/Jump (6).png'),
    PIXI.Texture.from('img/Jump (7).png'),
    PIXI.Texture.from('img/Jump (8).png'),
    PIXI.Texture.from('img/Jump (9).png'),
    PIXI.Texture.from('img/Jump (10).png'),
    PIXI.Texture.from('img/Jump (11).png'),
    PIXI.Texture.from('img/Jump (12).png'),
    PIXI.Texture.from('img/Jump (13).png'),
    PIXI.Texture.from('img/Jump (14).png'),
    PIXI.Texture.from('img/Jump (15).png'),
];
// テクスチャの配列からAnimatedSpriteを作成する
const animSprite = new PIXI.extras.AnimatedSprite(frames);
animSprite.x = spriteWidth
animSprite.y = spriteWidth / 2;
animSprite.pivot.set(spriteWidth / 2, spriteHeight / 2);
animSprite.animationSpeed = 0.3;
// アニメーション再生開始
animSprite.play();
app.stage.addChild(animSprite);

// Rendererの作成
const dragRenderer = new PIXI.Renderer({
    width: document.getElementById('gl').clientWidth,
    height: document.getElementById('gl').clientHeight,
    view: document.getElementById('2d'),
    autoDensity: true,
    forceFXAA: true,
    clearBeforeRender: true,
    preserveDrawingBuffer: true,
    resolution: window.devicePixelRatio || 1,
    backgroundColor: 0x1099bb,
});

// コンテナーの生成
const dragStage = new PIXI.Container();

// ローダーの生成
const dragLoader = new PIXI.Loader();
dragLoader.add('dragImg', './baseball_ball.png');

// ロードされたら描画
dragLoader.load((dragLoader, resources) => {
    dragLoader.reset();
    setup(resources);
});

function setup(resources) {
    //Create the `dragImg` sprite from the texture
    let dragImg = new PIXI.Sprite(resources.dragImg.texture);

    // インタラクティブ性を持たせる。
    // マウスやタッチイベントで操作できるように
    dragImg.interactive = true;
    // マウスオーバーしたら、アイコンを矢印から手に
    dragImg.buttonMode = true;
    // アンカーポイントの位置。中心なら0.5
    dragImg.anchor.set(0.5, 0.5);
    //拡大率
    dragImg.scale.set(0.3, 0.3);


    // イベントを設定
    dragImg
        .on('pointerdown', onDragStart)
        .on('pointerup', onDragEnd)
        .on('pointerupoutside', onDragEnd)
        .on('pointermove', onDragMove);

    // レンダリングの絶対位置
    dragImg.x = dragRenderer.width / 2;
    dragImg.y = dragRenderer.height / 2;


    //stageに画像を追加
    dragStage.addChild(dragImg);
    //レンダリング
    dragRenderer.render(dragStage);
}

function onDragStart(event) {
    this.data = event.data;
    this.alpha = 0.5;
    this.dragging = true;
    dragRenderer.render(dragStage);
}

function onDragEnd() {
    this.alpha = 1;
    this.dragging = false;
    this.data = null;
    dragRenderer.render(dragStage);
}

function onDragMove() {
    if (this.dragging) {
        const newPosition = this.data.getLocalPosition(this.parent);
        this.x = newPosition.x;
        this.y = newPosition.y;
    }
    dragRenderer.render(dragStage);
}

const app = new PIXI.Application({
    view: const area = document.getElementById('2d'),
    backgroundColor: 0x1099bb
});

const container = new PIXI.Container();
const texture = PIXI.Texture.from('./youkai_nurikabe.png');

texture.once('update', function () {

　　　　　　　　// 頂点数
    const verticesX = 3;
    const verticesY = 3;
    const mesh = new PIXI.SimplePlane(texture, verticesX, verticesY);

    mesh.x = 200;
    mesh.y = 200;
    mesh.height = 0.7;
    mesh.width = 0.7;
    mesh.scale.x = 0.3
    mesh.scale.y = 0.3
    container.addChild(mesh);
    app.stage.addChild(container);

    app.ticker.add(function (delta) {
        const uvs = mesh.geometry.buffers[0].data;
        for (let i = 0; i < uvs.length; i++) {
            uvs[i] += Math.floor(Math.random() * Math.floor(3)) - 1;
        }
        mesh.geometry.buffers[0].update();
    })

});

<script src="https://cdn.jsdelivr.net/npm/pixi3d@1.0.0/dist/pixi3d.min.js"></script>

npm install pixi3d

const app = new PIXI.Application({
    view: document.getElementById('2d'),
    antialias: true,
    backgroundColor: 0xffffff
});

let mesh = app.stage.addChild(PIXI3D.Mesh3D.createCube());

let light = Object.assign(new PIXI3D.Light(), {
    x: -1,
    z: +3
});
PIXI3D.LightingEnvironment.main.lights.push(light);

let rotation = 0;
app.ticker.add(() => {
    mesh.rotationQuaternion.setEulerAngles(0, rotation++, 0);
});