Skip to main content

text

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

<body class="m-0 p-0 w-full h-screen overflow-hidden">
  <div id="main" class="relative w-full h-full"></div>
</body>

</html>
script.js
import xnew from '@mulsense/xnew';
import xpixi from '@mulsense/xnew/addons/xpixi';
import xthree from '@mulsense/xnew/addons/xthree';
import * as PIXI from 'pixi.js';
import * as THREE from 'three';
import { FontLoader } from "three/addons/loaders/FontLoader.js";
import { TextGeometry } from "three/addons/geometries/TextGeometry.js";

xnew(document.querySelector('#main'), Main);

function Main(unit) {
  const [width, height] = [800, 600];
  xnew.extend(xnew.basics.Screen, { width, height });

  // three setup
  const camera = new THREE.OrthographicCamera(-10, +10, +10, -10, 0, 100);
  xthree.initialize({ camera, canvas: new OffscreenCanvas(width, height) });
  xthree.camera.position.set(0, 0, +100);
  unit.on('render', () => {
    xthree.renderer.render(xthree.scene, xthree.camera);
  });

  // pixi setup
  xpixi.initialize({ canvas: unit.canvas });
  unit.on('render', () => {
    xnew.emit('+prerender');
    xpixi.renderer.render(xpixi.scene);
  });

  xnew(Contents);
}

function Contents(unit) {
  xnew(HtmlText);

  // three.js (offscreen canvas)
  xnew(ThreeText);

  // pixi.js (screen canvas)
  xnew(CanvasTransfer); // three.js -> pixi.js
  xnew(PixiText);
}

function CanvasTransfer(unit) {
  const texture = PIXI.Texture.from(xthree.canvas);
  const object = xpixi.nest(new PIXI.Sprite(texture));

  unit.on('+prerender', () => {
    texture.source.update();
  });
}

function HtmlText(unit) {
  xnew.nest('<div class="absolute left-0 top-0 text-[4cqw] text-red-400 font-bold">');
  unit.element.textContent = 'This text is rendered by HTML/CSS';
}

function PixiText(unit) {
  const object = xpixi.nest(new PIXI.Text('This text is rendered by PixiJS', { fontFamily: 'Arial', fontSize: 32, }));
  object.anchor.set(0.0, 0.5);
  object.position.set(0.0, xpixi.canvas.height * 2 / 10);
}

function ThreeText(unit) {
  const object = xthree.nest(new THREE.Object3D());

  const loader = new FontLoader();
  xnew.promise(new Promise((resolve) => {
    loader.load('https://cdn.jsdelivr.net/npm/three@0.176.0/examples/fonts/helvetiker_regular.typeface.json',
      (font) => resolve(font));
  })).then((font) => {

    const geometry = new TextGeometry('This text is rendered by Three.js', {
      font,
      size: 1,
      depth: 0.5,
    });
    const material = new THREE.MeshNormalMaterial();
    const text = new THREE.Mesh(geometry, material);
    text.position.set(-17, 3, 0);
    object.add(text);
    object.rotation.set(0.2, 0.2, 0);
    object.scale.set(0.6, 1, 1);
  });
}