pixi.js 和three.js 可以一起使用吗？答案

【问题标题】：Can pixi.js and three.js be used together?pixi.js 和three.js 可以一起使用吗？
【发布时间】：2019-08-23 08:51:18
【问题描述】：

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

例如，是否可以使用 pixi 制作 2D gui，然后使用 three.js 将其旋转到 3D 场景中？

还是说不能这样用两个库？

【问题讨论】：

是的，可以将它们粘合在一起，但这取决于您需要用它做什么（您的 2D GUI 将如何工作）？
有趣。你最近在安卓上试过推特界面吗？这是一个 2D 界面，但是当您转到新视图/屏幕时，会有轻微的 3D 缩放动画。诸如此类的微妙事物是我所想象的。你认为这行得通吗？您能否简要描述一下如何将两者粘合在一起（描述一个小用例）？
这听起来像是使用 CSS 动画/翻译可以更好地满足需求

标签： javascript 3d three.js pixi.js

【解决方案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.

【讨论】：

感谢 jixtra！这确实是混合它们的好方法。我还想知道是否可以在单个画布中将它们混合在同一个 3D 空间中，但这似乎不可行。一种方法是为每个 Pixi 形状设置一个单独的画布，但这可能会变得昂贵。
我不确定是否可以共享同一个画布。我想你可以将同一个画布传递给 pixi 和三个 js 渲染器，看看会发生什么:) 对我来说，我希望 pixi js 纹理在单独的材质中，而不是全屏，所以我需要单独的画布，但如果你只想要 pixi作为全屏覆盖，您可以尝试在同一个画布上运行。

【解决方案2】：

不，您需要两个不同的画布。一种可能性是将 pixi 的画布渲染为纹理并将其映射到 3d 形状（在 three.js 画布中），但它看起来既不简单也不实用。我宁愿建议您使用 CCS3 转换，以便将 3D 转换应用到您的 pixi 画布。

请问你想达到什么目的？

【讨论】：

响应较晚，但我想将 pixi 对象与 Three.js 对象放在相同的 3D 空间中。一种方法是将单个 Pixi 对象渲染到单独的画布上，并从中制作 THREE.CanvasTexture，但这会很昂贵。