Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Livecoding: 3D Is Hard, WebAR Defeats Me

DZone's Guide to

Livecoding: 3D Is Hard, WebAR Defeats Me

If you're interested in learning how to make 3D graphics for your web applications, read on to see what worked and what didn't for this dev.

· Web Dev Zone ·
Free Resource

Start coding something amazing with our library of open source Cloud code patterns. Content provided by IBM.


You know what? This 3D stuff is way too hard. None of this makes any sense to me anymore.

All I wanted to do today was make a nice little hurricane travel across an augmented reality marker. In theory, all you need for that is a nice particle system and some parameter tweaking. Instead of particles flying around randomly, you want them to twirl around in a cone shape of some sort.

But noooo...

We tried that with aframe-particle-system-component.

That did not quite work.

Then we searched for three.js examples that looked close enough that they could be a hurricane with some param tweaking. The closest we could find was the GPU Particle System example.

It's got everything we need:

  1. Many particles.
  2. Particles follow some sort of wind pattern.
  3. Parameters to tweak.

Turning it into an aframe component for our setup should be easy. Aframe is an abstraction on top of Three.js, after all.

In theory, all you have to do is to register a new Aframe component, put your example initiation into init(), and your animation stuff into tick(). Instead of rendering with the Three.js renderer, you setObject3D on the Aframe object.

AFRAME.registerComponent ( 'hurricane' , {
    scheme: { } ,
    init: function ( ) {
        // initiation code
    } ,
    tick: function (now, delta) {
        // animation code
    }
} ) ;

Then you could use it like this: <Entity hurricane />, or without JSX, like this: <a-entity hurricane />.

It didn't work. We tried fiddling with it and changing things here and there and nothing worked. No matter what, nothing showed up on the screen.

In a final act of defiance, we found this cool aframe-environment-component and put a giant mushroom forest around our Minecraft guy.

I guess that's cool, too. I dunno, I'm kinda disappointed. I was hoping we could build something cool, but this whole 3D-on-the-web business is almost as big a mess as all the D3 examples you find out there.

What is it with everybody who writes these examples relying on global variables for everything? Use function arguments, damn it! That's what they're there for.

And what's with all the imperative code? Everything is just add this and this and this and then change this and that. How am I supposed to understand what's going on?

Ugh ... we'll play with something new next week. Any suggestions?

Code something amazing with the IBM library of open source blockchain patterns. Content provided by IBM.

Topics:
web dev ,three.js ,web application development ,augmented reality

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}