3D Resource for CoderDojo?

Hi Folks,

I’m looking for suggestions for 3D web apps is sites that can be used to help teach coding. It does not have to be about 3D coding but I’m looking for 3D visuals to keep the kids interested.

I currently mentor at school CoderDojo and we struggle to keep the kids interested and we only have Chromebooks available to work on, so we can’t easily work with local files.

Ideally I’d like to keep the kids interested by showing them things that look like Roblox, Fortnite, Minecraft etc but can be used to produce basic coding tutorials, such as making characters move etc.

The kids currently use Scratch, Code.org, Hour of Code, projects.raspberrypi.org, tynker.com, trinket.io. Websites that require a user sign up are a major issue (managing a classroom full of kids who don’t know their email address, also nobody wants the kids mailboxes being spammed by a stack of services).

Ideally I would find something that can be used to construct coding lessons as then the content can be tuned to keep it relevant, interesting and structured. I have looked at building such a thing with threejs, the real trick is in language parse/compilation in the browser and offering a variety of languages (we do js, python and blocks).

The kids are currently aged 10-11. We started the classes when they were about 8 yrs old.

Any ideas appreciated!

Not a sufficient answer for your question, as the kids need a login (Google), but I found AppInventor easy to interest them as they can build apps for their own devices and they will find the ‘syntax’ easy enough, as it’s the same block-building syntax as Scratch (albeit with a lot more possibilities).

1 Like

The minecraft examples are actually fairly simple. Depending on what age the children you’re teaching are, maybe you could use those?

https://threejs.org/examples/?q=minecraft#webgl_geometry_minecraft

There’s also a voxel builder example:

https://threejs.org/examples/#webgl_interactive_voxelpainter

And there’s a loader for the lego ldraw format. It’s a bit less simple since there’s a menu to load different files, but you could strip it down to load just one file at a time.

https://threejs.org/examples/?q=loader#webgl_loader_ldraw

And finally, the code in this example might be a bit too complex, but it’s a good demo of how character animations are blended together. I’d imagine children that like gaming might be interested in playing with the sliders in this one.

https://threejs.org/examples/#webgl_animation_skinning_blending

2 Likes

Thanks for the suggestions so far!

This looks quite interesting as a potential base to work from : Sketchbook v0.4 (three.js + cannon.js playground) https://jblaha.art/sketchbook/latest - if could be combined with a tool to build simple tutorials/scenarios and expose tutorial specific properties and methods it could work such as character.walkForward(), car.drive(20), character.onCollision() etc. It would also need a framework to interactively code (like blockly, js or python).

The problem I’ve found with existing sites is that they seem quite limited or they’re often more focused on building a business than they are on being useful.

1 Like

@looeee so after a short discussion about how programmers don’t generally write everything from scratch themselves and instead use libraries that do what they need, I showed them three.js examples and we talked about animation rigging and fornite emotes :slight_smile:

1 Like