Closed soniapello closed 5 years ago
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,
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 ?
I am not sure what you are trying to achieve here?
dispatchEvent
is a mechanism to dispatch an event so all the listeners get notifiedaddEventListener
is the mechanism through which a listener subscribes to one that is a dispatcherremoveEventListener
is the mechanism to stop subscription of an event from a dispatcherFor 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.
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,
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.
@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,
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