A guide on moving Object3D elements using drag-and-drop in three.js

I found a great example of drag and drop functionality using this link. It worked perfectly for individual objects, but now I want to group some elements together to drag and drop them as one unit. To achieve this, I replaced the cubes in the example with spheres and grouped them using Object3D().

var data = [[0,10],[50,20],[100,7],[150,18],[200,15],[250,3],[300,10],[350,25]];
var group = new THREE.Object3D();
    for(var i = 0; i< data.length; i++){            
        var mesh = new THREE.Mesh( new THREE.SphereGeometry(data[i][1],20,20), sphereMaterial);
        mesh.position.y = data[i][0];
        mesh.updateMatrix();
        group.add(mesh);            
    }
objects.push(group);
scene.add(group);

However, I'm facing an issue where I can't select this group of objects in my scene. What am I doing wrong? Is it not possible to select a group of objects like this? If so, how should it be done?

Answer №1

It's always a bit tricky to troubleshoot without seeing the code, but my hunch is that you're currently using .intersectObjects(objects). Have you tried switching to .intersectObjects(objects, true) instead?

For reference, here is an explanation of the method:

.intersectObjects( objects, recursive )

objects — Specifies the objects to be checked for intersection with the ray.

recursive — When enabled, the method will also examine all descendants of the specified objects. If disabled, it only focuses on intersections with the original objects. This function facilitates checking for intersections between the ray and both the objects themselves and any descendants they may have.

Check out the three.js Raycaster documentation for more information!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Update and verify a collection of objects in real-time

I have a callback function that retrieves a data object from the DOM. Each time an item is selected, the function returns an object like this: $scope.fClick = function( data ) { $scope.x = data; } When ...

Guide to accessing a nested and potentially optional object property with a default value and specifying its data type

Just a simple query here... my goal is to extract data.user.roles, but there's a possibility that data may be empty. In such cases, I want an empty array as the output. Additionally, I need to specify the type of user - which in this instance is any. ...

A function designed to detect errors based on the parameters supplied as arguments

In order to ensure secure access to my restful API, I am looking to implement an authentication function called "access". I would like the function to have the following structure whenever a user interacts with the server: access(id , token ,function(err) ...

The Bootstrap 4 Accordion feature ensures a smooth scrolling experience without jumping to the

Are you in need of assistance? If so, I have developed a Javascript code that enables an accordion card to scroll to the top when clicked on to expand. Provided below is an example of a Bootstrap 4 accordion along with the associated Javascript snippet: ...

Developing maintenance logic in Angular to control subsequent API requests

In our Angular 9 application, we have various components, some of which have parent-child relationships while others are independent. We begin by making an initial API call that returns a true or false flag value. Depending on this value, we decide whether ...

Angular: Simplifying complex JSON structures

Is there a built-in feature in Angular for flattening JSON data and then restructuring it back? I came across some code below, but I'm wondering if Angular offers any native library functions for this task. If not, I may consider incorporating this fu ...

Tips for sending a variable to control a particular panel within an accordion in Angular 2

I have a collection of ngbpanels that are dynamically created using ngFor. I need to expand or collapse a specific panel based on certain conditions, but the ID I provide for the panel is stored in a variable. The code does not recognize the panel ID when ...

Prevent unauthorized manipulation of specific objects' hrefs in Javascript / Identify the source of href modifications

I am currently dealing with an outdated application that populates a div by initiating a JavaScript function on a remote server and then injecting the resulting content into the DOM. Interestingly, when using Firefox, the application unexpectedly alters a ...

Using jQuery to store the last selected href/button in a cookie for easy retrieval

Recently, I've been working on a document that features a top navigation with 4 different links. Each time a link is clicked, a div right below it changes its size accordingly. My goal now is to implement the use of cookies to remember the last select ...

Retrieve information from a database in real-time using Ajax without needing to set a refresh interval

Currently, I have been working on jquery/ajax requests and have managed to create an ajax request that retrieves data from a database. However, the issue at hand is that I am continuously utilizing window.setInterval() to refresh this function every x seco ...

Stop the MP4 video in HTML when the user clicks outside of the modal window

I'm having trouble figuring out how to stop the video from playing when I close the modal by clicking outside of it. I've managed to make it work when the user clicks the "x" inside the modal box. The video is in mp4 format and embedded using HTM ...

Comparison of Mesh Noise Between Three.js and Blender

My mesh is a photogrammetry scan, so it's not perfectly clean. I've set it up in both Blender and Three.js with flat shading, no lights, and just diffuse/texture shading. In Blender, the rendering is flawless, showing the texture accurately ...

Issue with SharePoint Rest API search query functionality

Hey there! I'm currently facing issues with calling the Sharepoint Rest API for a search query. I can't seem to figure out why it's not working. Additionally, I'm unsure if my URL input is correct. Below is the code snippet I've w ...

Sending data from a dynamically created PHP table to a modal

In my PHP-generated table, I have: <tbody> <?php $results = DB::select()->from('users')->execute(); foreach ($results as $user) { echo "<tr id='".$user['id']."'> <input type=&bs ...

Separate the navbar-brand and nav-items onto separate lines within the Bootstrap 4 navbar

I would like to arrange the navbar-brand and nav-items on separate rows. Put the navbar brand on the first row and the navigation items on the second row Existing code: <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="nav ...

A solution for accessing computed properties within a v-for loop

Currently, I am facing a challenge with the code provided below. It seems that computed properties do not support parameters. Do you happen to have any suggestions on how to overcome this issue? I am considering using watchers on functions but I am also ...

Having trouble getting the onclick function to work in order to switch out the images

This is the HTML code that I used Here is the JavaScript code, but the onclick function seems to not be working ...

The master of the site instructs the pages to wait for loading...but the site somehow manages to partially come up

Despite the fact that it's not typically recommended, we had to implement this approach for a specific project. Essentially, I have a site master page that displays a "Please wait while loading..." message in a div to prevent the page from showing unt ...

What is the process for converting and transferring the date in Google Apps Script to generate a new event in Google Calendar?

To create an event in GAS, follow this link: https://developers.google.com/apps-script/reference/calendar/calendar#createEvent(String,Date,Date,Object) var event = CalendarApp.getDefaultCalendar().createEvent('Apollo 11 Landing', new Date(& ...

Get around operator precedence in JavaScript

Imagine having a string like this: '1 + 2 + 3 * 4' Can you solve it sequentially from left to right in order to obtain a total of 24, instead of 15? It's important to note that the string is unknown beforehand, so it could be as simple as ...