Skip to main content

pixi.js + three.js

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script type="importmap">
    {
      "imports": {
        "three": "https://cdn.jsdelivr.net/npm/three@0.176.0/+esm",
        "pixi.js": "https://cdnjs.cloudflare.com/ajax/libs/pixi.js/8.6.6/pixi.min.mjs",
        "xnew": "https://unpkg.com/xnew@2.5.x/dist/xnew.module.js",
        "xnew/addons/xthree": "https://unpkg.com/xnew@2.5.x/dist/addons/xthree.module.js",
        "xnew/addons/xpixi": "https://unpkg.com/xnew@2.5.x/dist/addons/xpixi.module.js"
      }
    }
  </script>
  <script type="module" src="./script.js"></script>
</head>

<body style="margin: 0; height: 100vh;">
  <div id="main" style="width: 100%; height: 100%;"></div>
</body>

</html>
script.js
import * as THREE from 'three';
import * as PIXI from 'pixi.js';
import xnew from 'xnew';
import xthree from 'xnew/addons/xthree';
import xpixi from 'xnew/addons/xpixi';

xnew('#main', Main);

function Main(self) {
  const width = 800, height = 400;

  // three 
  xnew((self) => {
    xnew({ style: { position: 'absolute', inset: '0' } }, xnew.Screen, { width, height });
    xthree.setup();
    xthree.camera.position.set(0, 0, +100);
    xnew(Cubes);
  });

  // pixi
  xnew((self) => {
    xnew({ style: { position: 'absolute', inset: '0' } }, xnew.Screen, { width, height });
    xpixi.setup();
    xnew(Boxes);
  });
}

function Boxes(self) {
  const object = xpixi.nest(new PIXI.Container());
  object.position.set(800 / 2, 400 / 2);

  for (let y = -1; y <= 1; y++) {
    for (let x = -1; x <= 1; x++) {
      xnew(Box, { x: 80 * x, y: 80 * y, size: 40, color: 0xEA1E63 });
    }
  }
  return {
    update() {
      object.rotation += 0.01;
    },
  };
}

function Box(self, { x, y, size, color }) {
  const object = xpixi.nest(new PIXI.Container());
  object.position.set(x, y);
  object.addChild(new PIXI.Graphics().rect(-size / 2, -size / 2, size, size).fill(color));

  return {
    update() {
      object.rotation += 0.01;
    },
  };
}

function Cubes(self) {
  const object = xthree.nest(new THREE.Object3D());

  for (let z = -1; z <= 1; z++) {
    for (let y = -1; y <= 1; y++) {
      for (let x = -1; x <= 1; x++) {
        xnew(Cube, { x: 15 * x, y: 15 * y, z: 15 * z, size: 6 });
      }
    }
  }
  return {
    update() {
      object.rotation.y += 0.01;
      object.rotation.z += 0.01;
    },
  };
}

function Cube(self, { x, y, z, size }) {
  const geometry = new THREE.BoxGeometry(size, size, size);
  const material = new THREE.MeshNormalMaterial();
  const object = xthree.nest(new THREE.Mesh(geometry, material));
  object.position.set(x, y, z);

  return {
    update() {
      object.rotation.x += 0.01;
      object.rotation.y += 0.01;
    },
  };
}