[Plugin] Three.js 3D canvas

0 favourites
From the Asset Store
Pixel Destruction like in "Worms" (Drawing Canvas based)
  • QuaziGNRLnose Amazing! LOL, I can't get the last matchstick, I keep hurling into space trying to get on the last sphere!

    I'd also like to see how does the plug in integrates with Construct.

    How do you import and place the 3d objects, is there any visual feedback from within the editor, or this is done programmatically using events? The same goes with the animations, the materials, the lights, the cameras... It would be awesome if you make a video presentation about how you setup and configure a simple scene.

    Anyway, the results are truly great, I only hope that implementing the 3D space into a 2D software doesn't end up making the workflow harder than using a native 3d middleware like Unity.

  • QuaziGNRLnose very well done Price it totally justified. I will buy as soon as you answer the peoples questions in this thread.

  • I would like to know. Is it possible to run the Three.js canvas on its own rather than "streaming" it into the c2canvas? Mobile performance is essential for me.

  • shut up and take my money kind sir...but before this happens answer the people's questions. and another thing why not make a tutorial to show how easy is to work with the plugin in c2 and with three.js how to import objects blah blah blah...a very basic intro for the beginning.

  • Schoening

    The plugin has three modes for running the three.js canvas currently. it can be streamed in with video to texture which isn't really recommended because its slow, and the function seems to only work properly in chrome. it flips the texture in ie and firefox so those are upside down, and its either a bug with those or the construct function causing this. There are two modes which add a canvas element to the page and control the CSS styling to move/stretch/angle/make transparent the three.js canvas. One mode just plops it above construct if you want to ONLY use the three.js canvas, and the last one places it below the construct canvas by modifying the zindex of the created canvas and the construct canvas with css (so you need to make the construct canvas background transparent so it shows below) The background of the three.js canvas can also be made transparent if you place it above, so stuff shows behind everything.

    Right now i haven't tested any mobile platforms (for lack of having any new enough to support webgl, but id imagine that the above or below modes should work best) i experimented with using three.js to render into the c2canvas directly but i hadn't got it to work since it messes up other rendering. i'll look into perhaps writing some modified three.js renderer for this if its something that people want enough, but right now it seems the extra canvas options are running things really well (as good as they can) on all 3 major browsers so id imagine they'd work well on those mobile platforms that support three.js . (The tiny tank demo uses the below mode if you're interested, but it's quite complex so it may be slow on simple devices, it was intended as a demo of an almost "feature complete" game to test how the plugin performed).


    As of now its only done with events, but im working on complementary plugins/behaviours to go with the main one that allow things to be placed/controlled more easily as construct objects. Right now there is a grid and axis gimbal which shows at runtime (not in the editor due to current sdk limitation) which you later disable that gives an idea of the 3D space. To take care of building the level in tiny tank i just used sprites to mock out everything/test collisions in a top down view, and linked the id of the 3d object to those to control the 3d objects, there will eventually be a complementary plugin that comes with the main one in a future update which allows objects to be controlled like this without the middleman sprite or whatever.

    Cameras/lights etc. are controlled like all other objects inside of the plugin. cameras are different in that they are not part of the scene and interface with viewports for stuff like splitscreen so they have slightly different controls. As of now imported animations isn't supported since i have to build an animation system first (the three.js animation handler isn't super user friendly), but a system for them will come soon (nothings stopping you however from animating things using construct or even other plugins to make something like the tank, which will give you way better control than importing anyway). 3D collision testing isn't worked out either since it will be part of the individual object complementary plugin to make it integrate with construct better, but you can still code simple 3D collision easily in construct either by making things top down and doing things 2D using constructs collision system directly (this is basically how a game like league of legends or an rts works) or by writing simple tests against the dummies for primitives like spheres/ramps/cubes/cylinder/lemon (lol) which isn't too hard if you look it up, like i did for tiny tank. I plan to perhaps make a 3D custom movement behavior later to make things way easier, and add more robust collision testing for normal information etc to be pulled from colliding geometry-geometry / primitive-primitive / primitive-geometry pairs.

    I made this plugin so that i could use the simplicity of construct to make 3D stuff easier for me (using three.js directly is fast but a huge pain for bigger projects) Unity is pretty different, in that it does have a build in scene editor for 3D etc, but doing stuff is nowhere near coding wise as in construct. They can't easily be compared, but making tiny tank to me felt no harder than making any other game medium complexity project in construct 2, besides having to deal with the complexity of making 3D artwork in bender/sculptris vs in 2D graphics in paint. I tried unity and didn't really find it that intuitive at all so i feel this will be better for a lot of people, caveats about the editor aside (making external software editor which loads scenes should be possible for me later, but its not even that necessary if you use dummies or make a lot of top-down style games)


    I'm not sure what you're asking. this plugin allows you to load and control 3D graphics using construct. the layout editor is the same if thats what youre asking, but when you add this object you can "set the position" of the 3D objects to the x,y of 2D objects in something like an rts, to make it look 3D. This plugin requires intermediate knowledge of construct, but tutorials and simplifications will come with time.

    Importing animations from blender etc. is not yet supported, but you can animate things by controlling articulated models at present (for example to make something like a car/tank/robot/plane etc.) support for skinned meshes and morph targets will eventually come.


    Animation Support ?

    • not yet, will come eventually, see other answers

    Loading the 3D Objects seems to take a while... is there a way to show the loading progress?

    • Yes, you can show loading progress by loading the models sequentially and updating some bar, i just do it all in one go the demo

    How is it integrated into C2 ?

    • models/textures are added to the files directory. Images can be whatever common format, models can be .obj or three.js JSON files (not all the imported features for JSON models are supported yet however)

    How is a basic scene setup?

    in the layout editor:

    • Add the Q3D object which is a big blank square like the paster, and adjust various properties/position/scale to control how it's integrated (see reply to schoening for more detail)
    • Create a top down / side view (2D view) of the scene in the layout editor using mock-up sprites which will be hidden/destroyed your choice, you don't even need these if you dont want to build scenes in the layout.

    in the event editor:

    • Load the models/textures in using the event editor
    • wait for the models/textures to fully load and then when they're loaded start creating the game scene/objects
    • create all the lights/materials objects etc. because of how webGL works, creating and destroying things like lights or changing too many textures/materials is slow, so its a good idea to create all your lights at the beginning or when a new area is loading, on the fly changes will cause temporary hangups (in regular three.js stuff like this is hard to get working, but i made it work as well as i could, there shouldn't be bugginess, only delays when materials are rebuilt for lights/fog etc being changed.) some things will need you to test what works best. Its good to make lights have 0 intensity to turn them off rather than destroy/create them constantly, things like that etc. The information for each action/condition in the top bar tries to clarify this stuff so try to read it.
    • make your game like any other construct game, with the added dimension for all your graphics, its not really that different.

    How do the events look like for a basic scene?

    ^ see above

    Will there be a plugin "demo" so we can test it before buying?

    likely not, since it would be difficult to track what people do with it.

    Apart from that minifying is not yet supported, it was breaking a lot of things and i figured people rather play with it now than wait a few more weeks, im working towards fixing this but its difficult since this plugin uses a "global" object a lot so that other plugins can work with it

    Images of the workflow will come soon.

  • QuaziGNRLnose , thank you for your detailed answer. I am very impressed so far, but since I am not very familiar with many technical procedures, I would really like to see a video demonstration of how you set up a basic scene. You know, practical stuff, a showcase of the things you mention above within Construct's environment, nothing fancy.

  • QuaziGNRLnose Thanks for clearing that up

    You should make your own topic to promote your plugin. Good thing I only spend a week on my plugin else I would be really jealous that this came out so soon after

    Good luck to you, and I see what I can create with that plugin ^^

  • Really impressive! This look far better that I thought!

    Just bought it

  • QuaziGNRLnose I just thought of the most important thing for my project. Do the meshes re-use the Geometry / Material?

  • QuaziGNRLnose

    Thank you for your answer... this is what i am aiming for:

    https://dl.dropbox.com/u/148996943/top3 ... ed%29.capx

    game with standard top/down view but with some 3D objects...

  • QuaziGNRLnose I just thought of the most important thing for my project. Do the meshes re-use the Geometry / Material?

    There is an option to clone the material if you want objects to share it, meaning changing one material will change the appearance of all objects with that material. Geometry is generated based on one of the primitives, stored by name and then you can create objects using the geometry and a material (note sure if this is what you meant by reusing geometry/material)

    When you load models it only has to be loaded once, then you can create objects quickly off of the model. Here are screenshots of all the currently available actions, conditions, and expressions, as well as the properties:


    Conditions (not so many at the moment):



  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • QuaziGNRLnose

    Thank you for your answer... this is what i am aiming for:

    https://dl.dropbox.com/u/148996943/top3 ... ed%29.capx

    game with standard top/down view but with some 3D objects...

    It can be done yes, but the 3D objects are all on the "same layer" so to speak

  • irina very interesting result! I' d never thought that by using scaling and not parallax would deliver such an effect! Thanks

    QuaziGNRLnose woow, that's a lot a stuff to look at!

  • QuaziGNRLnose Yeah that is what I meant.

    Boy that is a mouthful.. How come you chose to put it all into one plugin? Personally I find multiple ones more intuitive.

  • QuaziGNRLnose Yeah that is what I meant.

    Boy that is a mouthful.. How come you chose to put it all into one plugin? Personally I find multiple ones more intuitive.

    Well i'm going to add different plugins to control individual objects more easily later, but this is more of a "system object" to control everything with the other planned ones supplementing it to be used more similarly to how sprites work in c2. The biggest reason is that a lot of functionality is intertwined and separate plugins make things limited at times you don't want them to be. I figure both ways is better than only one.

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)