Using Three.js to ensure that child object3d expands within the boundaries of its parent object

In this scenario, I have 2 Object3Ds with one nested inside the other:

var obj1 = new THREE.Object3D();
var obj2 = new THREE.Object3D();
obj1.add(obj2);

Assuming obj1 is AxB units wide, how can I instruct obj2 to match that size? Essentially, how can I make obj2 expand to match its parent's dimensions?


UPDATE

After referencing, I found a solution. To determine the parent's size, I used the following:

// parent's model
model.geometry.computeBoundingBox();
var width = model.geometry.boundingBox.max.x - model.geometry.boundingBox.min.x;
var height = model.geometry.boundingBox.max.y - model.geometry.boundingBox.min.y;

Answer №1

THREE.Geometry objects come equipped with bounding-box methods and values. If you have a good understanding of the relative sizes of the unscaled geometric components, you can utilize object_2.scale.set(x,y,z), using parameters that represent the differences in bounds between object_1.geometry and object_2.geometry. However, this method is only applicable to simple meshes. For objects with more complex or dynamic shapes, additional information is required to provide a more targeted solution.

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

Retrieving the checkbox value from a dropdown selection

I'm stuck and feeling lost here - I must be missing something obvious. Any help will be greatly appreciated! (I am a beginner in html and javascript) I have created a dropdown menu with an unordered list of items populated from JSON data. Here is the ...

retrieve JSON information using JSONP

Currently, I am working with a URL that returns data in JSON format. Here is the URL: http://10.0.1.11/render?target=threshold(400,test)&from=-1mins&format=json&jsonp=? When I enter this URL into a browser, it displays the following JSON re ...

What is the best approach to accessing a key within a deeply nested array in JavaScript that recursion cannot reach?

After hours of research, I have come across a perplexing issue that seems to have a simple solution. However, despite searching through various forums for help, I have reached an impasse. During my visit to an online React website, I stumbled upon the web ...

What is the best method for determining the ID or class of a div element dynamically?

My issue involves a scrolling div that dynamically loads data using ajax and json from an API as you scroll horizontally. Currently, I have multiple scrolling divs on a single page. The problem arises when I need to inform jQuery about the ID of the div b ...

Photoswipe using identical source code, yet the output is malfunctioning

Having an issue with my code that refreshes the content of a ul element. Initially, it works fine by directly loading the ul content, but I am constantly creating new content every 10 seconds to provide users with fresh updates. Even though the source co ...

The shared hosting environment encountered an error during the Next JS build process

When I execute the command "npm run build" on my shared hosting server, it throws an error message: spawn ENOMEM. Interestingly, this command runs perfectly fine on my localhost and has been running smoothly on the hosting server for a few weeks until yest ...

angular-ui-tree, dynamically generate the tree using data retrieved from the DATABASE

I have implemented the angular-ui-tree library to present the folder hierarchy. The nodes are saved in a MongoDB database, with each node object structured as follows: { "node_name" : "Folder 1", "node_path" : "AAABBB", "node_id" : 103, "node ...

Real-time array filtering with ReactJS for nested arrays

I am currently working on implementing a real-time filtering search feature for a lengthy list of items. The items are structured in the form of an array containing arrays with a string and an object, as shown below: const items = [ ["cats", [ ...

Can the data from these JSON elements be obtained?

Suppose I have a JSON file with the following structure: { "update" : { "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c3a6aea2aaaf83a4aea2aaafeda0acae">[email protected]</a>":{ "1234": {"notfication" ...

Using AngularJS: Implementing asynchronous $http.jsonp request through a service

I am currently developing a straightforward application that involves the following steps: 1. The user provides 2 parameters and clicks a button 2. Angular communicates with an external JAVA Servlet that sends back JSON data 3. The application displays the ...

Tips for looping through every item that has a specific class name

I have tried various methods and researched numerous ways to achieve this, but I am struggling to implement it in my code. My goal is to iterate through each <li> element and check if the text inside the <span class="state"> tag is ei ...

The issue of jQuery, Ajax, and MVC6 parameters becoming null after an Ajax request has been identified

Hello everyone, I am a beginner in asp.net core, c# and MVC 6. Currently, I am facing an issue with sending data over ajax to my controller. function sendAjaxData() { $.ajax({ url: "AjaxWithData", // using hardcoded value for testing purpose type ...

Ways to transfer information among Angular's services and components?

Exploring the Real-Time Binding of Data Between Services and Components. Consider the scenario where isAuthenticated is a public variable within an Authentication service affecting a component's view. How can one subscribe to the changes in the isAut ...

Navigating through external JSON data in a Node.js and Express application, and rendering the data using Jade

After going through various examples and solutions in related questions on StackExchange in an attempt to solve my issue, I have decided to post my question. My ultimate goal is to access complex JSON data via an API and REST. I intend to import this data ...

Ways to initiate the download of an audio link using JS without the need for the browser to redirect to a different page

I am looking to create a script that can automatically download audio files from a website. The problem I'm encountering is that using element.click() to simulate a "click" event doesn't work as expected, as the browser ends up navigating to the ...

Adding a refresh feature to ui-sref in markup

Is there a way to include the reload option in a ui-sref markup without using the javascript function directly? <a ui-sref="app.editPost({new:true}, {reload:true})">new post</a> I've tried this approach, but it doesn't seem to be wo ...

Checking for division by zero

I have a question about my calculator. I want to ensure that if the input string contains "0", an error alert is displayed. However, I do not want to check for the "/" character. Below is the function I have written: <input type="text" name="answer" ...

Protractor - Easily locating elements by targeting their children

I am attempting to modify the text of the input element, but I am having trouble identifying it. The element does not have an id or any other distinguishing characteristic. Additionally, this same object is repeated multiple times in the code, making it di ...

Generating an Xpath for the selected element with the help of Javascript or Jquery - here's how!

On my website, I have implemented a click event on an element. When a user clicks on this element, I want to generate the XPath of that particular element starting from either the html or body tag, also known as the Absolute Xpath. For example, if I click ...

Guide to attaching a click event in a subview of Backbone

I'm struggling with understanding event binding in a Backbone subview. Here's how my view is set up: TenantView = Backbone.View.extend({ events: { "click": "setActive" }, initialize: function() { this.parentEl = this.options.parent ...