Pixi.js: three.js development!

[nidiy]

Hello, how can i combine with three.js development?

[ivanpopelyshev]

@GoodBoyDigital had a plugin for it. There were also two or three different experiments independent from @GoodBoyDigital 's

[simplygreatwork]

Some tools and libraries are often used because they're popular. I use Pixi.js because it's the best 2D engine in town. So I feel compelled to add that XeoGL exists as a 3D environment for JavaScript and WebGL - as an alternative to ThreeJS. It all depends on what you need to do. But I consider XeoGL to be a "gem" as I do Pixi.

[nidiy]

I will pixi.js share a canvas and context with three.js but only three.js will show that the code is shown below.
I would like to use pixi.js to achieve 3D games ui, I do not know what a good way?

` var app = new PIXI.Application(800, 600, {backgroundColor : 0x1099bb});
document.body.appendChild(app.view);
// create a new Sprite from an image path
var bunny = PIXI.Sprite.fromImage('asset/textures/colors.png')
// center the sprite's anchor point
bunny.anchor.set(0.5);

// move the sprite to the center of the screen
bunny.x = app.renderer.width / 2;
bunny.y = app.renderer.height / 2;

app.stage.addChild(bunny);

// Listen for animate update
// some 3js shit
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, 800 / 600, 1, 10000);
camera.position.z = 1000;
var mesh = new THREE.Mesh(new THREE.BoxGeometry(200, 200, 200), new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true }));
scene.add(mesh);

var renderer3d = new THREE.WebGLRenderer({ canvas: app.view, context: app.renderer.gl,premultipliedAlpha:true });
renderer3d.autoClear = true;
// start animating
animate();
function animate() {
    requestAnimationFrame(animate);
    // just for fun, let's rotate mr rabbit a little
    bunny.rotation += 0.1;
    app.renderer.currentRenderer.start();
    app.render(app.stage);
    app.renderer.currentRenderer.stop();
    // ...
    mesh.rotation.y += 0.01;
    renderer3d.render(scene, camera);
}`

[ivanpopelyshev]

It doesn't work like that. please search for special pixi webgl code that works, it was on forums, and here, and even in gitter. @GoodBoyDigital certainly had it somewhere.

[ivanpopelyshev]

Found it: https://github.com/pixijs/pixi.js/issues/3230

[nidiy]

Thank you for your suggestion, but I downloaded the Pixi_three.zip instance of GoodBoyDigital and could not. Run pixi_three.html without any show?

[ivanpopelyshev]

4344 We actually have a bug with reset :) That PR has working pixi+three demo https://jsfiddle.net/xyL1sv02/2/

[ivanpopelyshev]

One more thing. This one helps to render threejs into texture:

https://jsfiddle.net/c34p532r/24/

renderer3D.state.reset();
renderer3D.setRenderTarget(null); //<--framebuffer reset!
renderer3D.render(scene, camera, renderTarget);

[nidiy]

@ivanpopelyshev thank you very much for your help!

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.