How to adjust the scale in three.js using assignment techniques

Within my threejs project, I am working with two objects that I want to have the same scale vector value.

  mesh1 = new THREE.Mesh(geometry, material); 
  mesh1.scale.x = 0.47;

  mesh2 = new THREE.Mesh(geometry, material); 
  mesh2.scale=mesh1.scale;  // Despite attempting this assignment, it does not work

The last line in the code snippet does not produce the desired outcome. Upon reviewing the documentation, I did not find any indication that the scale property is read-only. After inspecting the source code, I noticed that the property is not defined as writable. Could there be an issue with how threejs functions or perhaps a gap in the documentation's coverage of this behavior?

I am curious if there is a way to synchronize properties like scale (as well as other vectors) among multiple meshes without resorting to manual copying of values.

  mesh2.scale.copy(mesh1.scale);  // Utilizing this method to duplicate the vector values

UPDATE: It appears that this functionality was operational in earlier versions of threejs - such as the one utilized in the provided example. Was this feature intentionally disabled in subsequent iterations of the library?

javascriptthree.js

Answer №1

The properties <code>position, rotation, quaternion, and scale of Object3D cannot be changed once set.

To understand more about this, refer to the code in the file Object3D.js.

An example of what not to do:

object.scale = vector;

Instead, you should use either

object.scale.set( x, y, z );

or

object.scale.copy( vector );

This same rule applies to other mentioned properties as well.

Version three.js r.72

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

JavaScript's innerHTML property is failing to update

Hello there, I am currently attempting to update the innerHTML content of the script below: <div id="global-alert-queue" class="layout-wrapper"> <div class="alert success animate-in" role="alert"> Your submission was successful. <button i ...

javascripthtml

I need help figuring out how to navigate between different pages in my Vue-cli app that has multiple pages configured

After following the guide on https://cli.vuejs.org/config/#pages, I successfully configured vue-cli3 to build a multiple page application. My project consists of 2 static pages, and I set up the vue.config.js file as shown below. However, when running the ...

javascriptvue.jsvue-cli-3

Unable to bypass YouTube advertisement

I am currently experimenting with using nodejs puppeteer to test if I can bypass the ad on Youtube. Although this is just for testing purposes, I am facing some challenges with getting it to work as expected. I have implemented a while loop to search for ...

javascripthtmlnode.jspuppeteer

Performing an Ajax call in the correct order within an MVC framework

One challenge I face is ensuring that my series of Ajax calls to call stored procedures and load partial views always fire in the correct order. Sometimes, they do not fire as expected due to timing issues. How can I guarantee that these Ajax calls execu ...

javascriptjqueryajaxasp.net-mvcasp.net-mvc-5

"Troubleshooting the issue with the jQuery function not being able to trigger a

When I press the enter key in an input field, I want to be able to select options from a searchable dropdown menu. However, this functionality is not working and the alert message I set up is also not functioning as expected. <div class="form-group m-f ...

javascriptjquerycsshtmlbootstrap-4

Repetitive points detected in three.js typography

I converted a ttf font to a js font for three.js using Facetype.js, but I am encountering multiple duplicate point errors such as: THREE.Shape: Duplicate point 41.52:10.928 THREE.ShapeUtils: Unable to triangulate polygon! in triangulate() What steps ...

javascriptthree.js

Re-activate video playback after 30 seconds of user inactivity (using RxJs)

My intention is to provide a brief explanation of the functionality I am looking for. Essentially, when a video is playing, I want it to pause if a user clicks on it, allowing them to do something else. Then, after 30 seconds of idle time, I need the video ...

javascriptangulartypescripteventsrxjs

Issues with Vue.js input values failing to update after data modifications

Recently delving into the world of Vue.js, I've encountered some obstacles with reactive datasources in Vue.js. My goal is to code a function that can add and remove a row containing a textfield and a textarea within the parent element. Your code sh ...

javascriptvue.js

What is the best way to utilize AJAX for displaying data within a div element?

I am struggling with integrating two files - index.php and process.php. In my index.php file, there is a form that submits to process.php: <form class="form" action="process.php" method="POST" name="checkaddress" id="checkaddress"> <table> ...

javascriptjqueryhtmlajaxform-submit

The correct way to extract a jwt token from headers and integrate it into an express application

After successfully implementing both the frontend and backend in express.js with authentication and authorization using JWT, I have confirmed that the JWT token is being properly set upon login. You can see the auth-token key in the image below: https://i ...

javascriptnode.jsexpressjwtauthorization

Having difficulty sending data to a controller through AJAX in Code Igniter. Can anyone help troubleshoot

I recently started learning PHP OOP and am currently using the Code Igniter framework. I encountered some difficulties in sending data to the controller using AJAX, so I attempted a simple test to check if AJAX was functioning properly, but unfortunately, ...

javascriptphpjqueryajaxcodeigniter

Creating dynamic object rotation based on a new pivot point using Three.js

In Three.JS, I've successfully created a spiral with downward movement. However, I am struggling to implement the knocking motion. https://i.sstatic.net/VrykN.gif var planeGeometry = new THREE.PlaneGeometry(10,10); var planeMaterial = new THREE.Mesh ...

javascriptgraphicsthree.js

What is the procedure for updating a state property's value?

Currently, I am in the process of developing a small application that has the ability to fetch data, display it in the DOM, and allow users to select an item to view detailed information about the chosen user. To manage all these functionalities, I am util ...

javascriptreactjsecmascript-6statekey-value

Tips for handling catch errors in fetch POST requests in React Native

I am facing an issue with handling errors when making a POST request in React Native. I understand that there is a catch block for network connection errors, but how can I handle errors received from the response when the username or password is incorrec ...

javascriptreactjstypescriptreact-native

"Learn how to easily send media files stored on your local server via WhatsApp using Twilio with Node.js and Express

Whenever I attempt to send the PDF file created through WhatsApp, an error pops up preventing me from viewing it. easyinvoice.createInvoice(data, function(result) { //The response will contain a base64 encoded PDF file ...

javascriptnode.jsexpresstwiliotwilio-api

Before computing the width, Next.js Swiper slide occupies the entire width

Check out the code snippet below: 'use client'; import { Swiper, SwiperSlide } from 'swiper/react'; import 'swiper/css'; import 'swiper/css/pagination'; export default function Component() { const cards = [{ id: 0 ...

javascriptreactjstypescriptnext.js13swiper.js

A guide on accessing and merging values in an array of objects using index positions in node.js

I have retrieved a collection from MongoDB and stored it in an array using a foreach loop. Now, I need to iterate through this array and format the output as shown below. Each member object should be correctly associated with the "lead" field based on thei ...

javascriptnode.jsarraysmongodbfor-loop

Tips for aligning the dot in the middle of a radio input box

I have developed a reusable Radio group component, and I am using styled components to style it. The goal is to position the dot right in the center of the circle, and it is somewhat achieving that in the screenshot below: https://i.sstatic.net/Kistg.png ...

javascripthtmlcssreactjsstyled-components

Tips for limiting the maximum number of characters in CkEditor 5 for react js

Is there a way to limit the amount of characters in a CKEditor textarea in a React JS environment? I'm trying to set a maximum character count for the text area in CKEditor Does anyone have any examples or suggestions on how to achieve this? retur ...

javascriptreactjsckeditor

Using Selenium webdriver to assign a JSON object to a paragraph element

What is the correct way to insert a JSON object into a p tag inside an iframe? I attempted the following approach but it displayed the text "[object Object]" rather than the actual content of the object... This is my implemented code: var arrJSON = [ ...

javascriptjsonselenium