javascript - pixi.js 和 Three.js 可以一起使用吗？

Question

是否可以使用 pixi.js 制作 2D 图形，然后使用 Three.js 添加 3D 对象或在同一 View 中旋转 2D pixi 对象？

例如，可以用 pixi 制作 2D gui，然后用 Three.js 旋转到 3D 场景中吗？

或者这样使用两个库是不可能的吗？

Answer 1

是的，他们可以，而且非常简单。如果您有大量自定义形状、文本或复杂的渲染，这将轻松优于在常规 html、css 和 javascript 中执行相同操作。

三个 JS 可以通过执行以下操作来使用 Pixi JS 渲染:

// globals
var pixiCanvas, pixiRenderer, threeJsPixiTexture;

// one time setup
const width = 8192; // change to your desired value
const height = 4096; // change to your desired value
pixiCanvas = document.createElement('canvas');
pixiCanvas.width = width;
pixiCanvas.height = height;
pixiRenderer = new PIXI.Renderer({ view: pixiCanvas, width: width, height: height, antialias: false, autoResize: false, resolution: 1.0, transparent: true });
threeJsPixiTexture = new THREE.CanvasTexture(pixiRenderer.view);

// render logic (in animate method most likely)

// Render stuff with pixiRenderer...
// draw rects, text, a container, whatever you want

// make sure texture updates
threeJsPixiTexture.needsUpdate = true;

// you can assign threeJsPixiTexture to the map on a material, render it as full screen quad, etc.