How to select a few objects and move them?

Questions
1

Hello everyone :slight_smile: I looking for a solution similar to Manage selection | Fabric.js Demos. Do you have any idea? :slight_smile:

2

nothing ootb, afaik. but you could program this more or less effortlessly, by creating an empty object in the middle of the group and selecting it into TransformControls.

3

I create a very simple application similar to photoshop and the question is Can I group objects when I want?

4

very simple application similar to photoshop

Can I group objects when I want?

Sure,

var group = new THREE.Group();
scene.add(group);
transformControls.attach(group);
group.attach(object1);
group.attach(object2);
...

(edited per @Fyrestar suggestion)

4 Likes
5

I only few options like (drawing - line, ractangle, select, group, cut) :wink:

I will create everything with the mouse. Is there any section in the documentation that will tell me how to draw shapes with the mouse? how to select them later?

6

Using attach instead add though, to keep their transformation.

Depending on how it should work it isn’t necessary simple especially with hierarchies. It’s a bit more than just attaching objects to a group, but what @makc3d described would be a quick working approach attaching the objects to a root, the root to transform controls and when “unselecting” them you need to detach them from the root - applying their world matrix to the position, scale and quaternion properties with matrixWorld.decompose( .. ), as you’re going to remove them from this temporary root object you used to transform.

As long as it’s only roots you’re selecting this should be enough, but it’s more complex when it’s mixed with children without their parents. So when selecting, you should traverse to the root of an element and use the root.

THREE doesn’t cover editing tools itself, but there are some controls in the examples folder, you could also take a look at the editor. “draw shapes” is too unspecific, as THREE doesn’t work like a 2D canvas, but you can implement the controls to draw the same way, you find some basics in the examples.

I’ve implemented this kind of transform controls too recently for an animation app i’m working on using THREE, basically to archive the same functionality as Adobe tools (Illustrator specifically). Though it is a bit more complex, for example transform controls usually only show how the selection will be transformed, before applying it, also considering center point transform (like holding alt or alt+shift in Adobe) etc.

7

Hey! How did you do the dragging action? Curious to know :slight_smile:

8

Ignoring the word “simple” for the moment, why do you think three.js would be a good fit for this? If you are making a 2D drawing application, maybe a 3D rendering library is not something you need?

10

Shaders and textured polygons, for GPU accellerated brushes and filters, also WebGL having far more capabilities especially regarding formats such as 32bit textures, for example photopea is a js photoshop clone wich uses WebGL whenever possible.

11

Why not pixi then? And, if 3D lib was really needed, I would expect a comparison with zbrush, not photoshop, too.

1 Like
12

Sure, but I’m not sure that three.js is the best way of getting those for a fully 2D drawing application.

13

Depends, for WebGL a robust popular pure render engine like THREE is rather universal, of course for 2D this is a matter of what it should be capable of. After Effects for example is a mix of 2D and 3D too while not having real 3D scenes like Blender, in this regard a lot drawing tools support 3D features.

1 Like