[Blender + Three.js] An Interactive Toys Gallery

I’m not much of a hardcore artist, but that recent HeN craze steered my back from just boring-coding to less-boring-and-more-creative-coding - mainly because of the out of the box support for three.js / glTF (you just drag and drop the exported .zip and it, like … just works :eyes: )

Playing around with some of pretty three.js features, making tiny, daily cube-dioramas out of Blender scenes (and also charging 5.000.000gp per each - because true art ain’t not cheap. :relieved::money_with_wings:)

34236 — 8-bit Drone Chase

Link: hicetnunc.xyz/objkt/34236

Tiny behind the scenes

Animations are applied to a static Blender scene in three.js by reading the passed custom properties - the movement and UV shifting on the materials is also added via JavaScript (plus the lights are dimmed like 1000x times, since three does not work well with Watt units :sweat_smile: )

Entire scene plays at 60fps - world updates are throttled to 8 / 16 / 32 fps to give a bit of an 8-bit feel though. :oncoming_police_car:

(Models are bought stocks turned into minecraft-like voxels - I didn’t model the originals myself.)

34688 — Refractive Quartz

Link: hicetnunc.xyz/objkt/34688

Tiny behind the scenes

Wanted to try out a screen-space refraction post-processing added to three not that long ago.

Blender built-in refraction cannot be directly exported to three.js, yet - so once again, a mock material is exported with a custom property that applies SSRr later in JavaScript in place of the pink placeholder. :gem: :raised_hands:

(I spam that HeN profile with whatever concepts I come up with - just to test colours and features, but don’t want to post ugly here :pleading_face::point_right::point_left: Only the ones I’m still proud of the next morning. :sweat_smile:)

1 Like