Functionality in Three.js that involves selecting nearby objects with an event handler and ensuring that the self object is

I have spent countless hours today diving deep into the documentation, tutorials, and stackoverflow questions in pursuit of a solution to this issue. I am pleading for your assistance – please take pity on me and help!

The problem at hand involves a watering can with an event listener attached to it. However, when I click on the can, nearby objects such as the tree trunk or a leaf (code not included) to the left end up being selected instead. This allows me to drag and drop those unintended objects around until they are out of range. If I drop them close to the watering can, they get selected again upon clicking. This behavior is not what I intended; my goal is for the actual watering can that was clicked on to be selected and then dragged and dropped accordingly. Although there's quite a bit of code involved here, I am unable to pinpoint where the issue lies anymore, so I've included almost all of it. It seems like the watering can believes it is located elsewhere or the ray is firing in a different direction. Please let me know if you need any further clarification or additional code snippets. While I only started learning three.js yesterday, I have a decent grasp of what should be happening here...and this isn't it!

const WateringCan = function() {
  // Code block omitted for brevity
};

let wateringCan;
function createWateringCan() {
  // Code block omitted for brevity
}

let plane;
function createPlane() {
  // Code block omitted for brevity
}

let selection;
function onWateringCanMouseDown(e) {
  // Code block omitted for brevity
}

function onDocumentMouseMove(e) {
  // Code block omitted for brevity
}

function onDocumentMouseUp(e) {
  // Code block omitted for brevity
}

I have tried various solutions already, including using computeBoundingBox() on elements with applyMatrix, rearranging mouse3D/raycaster in different ways, and moving the can far away (resulting in nothing getting selected). At one point, I had the event listener attached to the document, which resolved the selection issue but caused the watering can pieces to not stick together; each individual component could be dragged and dropped separately. While dragging everything on the page was entertaining, it defeated the purpose – I don't need every leaf on my tree to be movable.

Please lend a helping hand if you can! Wrestling with this challenge all day has taken a toll on my spirits. :D

Answer №1

After some investigation, I was unable to determine the root cause of the unusual behavior. As a result, I decided to make some changes to my approach and fortunately, the problem has been resolved.

Here are the steps I took:

  • Transferred the event listener from the watering can back to the document

  • Cleared all objects except for the watering can from the objects array used by raycaster.intersectObjects to enable only the dragging and dropping of that specific object

  • Thankfully, things seem to be back on track now

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

Encountering an issue in XtermJS where it is unable to read properties of undefined, specifically 'dimensions', while being used with NextJs version 14

