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

Question

是否可以使用 pixi.js 制作 2D 图形，然后使用 three.js 添加 3D 对象或在同一视图中旋转 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.

Answer 2

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

请问你想达到什么目的？