The location of the THREE.Group object is consistently set at the origin (0, 0, 0) and errors may arise when attempting to accurately determine its position

In my Three.js project, I am utilizing a THREE.Group to manage selected dominoes within the scene. However, I am facing an issue where the reported position of the THREE.Group remains constant at (0, 0, 0) despite adding or removing objects to it. Additionally, I have implemented a method to calculate the average position of the selected dominoes within the group, but it appears to be calculating incorrectly.

To replicate the issue:

1. Create domino objects in the scene. 2. Select one or more dominoes using the selection tool. 3. Check the reported position of the THREE.Group. 4. Compare the reported position with the actual position of the selected dominoes.

Expected outcome:

The position of the THREE.Group should accurately represent the average position of the selected dominoes within it.

Current behavior:

The reported position of the THREE.Group remains at (0, 0, 0) consistently, and the calculated average position of selected dominoes seems to be incorrect.

GitHub Page : GitHub Code : https://github.com/KA-Hirithik/DominoForgeStackOverFlow

javascriptthree.js

Answer №1

When using ThreeJS to group elements, there is no need to manually calculate the bounding box for those elements.

If you want to find the position or center of the grouped elements, you can utilize the Box3 class to perform bounding box calculations. Then, you can use the method Box3.getCenter to determine the position or center point relative to the world.

const center = new THREE.Vector3();
new THREE.Box3().setFromObject(groupedObjects).getCenter(center);
console.log(center);

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

Lazy loading images without the need to manually adjust the image structure

After experimenting with various LazyLoad options, I found that most of them required modifications to the src tag or the addition of a new tag. Is there a way to LazyLoad content without having to change the tag structure? I am extracting content fro ...

javascriptjquerywordpressstructurelazy-loading

Command for DiscordJS to verify users

I have a requirement to develop a verification command using discord.js v12. This command will assign a verified role based on the configuration specified in a config file. Config file: { "token": "my-token", "status": " ...

javascriptnode.jsdiscord.js

Exploring JQuery and JavaScript for loop guide

Currently working on a small application where users are required to input information, and I am implementing text hints in the input fields. However, I have encountered an issue when using a for loop in my code. Oddly enough, the text hints display corre ...

javascriptjqueryformsloopshints

Issue with rendering Rails View using Javascript

In my show.html file, I have an <a ng-click="writeReview(product)" class="vote-link">Review</a> link. Within my javascript file, I have the following code: $scope.writeReview =(product) -> $http.get("/products/#{product.id}/review/new" ...

javascripthtmlruby-on-railsangularjscoffeescript

Transferring a single dataset from a table to a pop-up modal using Angular

I am working on a table to display entries for a contest, extracted from a database using PHP and converted into a .json object for AngularJS and JavaScript. I want to add a modal feature so that when a "judge" clicks on an entry, they can view its details ...

javascriptangularjsui.bootstrap

The Object filter is experiencing a delay with processing 10,000 items

When an API returns over 10,000 objects in the format of {firstName:'john',lastName:'Cena'}, I am faced with a performance issue. In my parent React component, I make the API call in componentDidMount and pass this object to child compo ...

javascripttypescript

Activate the text area message by clicking on the href link

I am currently working on customizing the intercom plugin for a WordPress site. My goal is to have a message triggered when a user clicks on a hyperlink, essentially simulating the enter key press in a textarea. Here is the code snippet that I am using: ...

javascriptjquerywordpresspluginsintercom

uncertainty when implementing ng-if / ng-show / ng-hide

I am facing an issue with exporting content to PDF from my HTML. When a user clicks on the export button, the PDF is downloaded, but there are certain divs whose content I do not want to be exported or shown in the PDF. However, I still want them to be vis ...

javascripthtmlangularjsangularjs-ng-if

Is there a way in Vue.js for me to access a method from within the same component using the component's data?

Below is the code for a specific component: <template> <li v-for="(item, i) in this.menu" :key="i" @click="item.action()"> //attempting to call the method in the component {{menu.title}} <li> </template> <script> ...

javascriptvue.jsvuejs2vuetify.js

Restricting user access to a route based on its type to enhance security and control

Currently, I have a React, Redux, and Next.js app up and running. Within my redux store, there is a user object that contains an attribute called "type". Each type of user has its own set of "routes" they are allowed to access. I am looking for the most e ...

javascriptreactjsreduxnext.js

Running intricate javascript/jquery/json code using an html checkbox

Hey there, I'm hoping this issue is simpler than I'm making it out to be... So, I've got this pretty complex JSON/jQuery function (3000 lines long) that builds a DOM tree in a separate JS file. This JS file also contains a bunch of other on ...

javascriptjqueryhtmljson

Avoiding GulpJs freezing with effective error handling techniques

I am currently in the process of converting my sass files to css and encountering some issues. Specifically, I am struggling with handling errors during the sass conversion process. Whenever there is an error, it causes gulp to hang, requiring me to rest ...

javascriptgulpbuild-system

The function crypto.randomUUID() does not exist in the Vitest library

vite.config.ts import { sveltekit } from '@sveltejs/kit/vite'; const config = { plugins: [sveltekit()], test: { include: ['**/*.spec.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'], environment: 'jsdom', glo ...

javascriptnode.jstestingsveltevitest

Executing a function should be delayed until all necessary information is obtained from the REST Api

I want to create a chart showing data for each month over the course of 12 months. The data for each month will be retrieved from a REST API. Here is my approach: $.getJSON(link, function(data){ // store data in a variable } Repeat this process 12 t ...

javascripthtmlcanvasonloadcanvasjs

Unable to retrieve the length of HTMLCollection

I've been having an issue with accessing all the dynamically created list elements (<li>) on my page using getElementsByTagName. The console keeps showing that the length of my li array is 0. Despite going through documentation and examples rel ...

javascript

Pull in data using AJAX and store it in an array. [JavaScript]

I'm in the process of working on an AJAX script that loads a file into an array. function loadGame() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { g ...

javascriptajax

Clearing selections from a multiple-choice input field

I am seeking to implement a delete feature in a multi-select element similar to the functionality seen here on stackoverflow when selecting multiple tags for a question. Once an item is selected, I would like to display a close icon next to it so that user ...

javascriptjquerycssangularjsmulti-select

Issue with HTML form not correctly submitting AJAX request to controller

My attempt to utilize ajax on the add to cart form doesn't seem to be working as expected. When I click on the Add to Cart button, it displays a blank page because I have implemented an ajax check method in the controller. Controller public functio ...

javascriptjqueryajaxlaravel

Attempting to send arguments to a jQuery ajax request

After successfully implementing my original ajax call, I decided to create a reusable function for it. This way, I can easily modify the data and URL fields of the ajax call without having to retype everything each time. However, I encountered an issue whe ...

javascriptjqueryajaxfunctionparameters

Ajax loaded scripts are unable to access global variables

Index.html <script> let bar = 1; </script> This html page is being loaded multiple times on the page using AJAX: article.html <script> if (bar === 1) { // perform a task } // Error: bar is not defined </script> Bar is a simple ...

javascriptjqueryhtmlajax