是否可以使用 pixi.js 制作 2D 图形,然后使用 Three.js 添加 3D 对象或在同一 View 中旋转 2D pixi 对象?
例如,可以用 pixi 制作 2D gui,然后用 Three.js 旋转到 3D 场景中吗?
或者这样使用两个库是不可能的吗?
最佳答案
是的,他们可以,而且非常简单。如果您有大量自定义形状、文本或复杂的渲染,这将轻松优于在常规 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.
关于javascript - pixi.js 和 Three.js 可以一起使用吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19069934/