Animating multiple objects in three.js

Currently, I am working on a threejs scene where there are multiple objects. The issue arises when I select more than one object and move them across the screen - all selected objects end up in the same position as Object 1. However, it is crucial for them to maintain their individual positions. Below is a snippet of the code in question:

translateObjectTo(absX, absY, absZ) {
    this.selectedObjects.forEach((selection) => {
        if (absX !== null) {
            selection.translateX(absX - selection.position.x);
        }
        ...
    });
}

Changing the line to selection.translateX(absX); does make it work, but with an incorrect value.

typescriptthree.js

Answer №1

Object3D.translateX is a function that adds to the current X position of an object. For example, if the X value is already 5 and you use myMesh.translateX(5), the new X position will be 10.

To implement this functionality, it's important to calculate the difference between the original X position of the dragged object and its new X position, and then apply this difference to all other objects.

Below is some code/pseudo-code as a basic example. If you want this to occur while dragging, you need to calculate the difference continuously for each frame or update interval.

// begin dragging
originalPosition.copy(dragObject.position)

// end drag (or ready to update)
let xDiff = originalPosition.x - dragObject.position.x

// apply difference to selected objects (excluding the dragged one)
selectedObjects.forEach(function(obj){
  if(obj.id !== dragObject.id){
    obj.translateX(xDiff)
  }
})

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

Access the elements within arrays without using the square brackets

I am trying to access data from a list, but I am having trouble using square brackets []. The getTalonPaie function calls the get method from the HttpClient service and returns an observable with multiple values. However, when I try to store these values i ...

javascriptangulartypescript

Incorporating jsbi into a TypeScript project while adhering to strict mode

I have been developing a TypeScript library that relies on native BigInts. While it functions perfectly in Chrome, I encountered some issues with Safari. After some research, I stumbled upon the jsbi "polyfill" that seems to solve this problem. Unfortunat ...

javascripttypescriptbigint

Getting into nested information in a JSON string using TypeScript

I need help accessing the data values (data1, data2, and date) from this JSON structure. I would like to store these values in an array that can be sorted by date: { "07" : { "07" : { "data1" : "-1", "data2" : "test", "date" : "1995-07-07" ...

jsontypescript

TS function that determines conditional type based on payload

Can the type be determined based on a payload function? For example: export const myFunction = ( findAll: boolean ) => { const finders: { key: if findAll is true, then VueWrapper<T>[] else VueWrapper<T> } = {} }) In this case, I aim to ...

typescripttypescript-typings

The ngOnChanges lifecycle hook is triggered only once upon initial rendering

While working with @Input() data coming from the parent component, I am utilizing ngOnChanges to detect any changes. However, it seems that the method only triggers once. Even though the current value is updated, the previous value remains undefined. Below ...

javascriptangulartypescriptngonchanges

Displaying STL File in React Environment

My goal is to showcase an STL file using react-three-fiber and threejs from a secure https link or file. Challenges: Facing CORS issue (localhost -> https problem) Unable to load local files I am aware that I could load files using threejs directly, b ...

reactjsthree.jsreact-three-fiber

The input 'Element' does not match the expected parameter 'ReactElement<any>' in this context

Here is an example of code snippet: import * as React from 'react'; co ...

javascriptreactjstypescript

Guide to automatically installing @types for all node modules

As a newcomer to Typescript and NodeJs, I have been experiencing errors when mentioning node modules in my package.json file and trying to import them. The error messages I always encounter are as follows: Could not find a declaration file for module &apos ...

node.jsangulartypescriptnpm

The element's type is implicitly set to 'any' as the expression of type 'string' is unable to index the 'PointDto' type

Comparing the values of x1, y1 and z1 in PointDto objects (point1 and point2) Example :- point1 => PointDto: { x1: "1.000000", y1: "1.0", z1: undefined pointIndex: 0, } point2 =& ...

typescriptecmascript-6

Receiving 'Module not found' error in Typings on specific machines within the same project. Any suggestions on how to troubleshoot this issue?

I have a project cloned on two separate machines, each running VS2015 with Typings 1.8.6 installed. One machine is running the Enterprise version while the other has the Professional version, although I don't think that should make a difference. Inte ...

typescriptvisual-studio-2015angular

How can I use regex within a pipe to split a string in Angular 4?

I need to implement a method where I can split a string based on special characters and spaces in the given regex format, excluding "_". Example: #abc_xyz defgh // output #abc_xyz Example: #abc@xyz defgh // output #abc Example: #abc%xyz&defgh // out ...

angulartypescript

What is the proper way to retrieve a constant variable within a return statement?

Here is the code I have written: const keyToDisplayMessage = 'REGULAR_HOME'; const cf = format( { accountName: this.accountName, }, this.pageData.sucessMessages.keyToDisplayMessage, this.$route.name ); return cf; The ...

javascripttypescriptvue.js

Automate your builds with Github actions for both tags and branches!

In my typescript project repository, our release policy states that we publish packages from the master branch to the next npm tag. Additionally, we have a dedicated branch called release for publishing to the latest npm tag. My goal is to optimize the sol ...

typescripttagsgithub-actionsnpm-publish

Type with optional conditional argument

In my current example, I am showcasing conditional arguments where the value of the second argument depends on the type of the first one. type Check<F, S> = S extends number ? string : number function Example<S>(arg: S) { return function ...

typescripttypescript-typingstypescript-generics

Error in Radix UI encountered while attempting to use "react-accordion"

Trying to import the root component of a react accordion and then export it in my project with the name Accordion. However, I keep getting a type error that says Unsafe assignment of an `any` value. I've attempted to fix it by using the as keyword but ...

reactjstypescripteslinttypescript-eslintradix-ui

Javascript Library Issue: "Implicitly Declared Type 'Any' Error"

I am currently in the process of developing a JavaScript library that will interact with an API. My goal is to create a module that can be easily published on npm and utilized across various frameworks such as Angular or React. Below is the code snippet fo ...

javascriptreactjsangulartypescriptnpm

Master the art of iterating through an Object in TypeScript

I need help with looping through an Object in TypeScript. While the following examples work in JavaScript, I understand why they pose a problem in TypeScript. Unfortunately, I am struggling to find the correct approach to solve this issue. Am I approaching ...

typescript

openapi-generator is generating subpar api documentation for TypeScript

Executing the command below to generate an auto-generated API using openapi-generator (v6.0.1 - stable): openapi-generator-cli generate -i app.json -g typescript -o src/main/api The json file is valid. Validation was done using openapi-generator-cli valid ...

typescriptopenapi-generator

Type errors in NextJS are not being displayed when running `npm run dev`

When encountering a typescript error, I notice that it is visible in my editor, but not in the browser or the terminal running npm run dev. However, the error does show up when I run npm run build. Is there a method to display type errors during npm run d ...

typescriptnext.js

Upon the second click, the addEventListener function is triggered

When using the window.addEventListener, I am encountering an issue where it only triggers on the second click. This is happening after I initially click on the li element to view the task information, and then click on the delete button which fires the eve ...

javascripthtmlcssnode.jstypescript