Updating the JavaScript object property does not occur when setting a variable

I am facing an issue with a Three.js Quaternion where I am struggling to preserve my object's property for the Quaternion.

GLmol.prototype.initializeScene = function() {
   this.scene = new THREE.Scene();
   this.scene.fog = new THREE.Fog(this.bgColor, 100, 200);

   this.modelGroup = new THREE.Object3D();
   this.rotationGroup = new THREE.Object3D();
   this.rotationGroup.useQuaternion = true;

   this.rotationGroup.quaternion = new THREE.Quaternion(0.7235552851867599, -0.004228243257681183 , 0.004646778667168487, 0.6902378421133389);
   console.log(this.rotationGroup.quaternion)

   this.rotationGroup.add(this.modelGroup);

   this.scene.add(this.rotationGroup);
   this.setupLights(this.scene);
};

The issue at hand is that when I define the this.rotationGroup.quaternion = new THREE.Quaternion(), it fails to retain the Quaternion object. The output shows:

THREE.Quaternion (w:1 x:0 y:0 z:0)

What could be causing this behavior?

javascriptthree.js

Answer №1

The Object3D.quaternion property cannot be reassigned, so attempting to do so with the code below is incorrect:

rotationGroup.quaternion = new THREE.Quaternion( x, y, z, w );

Instead, utilize either .quaternion.copy( q ) or .quaternion.set( x, y, z, w ).

For further details, refer to this explanation.

Version of three.js used: r.84

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

Is it possible for a Vue.js build to encounter errors due to unregistered components?

Exploring a component template... <template> <Unknown></Unknown> </template> In the context of this template, Unknown could be either a globally registered component or not. Upon encountering this scenario at runtime, an informa ...

javascriptvue.jsvuejs2

Creating an interactive TABLE with twitching animations in a straightforward HTML and JavaScript project

Currently, I am tackling a JavaScript challenge involving placing eight queens on a chessboard in such a way that they do not attack each other. However, there seems to be an issue - whenever I place a queen in an unoccupied column, that particular column ...

javascripthtmlcsssvg

CSS: Hover below the designated target to reveal an expanding dropdown menu

My initial solution involved toggling the visibility on and off when hovering. However, this approach is not optimal as the menu should smoothly transition into view. When the visibility is toggled, the user does not experience the intended transition effe ...

javascripthtmlcss

"Unlocking the Power of jQuery: A Guide to Accessing XML Child

I'm struggling to extract the xml in its current format. While I can easily retrieve the InventoryResponse, I am facing difficulties when trying to access the child node a:Cost. Despite conducting research, I have been unable to find a solution that w ...

javascriptphpjqueryajaxxml

Issue with box shadow appearing incorrectly as element content increases in size while the body has an image background

After applying a box shadow to the header div, I noticed that the box shadow doesn't display properly when the hidden elements within the header are revealed. <div id="header"> <div id="logo"> <a href="#"><img src="logo.png" ...

javascriptjqueryhtmlcsshtml5boilerplate

Stop a hacker from obtaining the usernames from a system

Our forgot password page has been identified with a security issue that needs attention: ISS-0003938 Web Inspect Open Medium Suspicious Files Found in Recursive Directory ****** Remove any unnecessary pages from the web server If any files are nec ...

javascriptjsonajaxsecurity

Utilizing reusable functionalities within Vuex

Currently, while working on my NUXT project, I am facing a situation where I find myself repeatedly copying the same actions into multiple store modules. To streamline this process, I have extracted these actions into a separate file and now import them in ...

javascriptvue.jsvuejs2vuexnuxt.js

Is there a way to ensure that the await subscribe block finishes before moving on to the next line of code?

My goal is to utilize the Google Maps API for retrieving coordinates based on an address. In my understanding, using await with the subscribe line should ensure that the code block completes before moving on to the subsequent lines. async getCoordinates ...

javascriptangularasync-awaitangular-observable

How can one effectively access a nested JSON value in Angular by concatenating all fields?

If we have a JSON stored in the variable person like below: { "firstName": "First Name", "lastName": "Last Name", "address": { "city": "New-York", "street": "Some Street" } } To access the value of street, we would typical ...

javascriptjsonangularnestedconcatenation

Comparing obj.hasOwnProperty(key) with directly accessing obj[key]

Consider the scenario where I need to determine if a property exists within an Object. A comparison between two methods caught my attention: if(object.hasOwnProperty(key)) { /* perform this action */ } OR if(object[key]) { /* perform this action */ ...

javascriptjson

filter out null values from JSON using gson

I am looking for a way to eliminate attributes with empty collections or null values using gson. Aiperiodo periodo = periodoService(); //periodo is obtained from a service method with various values Gson gson = new Gson(); String json = gson.toJson(period ...

javajavascriptjsongson

Why does the API in Next Js get triggered multiple times instead of just once, even when the strict mode is set to false?

React Query Issue I am currently facing an issue with React Query where the API is being triggered multiple times instead of just once when the selectedAmc value changes. I have tried setting strict mode to false in next.config.js, but that didn't so ...

javascriptreactjsnext.jsreact-query

Tracking the latency of WebSockets communications

We are in the process of developing a web application that is highly responsive to latency and utilizes websockets (or a Flash fallback) for message transmission to the server. While there is a fantastic tool known as Yahoo Boomerang for measuring bandwidt ...

javascriptperformance

How to fix XmlHttpRequest PUT File Upload error when uploading files larger than 1MB

Uploading files to a server (in this case, S3) has been a smooth process for files under ~1MB. However, larger files tend to fail intermittently during the send operation. The issue does not seem to be related to security measures, CORS settings, or signin ...

javascriptajaxfile-uploadxmlhttprequest

PHP is consistently failing to decode a JSON object generated by JavaScript, with the error code always being 4

In my JavaScript code, I am working on creating a map of key and value pairs. To achieve this, I create an object and store it in a hidden textarea. My intention is to retrieve the data using PHP, decode the object, and ultimately save it to a database. Th ...

javascriptphpjson

Retrieve the XML file from the webpage and save it to a specific directory using Java and the Selenium framework with the Chrome browser

Retrieve xml file from the website and save it to a specific location using java or selenium with Chrome browser. Here is the snippet of HTML code: <!-- Start of Code which handles XML Download--> <a href="javascript:downloadXML()"> <img s ...

javascriptjavagoogle-chromeselenium-webdriverselenium-chromedriver

Removing user mentions in a message using Discord.js V12

I am working on a discord bot using discord.js and I am trying to create a custom *say command. The issue I am facing is that whenever I mention @everyone, or role IDs like <@&542542636743557>, the bot also pings them. Is there a way to replace ...

javascriptnode.jsdiscorddiscord.js

Prevent the onscroll animation of the SVG from activating immediately upon its appearance on the screen

I am in the process of building a website that incorporates SVG technology. My issue is with some SVG icons that have animated effects when scrolling, but the animation triggers as soon as they come into view. What I really need is for these icons to sta ...

javascriptsvgwindowscreenonscroll

What is the best approach for creating a single jQuery click function to manage multiple elements within a slider?

Here's my query: I have a slider on my website where each slider item consists of an image and a Bandcamp iframe link. Below is an example code of one of the slider items: <div class="tapecol col-md-4"> <img class="media-ob ...

javascripthtmljquerycss

Display requested tab feature using jQuery upon page load

I am new to jquery and have been using this code for creating tabs: <script type="text/javascript" charset="utf-8> $(function () { var tabContainers = $('div.tabs > div'); tabContainers.hide().filter(':first&apo ...

javascriptjquerytabs