Question

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

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

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

Answer 1

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

我可以问你想要达到什么目标吗？

Answer 2

是的，这是非常容易的。如果您有很多自定义形状，文本或复杂的呈现方式，那么在常规的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.

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

2 个答案: