We Keep Coding

React-Leaflet automated coordinate extraction/generation based on an image

I’m attempting to create a seating diagram using React Leaflet 2.7.0. I’ve made the coordinates relative to the Map bounds by setting the crs property to L.CRS.Simple.
I know how to create and place vector circles by manually inputting coordinates to represent a seat. This method allows the shapes to scale proportionately when zoomed (rather than using Markers, which don’t scale). My challenge is finding a way to efficiently determine coordinates based on an image of a seating chart.
I’m wondering if anyone knows of a way to extract coordinates based on an image to say a geoJson or Javascript object; Perhaps a plugin or other third-party, or built-in Leaflet feature I’m not aware of.
The image shows the concept of what I’m trying to achieve.
desired concept:

what I normally do is, create an event that when onclick it would gather the coordinates related to the image and after that push it to an array which after I finish I can console log the array which I just copy-paste to my text editor

How can I convert a 2D image into sketch matrix like autocad image using JS

I am working on some project basically for the real estate and kind of stuck in some feature where I need some help.
I have a 3D scene ready using three JS and rendered on screen, but sometimes the user wants to see in 2D and sometimes in wireframe.
see images below
one way to do is to keep the camera at top of the 3D view and make model wireframe true.
but I am looking for the alternate way to convert a 2D image of top view into the structure like above. Is there any library or method that can help in solving this.
Thanks

3D cube creation and handling events on that cube

I have created multiple 3D Cubes in a HTML5 Canvas .
I was trying to handle a click event on the 3D cube so that i can know which cube got clicked.
To create the cube I used processingJS.
It worked well but was not able to get the Click position.
I read about Paper JS which creates a shape and stores it in a object.
Is it possible to create 3D things with Paper JS.
Or Is there anyway i can get which cube got clicked through ProcessingJS.
please share whether there are any other ways to do this.
Thanks in advance.

Paper.js deals with 2D vector graphics.
While in theory you can represent a cube if you want to, using skewed squares for example, it will take a lot of effort and a lot of time to just create 1 cube.
You are much better of using a 3D library, e.g - Three.js.
Here is an already cooked up example using raycasting to detect the clicks on a side of the cube: http://mrdoob.github.io/three.js/examples/canvas_interactive_cubes.html

3D Geometry Object Library?

I'm wanting to find a javascript library that will create images of simple 3D shapes like the ones shown below.
The key is that I want to be able to specify certain attributes of the shapes. So, take a cylinder, for example. I'd want to tell the library the radius and the height and have it create the cylinder for me.
Does anyone know of something that can do this?

How to add 2 or more 3D objects to the HTML 5 canvas?

I'm new to Three.js and currently trying to develop a web-based 3d object viewer/editor.
I referred to thingiview.js and able develop functions to view,rotate,and zoom in & out. And I added a drag and droppable function to the canvas. Currently, only ".stl" (lowercase) file type works for this function.
My intention is to add another .stl file to add on the canvas and display. I have thought if it is possible to
- make an array
- store the dropped items(.stl) files to the array
- display all the available items from the array on the canvas
I'm not very advanced in JavaScript language and still learning to improve while developing this function. Please advise if I am on the right track or if there is any possible ways to achieve this. Or, possibly if there is any resources I could read up for more information.
Thank you in advance.

You say you are using Three.js. I think in three you could do things like:
mesh = new THREE.Mesh(sphere, material);
scene.add( mesh );
This will basically only create a sphere and put into scene tho, but you do the same with loaders. scene.add(whatever) to display in scene. To make it easier to access objects later for position change and other, you can push them into a array like so:
var objectArray;
(inside loader)
scene.add( mesh );
objectArray.push(mesh);
Then you can loop the array later to check for instances and do positioning and such.
Hope this helps you a bit.