Hi,
I have a 3D Design and I want to convert it to 2D when I will click on the button and reverse.
And in the case of 2D also I want to draw and move components and change the dimensions of them.
How can I do that in the simplest way?
Thanks.
1 Like
Hi! I think you need to be more specific with your question. The description you give is a bit too generic and could mean too many things at the moment. Maybe draw out what you want to achieve on paper and post it?
If you want some sort of web-based 3d editor, take a look at the Three.js Editor, it might be that what you need is already available 
1 Like
Thank you @jacopocolo for your explanation.
Now I have this 3d Shapes,
And now I want to alter show it and alter it in 2d like this
Let me paraphrase what you’re trying to achieve:
- You have a 3D-model (data structures) of a generic “scene”.
- The process of creating 2D-views of that scene is called “projection”, and comes generally at an information loss (depth information is lost in the process). Which is not in itself a problem as long as you retain the 3D-model from which the 2D-view was derived.
- Now you want to use a 2D-view as a visual interface to manipulate the 3D-model which you’re keeping in the background.
- Since the 2D-view(s) lack all depth information, you’ll need functions for selection (disambiguate) of 3D- objects from the 2D-view(s).
There are many solutions to this already. CAD-programs (i.e. AutoCAD, CATIA, 3dsMax etc.), visualisation packages (Blender, Maja, Cinema4D etc.) and maybe also the aforementioned three.js editor.
Coming back to your initial question:
The simplest way (imo) would be, to use one of the existing solutions.
1 Like
Thank you @vielzutun.ch,
I want to alter the view from 3d to 2d on the same page, not in CAD programs.
I want to allow clients to do that on my website, like IKEA and Kitchen planner websites.
Can I do that in Three.js?
Initially you were asling for the simplest way 
But yes, it could be done with three.js as a visualisation front end. The scene graph and projections are built right in. Selection can be done, too - there are examples for the latter (Go to “examples” on threejs.org and search for “raycast”).
But don’t underestimate what comes on top of visualization alone:
You will have to provide your own bookkeeping of the objects involved. Probably some business logic, too. Depending on your application, objects may impose restrictions/constraints on each other, like in an architectural application you’ll probably don’t want to allow overlapping doors/windows in the same wall, etc… In general, don’t underestimate how stupid / wanton / destructive your prospective users will behave. So you’ll have to sanitize user input.
You’ll have to provide some kind of GUI to allow for user input, maybe keyboard input for precision data and much more.
This is not done in one afternoon, even if you’re experienced.
1 Like
Thank you for your words @vielzutun.ch,
I agree with your opinion, I finished these options in 3d (intersect, span, position), but I want to apply it in 2d now,
I know it is not easy, but I need advice on how to begin to do that.
Why don’t you just manage two scenes? 1 in 3d and the other in 2d? When you do a modification in one scene you want to pass the information to the other scene.
According to your drawings, the objects in the 3d scene have their own 2d representation.
Outch.
+buffer_characters_to_make_this_post_at_least_ten_characters_long
You probably meant something but I don’t have that kind of translator available
The forum software prohibits short entries like just “Outch.”
He is probably trolling because of one of my jokes 
Anyway, here is an example of an application that renders 2d and 3d 画门窗
It uses https://konvajs.org/ which is an “HTML5 2d canvas js library for desktop and mobile applications”.
1 Like
here is a little demo, the circle is movable
2 Likes