three+pixi 将二维和三维结合

PIXI+THREE

使用 PIXI 和 THREE 将三维和二维渲染在同一个 canvas 下面

效果

思路

1. 初始化 PIXI 的 Application, 作为 pixi 最重要的变量

const app = new PIXI.Application({
    width: 800,
    height: 600,
    // 像素
    resolution: window.devicePixelRatio,
    // 透明
    transparent: true,
    // 抗锯齿
    antialias: true,
 });

2. 创建 container 并加入到 app.stage 中
3. 创建自己的 sprite, 也就是上图 pixi 中标识的 图片
4. 将 pixi 创建的 canvas 加入到 body 中

---

5. 创建 Three 相关变量, camera, scene, renderer, box, light
6. 将相关变量设置好内容
7. 新建 pixi 中的 sprite, 名为 sprite3D, 新建 PIXI.Texture , source 为 three 中 renderer.dom
8. 在 animate 方法中 更新 texture

源代码

import * as THREE from "three";
import * as PIXI from "pixi.js";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import img1 from "./img/img1.jpg";

window.PIXI = PIXI;

function init() {
  const { container, app, sprite } = initPixi();
  // 设置图片位置
  sprite.scale.set(0.5, 0.5);
  sprite.position.set(200, 200);

  const { scene, renderer, camera, orbitControls, box } = initThree(app);

  // 设置三维盒子变量
  const sprite3DTexture = PIXI.Texture.from(renderer.domElement);
  const sprite3D = new PIXI.Sprite(sprite3DTexture);
  sprite3D.width = 300;
  sprite3D.height = 200;
  sprite3D.position.set(50, 100);
  container.addChild(sprite3D);

  // 循环方法
  function animate() {
    requestAnimationFrame(animate);

    sprite.rotation += 0.01;
    // 更新 three 渲染的内容
    sprite3DTexture.update();

    box.rotation.x += 0.01;
    box.rotation.y += 0.01;

    orbitControls.update();

    renderer.render(scene, camera);
  }
  animate();
}

function initPixi() {
  const app = new PIXI.Application({
    width: 800,
    height: 600,
    // 像素
    resolution: window.devicePixelRatio,
    // 透明
    transparent: true,
    // 抗锯齿
    antialias: true,
  });

  const container = new PIXI.Container();
  // stage 全局内容
  app.stage.addChild(container);

  const spriteTexture = createdPixiTexture(img1);
  const sprite = new PIXI.Sprite(spriteTexture);

  container.addChild(sprite);

  document.body.appendChild(app.view);

  return { container, app, sprite };
}

function createdPixiTexture(url) {
  return PIXI.Texture.from(url);
}

function initThree(app) {
  const scene = new THREE.Scene();
  // 环境光
  scene.add(new THREE.AmbientLight(0xffffff, 0.8));

  scene.add(new THREE.AxesHelper(100));
  const pointLight = new THREE.PointLight(0xfd08aa, 1);
  pointLight.position.set(100, 100, 100);

  const renderer = new THREE.WebGLRenderer({
    // 设置透明
    alpha: true,
    antialias: true,
  });
  // 设置 pixi 限定的尺寸
  renderer.setSize(300, 200);
  renderer.pixelRatio = window.devicePixelRatio;

  const camera = new THREE.PerspectiveCamera(45, 300 / 200);
  camera.position.set(200, 300, 200);
  camera.lookAt(0, 0, 0);

  const orbitControls = new OrbitControls(camera, app.view);
  orbitControls.update();

  const box = new THREE.Mesh(
    new THREE.BoxBufferGeometry(40, 50, 60),
    new THREE.MeshStandardMaterial({
      color: 0xfea67a,
      roughness: 2,
    })
  );
  scene.add(box);

  return { scene, camera, renderer, orbitControls, box };
}

init();