search

jonobr1 / two.js

A renderer agnostic two-dimensional drawing api for the web.
https://two.js.org
MIT License
8.31k stars 455 forks source link

[Feature Request] 3D Objects on 2D Planes as perspective #551

Open joex92 opened 3 years ago

joex92 commented 3 years ago

I like a lot Two.js, I know that the project as a whole is the 2D drawing but I was thinking that maybe you could add a way to draw 3D shapes using geometry and perspective formulas to show it on a 2D plane... The methods could be similar to Three.js methods (the methods names I mean), that's not relevant I believe.... Anyways, I was thinking this because I like Two.js library and I would want to stay in 1 library instead of having many... maybe this could be like an addon to Two.js, idk... Like how p5 has many addons... I really believe this could be interesting to add... it could be an alternative for someone that needs to show some 3D shape for a moment and adding a 2nd library would be too much... idk, it's just an idea... but it wouldn't be actually 3D rendering, just a 2D draw that looks 3D...

jonobr1 commented 3 years ago

Thanks for the kind words! While a lot of the API in Two.js is inspired (and continues to reference Three.js), it's unlikely something like this will land in the repository any time soon. I think a plugin architecture makes a lot of sense for this type of request in Two.js and believe it would involve quite a lot of modules that don't currently exist (like projecting points into 2D space, geometry, materials).

I understand for this issue you're not interested in other libraries, but I think another interesting idea in this realm is being able to pass the WebGL context from one library to another as posed in this issue. Also, it is old, I have provided an example to build 3D extruded geometry in Three.js using Two.js here.

Lastly, I have used both Two.js + Three.js to great effect for many projects. Most notably the interactive VR music video What You Don't Know. Here I dynamically make many textures (primarily for the in world text, but could be used for any kind of texture) in Two.js and then upload them to Three.js to place them in space. Also, in Tether the entire Two.js scene is uploaded to a Three.js texture and then GLSL post processing effects are added on top. This style of working in 2D and then adding some GLSL effects on top is quite common for Pixi.js.

Hope this helps at least expand the discussion a bit and gives references for anyone else looking for these types of features in lieu of a Two.js plugin for 3D.