three.js drag multi objects - javascript

I made an 3D space with Three.js like in this example http://mrdoob.github.com/three.js/examples/webgl_interactive_draggablecubes.html
The next target is to enable user to select and drag/move multiple objects at a time.
I wonder if the enhancement of current implementation of the example can make it that way or I need a different implementation?
Thanks in advance.

You could use the bounding box of each object that you're selecting, then raycast a cube that matches that combined bounding box, move that big box and apply the position change to the selected objects.

Related

Select across multiple text elements via rectangular area JS

I don't want to use the device's native text selecting ability, rather I want to replace it with my own method. How can I select text across multiple elements based off of coordinate positions on the page?
Basically, I have the results of Touch clientX/clientYs to make a rectangular area and I want to select all the text contained in that area
I've tried using absolutely-positioned elements and creating a range with those elements as the bounding start and end but it did not work.
I found these two methods that can be used to construct a range that can be added to the window selection.
https://developer.mozilla.org/en-US/docs/Web/API/Document/caretPositionFromPoint
https://developer.mozilla.org/en-US/docs/Web/API/Document/caretRangeFromPoint

Draw an outline around a group of objects that surrounds the objects drawn area (not a bounding box)

I am trying to figure out a way to draw an outline around the area of a group of items as illustrated hopefully clearly in the sample image.
The idea is a user creates a bunch of rectangular objects always adjacent (vertically/horizontally), groups them together and then clicks a button to create the outline. I cannot figure out the outline part.
My only idea so far is to perhaps export the group to SVG and then manipulate it somehow (eg. add a thick border and use a clipPath to keep only the outer part of the border). Not even sure this idea is right because my SVG knowledge is kind of limited. Perhaps this can all be done in the context of fabricjs or with the help of an additional library?
(Using fabricjs 3.6.3)
Sample of outline around drawn area of objects
Scenario with group of objects where an object is in landscape position

How to select Object below another Objects bounding box

I'm working on a Tumult Hype (Javascript) project to select items that share overlapping space (if their Bounding Boxes are taken into consideration).
For instance, the Orange Triangle's bounding box is represented by the Red Outline. Is there any way/logic that would enable selecting the Green Triangle when it is below the Orange Triangle?
My original idea was to use the Path in an SVG based on it's ID. This works perfectly to select an unusual shaped Object and ignore it's bounding box. But, the Bounding Box still disallows selecting the lower level DOM Object.
The solution to this problem is to NOT use separate Objects (SVGs). Create 1 SVG that has all the Objects with unique paths that can be selected using their ID.

The FabricJS selection box is shifted when the canvas is transformed

I am using FabricJS and I am trying to have two canvases next to each other which behave like one. So I can drag objects between them.
My idea was to shift the viewport of the second canvas about the size of the first and then add the same objects to both of the canvases.
Here you can see what I did so far:
https://jsfiddle.net/ytdzo38h/
The selection box for the object is now shifted and therefore the object can't be grabbed in both canvases.
I found out that canvas.wrapperEl.getBoundingClientRect()gives back the coordinates of the selection box, but I have no idea how I could adjust that to fit my needs. I would really appreciate your help :)

Drag and drop to reorder rectangles in Javascript

Is it possible to use drag and drop to reorder HTML canvas rectangles, and what is the best way to go about this? Given a bunch of rectangles, I want to be able to change their order by dragging. Or is it easier to achieve this using divs instead? I want to create a rectangle packing program with drag and drop capabilities similar to Packery except implementing a different rectangle packing algorithm.
The best way to change order by dragging rectangles is by implementing these plugins like Packery,Gridster,ShapeShift rather than using divs instead.
Gridster cannot be used for multiple layouts whereas Shapeshift comes to the rescue. Comparing these two, Shapeshift is responsive.I suggest to implement any one of these according to their requirement and their frequency of usage.

Categories