window settings for axes & grid

app/thirdparty/Snaptobus/snaptobus.js

@@ -99,13 +99,10 @@ class Snaptobus{
 
 
     processBusEvent(eventType, chan, payload, userId, x){
-        console.log('processBusEvent====>',eventType, chan, payload, userId)
         const chanObj = this._curBusConfig.find(item => item.chan==chan)
         if(!chanObj) return
-        console.log('processBusEvent====>chanObj', chanObj)
         const eventObj = chanObj.events.find(item => item.eventName==eventType)
         if(!eventObj) return
-        console.log('processBusEvent====>eventObj', eventObj)
         // assign attributes in payload to all snap objects for that eventType
         // each snap is an assignation of attributes via a selector
         for(const snapDef of eventObj.snaps){

app/thirdparty/Threetobus/threetobus.module.js

@@ -134,16 +134,20 @@ export class Threetobus{
 
         if(options.grid){
             this.grid = new THREE.GridHelper(20, 20, 0x8888AA, 0x8888AA)
+            this.grid.layers.set(1)
             this.scene.add(this.grid)        
         }
         if(options.axes){
             this.axes = new THREE.AxesHelper(5, 5)
+            this.axes.layers.set(2)
             this.scene.add(this.axes)        
         }
 
         // Cameras
         this.cameras.camPerspective = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
         this.cameras.camPerspective.position.set(3, 3, 5)
+        this.cameras.camPerspective.layers.enable(1)
+        this.cameras.camPerspective.layers.enable(2)
         const aspect = window.innerWidth / window.innerHeight
         const frustumSize = 10 
         this.cameras.cam2Dtop = new THREE.OrthographicCamera(
@@ -156,6 +160,7 @@ export class Threetobus{
         ) 
         this.cameras.cam2Dtop.position.set(0, 100, 0)
         this.cameras.cam2Dtop.lookAt(0, 0, 0)
+        this.cameras.cam2Dtop.layers.enable(1)
 
         // Lights
         const light = new THREE.DirectionalLight(0xffffff, 1)
@@ -169,13 +174,14 @@ export class Threetobus{
     startRendering(canvasEl, mode){
         let renderEngine
         if(mode=='2D'){
-            renderEngine = new RenderingEngine(canvasEl, this.scene, this.cameras.cam2Dtop)
+            renderEngine = new RenderingEngine(canvasEl, this.scene, this.cameras.cam2Dtop, mode)
          } else if(mode=='3D') {
-            renderEngine = new RenderingEngine(canvasEl, this.scene, this.cameras.camPerspective)
+            renderEngine = new RenderingEngine(canvasEl, this.scene, this.cameras.camPerspective, mode)
         } else console.error('Unknown rendering mode !')
-        renderEngine.addControls(mode)       
+        renderEngine.addControls()       
         renderEngine.render()
         this.renderers.push(renderEngine)
+        return(renderEngine)
     }
 
 
@@ -207,7 +213,7 @@ export class Threetobus{
         return obj
     }
 
-    smoothMove(options){ console.log('=====>', options)
+    smoothMove(options){ 
         // options:  object, dX, dY, dZ, delay, easing, easingMode
         //      Absolute: x,y,z
         //      Relative: dx,dy,dz
@@ -242,19 +248,20 @@ export class Threetobus{
 }
 
 class RenderingEngine{
-    constructor(canvasEl, scene, camera){
+    constructor(canvasEl, scene, camera, mode){
         this.canvasEl = canvasEl
         this.scene = scene
         this.renderer = new THREE.WebGLRenderer({ antialias: true, canvas: this.canvasEl })
         this.camera = camera
+        this.mode = mode
     }
 
-    addControls(mode){
+    addControls(){
         this.controls = new OrbitControls(this.camera, this.canvasEl)
-        if(mode=='2D'){
+        if(this.mode=='2D'){
             this.controls.maxPolarAngle = 0 // Math.PI / 2
             this.controls.minPolarAngle = 0 // Math.PI / 2
-        } else if(mode=='3D'){
+        } else if(this.mode=='3D'){
         }
         
         this.controls.mouseButtons = {