Question

[soniapello]

Hi Srinivasan Your work looks amazing Would you consider making some tutorials about this ? about How you convert a 2d floorplaner in 3d ? How your dispatchEvent are used with their type and item ? Some lines to explain how it works under the hood

[aalavandhaann]

Dear Soniapello,

Thanks for your compliments. As mentioned in the README this is a hand-picked conversion of the original project that was in Typescript to Javascript. The original was using jquery callbacks system to do the observer model. I felt this was not good and changed it to the EventDispatcher model as supported by threejs.

Regarding your conversion of 2D floorplanner to 3D, this is an idea I reused from the original. There are two rendering layers in the system, one is webgl(3d) and canvas (2d). The 2D canvas is only for creating the layout of the floorplan, to add walls and identify the rooms. The 3D (threejs) part is to visualize the layout and helps to add furniture to the layout.

Of course I would be happy to provide tutorials for both developers and non-developers but unfortunately the time is quite limiting allowing only to focus on the code. I am looking to organically grow this framework over time. Otherwise I am happy to answer any specific questions and please feel free to shoot any.

Regards,

0K

[aalavandhaann]

Check if this link is useful.

Regards,

0K

[soniapello]

Srinivasan So to create new event we had to instantiate the blueprint instance var blueprint3d = new BP3DJS.BlueprintJS(opts); and then add the event like this

var three = blueprint3d.three;
three.addEventListener(BP3DJS.MYEVENT, function(o){});

and finally dipatch it with dispatchEvent

myevent(item)
    {
        this.dispatchEvent({type:MYEVENT, item:item});
}

Is it the right step ?

[aalavandhaann]

I am not sure what you are trying to achieve here?

• dispatchEvent is a mechanism to dispatch an event so all the listeners get notified
• addEventListener is the mechanism through which a listener subscribes to one that is a dispatcher
• removeEventListener is the mechanism to stop subscription of an event from a dispatcher

For using Blueprint-js you don't have to worry about dispatchEvent. Just subscribe to the events it notifies. Important events have been mentioned in the wiki. More is to be updated soon.

A short note on EventDispatcher class from threejs

For example if there is ObjectA that extends EventDispatcher it can start dispatchingEvents.

class ObjectA extends EventDispatcher
{
    constructor()
    {
           super();
           var scope = this;
           document.addEventListener('keydown' , ()=>{scope.sayHello();});
    }

   sayHello()
   {
       this.dispatchEvent({type:'IAMSAYINGHELLO', anyotherparameter:'something'});
   }
}

Now to use ObjectA in your javascript you would do

var foo = new ObjectA();
foo.addEventListener('IAMSAYINGHELLO', function(params)
{
    console.log(' "foo" AN INSTANCE OF ObjectA is SAYING HELLO AND :::  ', params.type, params.anyotherparameter);
});

The above snippet will log "foo" AN INSTANCE OF ObjectA is SAYING HELLO AND ::: IAMSAYINGHELLO, something to the console window.

The EventDispatcher class is basically from threejs itself. Kindly refer to the documentation of threejs for more details.

Regards,

0K

[soniapello]

Hi @aalavandhaann I made a small codepen demo with 2d canvas line and I try to find out how to convert a 2d canvas line in 3d wall with three.js. I would be very grateful to you if you can help me to understand this.

[aalavandhaann]

@soniapello,

I see that you are trying to grasp the fundamentals of graphics (2d and 3d). This is not the forum to do that and rather it's best to stick to issues, and framework related discussions. You can email me @ ashok.srinivasan at Gmail dot com. I will point you to resources or answer questions over there.

Regards,

0K