Quantcast
Channel: Pixi.js Latest Topics
Viewing all articles
Browse latest Browse all 3978

Pixi Projection 3D Surface

$
0
0

I've been having fun with pixi-projection and familiarised myself with the examples, classes and underlying code.  I've been able to create a Camera3d, emultated a Skybox, added some billboard Sprite3ds, all good.

Next I wanted to create a Surface (defined by a tri or quad of x,y,z).   For example

            [{x: 0, y: 0, z: 0},
            {x: 100, y: 0, z: 0},
            {x: 100, y: 0, z: 100},
            {x: 0, y: 20, z: 100},]

I didn't find an in-built way to achieve this, or an approach to modify the underlying z vertices of Sprite3D?  Did I miss something?

So I brute forced an approach using 4 x Sprite3ds to represent the "corners", transformed them with the Camera3d, then using toGlobal() passed their Points to Sprite2D.mapSprite() to render a projection.  Success, despite being a hacky blend of 2D in 3D.  I was even able to include the result in a Container3d with other Sprite3ds in such a way that it all made sense and could be transformed as a whole and zSorted based on getDepth().  However z-clipping remains problematic.

Is there a better approach?  I'm hoping someone more familiar with the plugin would be able to point me to a lower-level solution :)

 

Edit: I've removed the need for the 4 x Sprite3ds in the brute force approach (by using the respective proj.local Matrices) ... so I'm confident this can now be done, but still feels a bit hacky.


Viewing all articles
Browse latest Browse all 3978

Trending Articles