A guide on obtaining the dimensions of PlaneGeometry within three.js

I generated a mesh using PlanGeometry and BasicMaterial.

function createMesh(width, height) {
      let geometry = new THREE.PlaneGeometry(width, height);
      let mat = new THREE.MeshBasicMaterial({
          color: 0xffffff,
          transparent: true,
          side: THREE.DoubleSide,
          opacity: 0.5
      });
      return new THREE.Mesh(geometry, mat);
  }

Later on, I applied a transformation to this mesh in another part of the code. So

mesh.matrix.identify();
mesh.applyMatrix(matrix); // applied some transformation.

Now, I am trying to retrieve the size of the plane geometry I attempted the following method.

  let boundingBox = new THREE.Box3().setFromObject(mesh);
  let size = new THREE.Vector3(0,0,0);
  size = boundingBox.getSize(size);
  console.log('size', size);

Unfortunately, the size returned is incorrect. Is there a way to determine the width and height values used when creating the PlaneGeometry (width, height) initially?

let geometry = new THREE.PlaneGeometry(width, height);

I need assistance in retrieving the width and height values used in the above code snippet. Any help would be appreciated.

Answer №1

For optimal outcomes, it is advised to verify the bounding box instead of relying on geometry.parameters. This object is not consistently accurate since it is only generated for primitives and does not adjust when the object is modified; hence, any scaling adjustments will not be reflected.

mesh.geometry.computeBoundingBox()
const size = mesh.geometry.boundingBox.getSize()
console.log('size', size);

Answer №2

I came across a solution.

const meshParameters = object.geometry.parameters;
const dimensions = {
    width: meshParameters.width,
    height: meshParameters.height
};
console.log('dimensions', dimensions);

Special thanks to @prisoner849 for the help.

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

Using Django to load a template and incorporate a loading spinner to enhance user experience during data retrieval

In my Django project, I need to load body.html first and then dashboard.html. The dashboard.html file is heavy as it works with python dataframes within the script tag. So, my goal is to display body.html first, and once it's rendered, show a loading ...

Looking for a drag-and-drop solution using Vanilla Javascript, no need for jQuery

Looking for assistance with creating a click-and-drag solution for a background image using Vanilla Javascript. I came across a jQuery solution on Codepen, but I need help translating it into Vanilla Javascript. Draggable.create(".box", { ...

Using node.js and express framework to manage additional .get requests

At the moment, I have implemented the following code: app.get('/prices/all', function (req, res) { fs.readFile( __dirname + "/" + "data.json", 'utf8', function (err, data) { res.set({ 'content-type': 'applicat ...

Is there a way to generate a specular effect using a specular map within a custom shader in Three.js?

My latest project involves creating a realistic earth in WebGL with Three.JS. I've successfully added day and night textures along with an atmosphere effect. Now, I'm looking to add a specular effect specifically on the water sections of the eart ...

Never miss out on the broadcast!

I am working on an Angular Project and I am trying to create an Authentication mechanism. Here is the code for my Login controller: angular.module('authModule') .controller('LoginCtrl', function($rootScope, $location, loginRESTService, ...

Tips for making a versatile Vuetify Snackbar that can be used multiple times

I am in the process of developing a reusable alert/snackbar component. My implementation looks like this: Snackbar.vue <template> <v-snackbar transition="true" timeout="2000" :show="`${show}`" :color="`${col ...

unable to access the object3D within the current scene

Currently facing an issue where I am unable to retrieve Object3D from the scene, despite the mesh objects being displayed within the scene. Strangely, the scene.children array does not reflect this. Take a look at the screenshot here Here is the code sni ...

Text displayed in dropdown when selecting autocomplete option from Material UI

I'm facing a problem with the Material UI's Autocomplete Component. The issue is that the value is being shown instead of the text element. My data source format looks like this: [{value: 'someValue', text: 'My Text'}, {value ...

The texture in the Three.js GLB file appears blurry, lacking clarity

I am encountering an issue while trying to import a GLB model into my project. The texture appears blurry and I could use some assistance with this matter. You can access the code here. Interestingly, when I viewed the model in this particular viewer, th ...

Export web application content to PDF through rendering on the server side

Our interactive web application, which includes multiple d3 charts, is built with vue. Currently, I am able to export our webpage to a PDF file by utilizing canvg and html2canvas to convert the content into PNG format. The PNG file is then transmitted to t ...

Guide on Implementing jQuery Plugin with Vue, Webpack, and Typescript

I am currently exploring the integration of the jQuery Plugin Chosen into my vue.js/Webpack project with TypeScript. After some research, I discovered that it is recommended to encapsulate the plugin within a custom Vue component. To kick things off, I m ...

Experience the enhanced features and optimized performance of Onsen 2.0 compared to the earlier version

Apologies if this question is too simplistic, but I am finding some conflicting information in the documentation about using Onsen with Monaca. I am currently utilizing Monaca cloud and I prefer to work solely with pure JS, without incorporating Angular ...

Is the Javascript Browser Plugin currently activated?

I am currently experimenting with Google Earth and I'm trying to figure out whether the Browser Plugin for Google Earth is Enabled or not (Please note: Scenarios such as the Plugin being installed but deactivated). This is my plan on how to achieve t ...

Removing leading zero from ng-change value in controller

One example of my input field is shown below: <input id="0900" type="radio" ng-model="formData.appointment_hour" ng-change="change(0900)" name="appointment" value="0900" class="ng-valid ng-dirty"> After inspecting the function in my controller, I n ...

Is there a way to show the value of a variable in several locations within my HTML <p> element?

Why is my variable value (test) only displaying in one instance in my HTML <p> tag? After correctly showing in the first place, it appears blank in the second. What mistake am I making? var name = document.querySelector("#NameInput").value; fu ...

"Step-by-step guide on setting up Angularjs ng-model in a Rails environment

Question regarding the utilization of two-way binding in AngularJS and Rails ERB files. Let's say the input value in my .erb file has an initial value like this: example.erb <input type="text" value=" <%= @item.title %> " ng-model ="item.t ...

What are the top strategies for loading models on a webpage in AJAX systems?

As we delve into the world of using ExtJS with .NET web services to create ajax applications, a question arises regarding best practices for retrieving the model on the client side. An example scenario is having a form with 10 comboboxes. Should each combo ...

Javascript Pretty Print Format is producing inaccurate output

function displayData(info) { document.body.appendChild(document.createElement('pre')).innerHTML = info; } function searchInGitHub(str) { const http = new XMLHttpRequest(); http.open("GET", "https://api.github.com/search/reposi ...

Exploring the Fusion of Data in VueJS

Trying to figure out how to merge data from two different sources to display in a single table. One source is created within my Vue instance, while the other is imported from an API. Any suggestions on how to achieve this? HTML: <div class="ui conta ...

Resolution for Vue3: Understanding why a component instance's template ref cannot locate a defined function

LoginInfo.vue <script setup lang="ts"> import { rules } from './config/AccountConfig' import { reactive } from 'vue' import { ref } from 'vue'; import { ElForm } from 'element-plus'; const info = reac ...