UPDATE: Additional Details useEffect(() => { // let terminal; if (terminalRef.current) { const terminal = new Terminal({ fontFamily: "Menlo, Monaco, monospace", // fontSize: 12, // cursorBlink: true, ...

Is it possible for an <input> tag in PHP AJAX to have an "action" attribute similar to a <form> tag?

Forms typically use an action attribute to specify where the data should be posted, such as a .php file. Do <input> elements have this action attribute as well? The answer is likely no, but I am curious to understand what concept I may be misunders ...

what is the best way to display a chosen value in a dropdown menu using jQuery?

How can I display a value from a database in a select option? This code is written in PHP, JSON, AJAX, and JQUERY. $(document).on('click', '.edit_data', function () { var shop_id = $(this).attr("id"); $.ajax({ url: "&l ...

Use PipeTransform to apply multiple filters simultaneously

Is it possible to apply multiple filters with PipeTransform? I attempted the following: posts; postss; transform(items: any[]): any[] { if (items && items.length) this.posts = items.filter(it => it.library = it.library ...

What is the process for adjusting the width of an element using JavaScript?

I have a unique bar with one half red and the other green. I am trying to subtract 1vw from the width of the red section. Unfortunately, using style.width is not yielding the desired result. See below for the code snippet I am currently using: //FIGHT do ...

Removing a dynamic TypeScript object key was successful

In TypeScript, there is a straightforward method to clone an object: const duplicate = {...original} You can also clone and update properties like this: const updatedDuplicate = {...original, property: 'value'} For instance, consider the foll ...

The Angular application must remain logged in until it is closed in the browser

Currently, my Angular app includes authentication functionality that is working smoothly. The only issue is that the application/session/token expires when there is no user activity and the app remains open in the browser. I am looking for a solution wher ...

What is the best way to halt Keyframe Animation once users have logged in?

To enhance user engagement, I incorporated keyframe animation into my login icon on the website. The main objective is to capture the attention of visitors who are not registered users. However, once a user logs in, I intend for the keyframe animation to c ...

How can I hover over multiple cells in a table?

Is there a way to change the color of multiple adjacent cells when hovering over one cell, and can this be done dynamically (so the number of adjacent cells that change color can vary)? Here is the code snippet: I'm using React to create a table wit ...

How can I modify the value of a CSS animation rule in AngularJS?

I am looking to dynamically change the value assigned to stroke-dashoffset based on a custom input. @-webkit-keyframes donut-chart-1 { to { stroke-dashoffset: 100; } } @keyframes donut-chart-1 { to { stroke-d ...

Is It Best to Override Behavior in a Directive?

Having two directives that display lists of documents, one for user-favorited documents and the other for user-pinned documents. The criteria for displaying these documents depend on the values of "pinned" and "favorite" within each document object: docum ...

List of COM ports accessible with Serialport npm

I am encountering an issue with a specific part of my program and although I have identified the problem, I am unable to find a solution on my own. Therefore, I am reaching out for your assistance. It seems like the problem does not lie within the serialp ...

The Protractor option is nowhere to be found on the Run Configuration popup window in Eclipse

Issue with Protractor in Eclipse: Unable to locate Protractor option on Run Configuration popup. Despite following the steps outlined in http://www.protractortest.org/#/ and this guide on configuring Protractor with Eclipse (specifically the 2 Answer step ...

Steps for generating a unique division element for every javascript response

How can I dynamically create a new div for each response in JavaScript? The message is in JSON format containing all the messages sent and received. This is my JavaScript code: $.get("MessageServlet", function (responseJson) { $.each(responseJ ...

Make sure to assign an id to the ng-template when using an Angular Bootstrap accordion

I'm struggling to assign a dynamic id to the heading template. I attempted to use id="{{group.title}}" but it doesn't seem to be working. Any assistance or suggestions would be greatly appreciated! <div ng-controller="AccordionDe ...

Extend GridView cell for file preview and download

Within my gridview, there is a column labeled "File Name" which includes the names of various files. I am looking for a way to click on a specific file name and be able to view its content as well as save or download the file. I am open to all suggestions ...

How can one determine the direction towards the camera from a vertex in a vertex shader using GLSL?

I'm working with the following code snippet: vec4 localPosition = vec4( position, 1.); vec4 worldPosition = modelMatrix * localPosition; vec3 look = normalize( vec3(cameraPosition) - vec3(worldPosition) ); vec3 transformed = vec3( position ) + look; ...

Unable to capture user input text using $watch in AngularJS when applied on ng-if condition

I have developed a cross-platform application using AngularJS, Monaca, and OnsenUI. In my login view, I check if the user has previously logged in by querying a SQLite database. Depending on whether there is data in the database, I either display a welcom ...

transferring information between two html pages using javascript

Although this question has been raised multiple times, I have gone through the answers and attempted various solutions, however, my code is still not functioning correctly. Below are my working files : my_app -index.html -task1 -index.html I ...

What is the process of connecting marionette rendered views to the DOM?

I am encountering a challenge with my simple setup using Marionette that I am trying to resolve. My issue lies within a view containing a collection: var MyItemsView = Marionette.View.extend({ template: "#some-template" }); var view = new MyItemsVie ...