look ma, theres 3D now

app/thirdparty/Snaptobus/README

@@ -0,0 +1,93 @@
+//0. Add you dependencies in your controller.json :
+// { ...
+//     "controllerDependencies":  [
+//         ...
+//         "/thirdparty/Snaptobus/snap.svg-min",
+//         "/thirdparty/Snaptobus/snaptobus"
+//     ]
+// }
+// 1. Create your sprites :
+agentTypes = {
+    molecule1:{
+        type: 'circle',
+        attrs: {
+            r: 10,
+            fill: '#BFB',
+            stroke:  "#0A0",
+            strokeWidth: 2,
+        }
+    },
+    molecule2:{
+        type: 'circle',
+        attrs: {
+            r: 10,
+            fill: '#BBF',
+            stroke:  "#00A",
+            strokeWidth: 2,
+        }
+    }
+    
+}
+
+// 2. instantiate Snaptobus with the SVG playground selector, the sprites definitions,
+// and the configuration mapping bus chans, bus event, and events playloads to SNap attributes
+// You can assign a path in the event payload, or a transformer function like :
+//     fill: {
+//         arguments: [ 'age' ], // What to give from the event as function's params
+//         transformer: i => `rgb(${Math.round(255 * i / 10)},0,${Math.round(255 * (1 - i / 10))})`
+//     },
+//
+
+this.snaptobus = new Snaptobus({ 
+    snap: Snap("svg.stb"),
+    spriteDefs: this.agentTypes,
+    busConfig: [
+        {   
+            chan: 'gps:agents', // What to subscribe to
+            events: [  // What to select on this chan
+                {   eventName: 'moving', // which event will trigger a change
+                    snaps: [
+                        {
+                            selector: '#${aid}', // what svg elements do we change ?
+                            assign: { // what do we change and with what from the payload ?
+                                cx: 'attrs.x',  
+                                cy: 'attrs.y',
+                            },
+                            animate: true 
+                        }
+                    ]
+                },
+            ]
+        },
+    ]
+})
+
+
+//3. Create your sprites
+this.createAgent('molecule2', 'agent42', 100,100)
+createAgent(agentType, id,  x, y){
+    if(!Object.keys(this.agentTypes).includes(agentType)) return
+    this.agentTypes[agentType]
+    const svgAgent = this.snaptobus.snap[this.agentTypes[agentType].type]().attr(this.agentTypes[agentType].attrs)
+    svgAgent.attr({
+        id: id,
+        cx: x,
+        cy:y,
+    })
+}
+
+//4. Send a bus event like : (this is a bmsg)
+// {
+//     "channel":"gps:agents",
+//     "packet":{
+//         "eventType": "moving",
+//         "payload": {
+//             "aid": "agent42",
+//             "attrs": {
+//                 "x": "950",
+//                 "y": "650"
+//             }
+//         },
+//         "sender": "toto"
+//     }
+// }

app/thirdparty/Threetobus/threetobus.module.js

@@ -0,0 +1,87 @@
+import * as THREE from './three.module.js';
+import { OrbitControls } from './OrbitControls.module.js';
+
+export class Threetobus{
+
+    constructor(canvasEl){
+        this.canvasEl = canvasEl
+    }
+
+    init(){
+        // Scene
+            this.scene = new THREE.Scene()
+            //scene.background = new THREE.Color(0x202080)
+        
+            // Camera
+            this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
+            this.camera.position.set(3, 3, 5)
+
+            // Renderer
+            this.renderer = new THREE.WebGLRenderer({ antialias: true, canvas: this.canvasEl })
+
+            //renderer.setSize(window.innerWidth, window.innerHeight)
+
+            // Cube
+            const geometry = new THREE.BoxGeometry()
+            const material = new THREE.MeshStandardMaterial({ color: 'red' })
+            this.cube = new THREE.Mesh(geometry, material)
+            this.scene.add(this.cube)
+            this.cube.position.x+=2
+
+
+            // Light
+            const light = new THREE.DirectionalLight(0xffffff, 1)
+            light.position.set(5, 5, 5)
+            light.intensity = 2
+            this.scene.add(light)
+            this.scene.add(new THREE.AmbientLight(0xffffff, 0.4))
+
+            this.controls = new OrbitControls(this.camera, this.renderer.domElement)
+            this.renderer.render(this.scene, this.camera)
+
+            window.addEventListener('resize', () => {
+                this.camera.aspect = window.innerWidth / window.innerHeight
+                this.camera.updateProjectionMatrix()
+                renderer.setSize(window.innerWidth, window.innerHeight)
+            })
+            this.animate()
+
+            this._render()
+
+        }
+
+        _resizeRendererToDisplaySize() {
+            const canvas = this.renderer.domElement
+            const width = canvas.clientWidth
+            const height = canvas.clientHeight
+            if (canvas.width !== width || canvas.height !== height) {
+                this.renderer.setSize(width, height, false)
+                return true
+            }
+            return false
+        }
+
+        _render() {
+            if (this._resizeRendererToDisplaySize()) {
+                this.camera.aspect = this.renderer.domElement.clientWidth / this.renderer.domElement.clientHeight
+                this.camera.updateProjectionMatrix()
+            }
+            this.renderer.render(this.scene, this.camera)
+            requestAnimationFrame(this._render.bind(this))
+        }
+
+
+        animate() {
+            requestAnimationFrame(this.animate.bind(this))
+            this.cube.rotation.x += 0.01
+            this.cube.rotation.y += 0.01
+            this.controls.update()
+            this.renderer.render(this.scene, this.camera)
+        }
+                        
+}
+
+
+// Make this module available to common JS
+if(!app.LoadedModules) app.LoadedModules = {}
+app.LoadedModules.Threetobus = Threetobus