Manipulating the position of objects in Three.js using WebGL

Currently, I am exploring WebGl and Three.js to work on a project. Unfortunately, I seem to be encountering an issue regarding retrieving the position of a custom mesh that I created. Each time I attempt to obtain the position, I consistently receive values of (0,0,0) regardless of the method I use.

None of the following methods have proven successful for me:

  • vector.getPositionFromMatrix( matrix );
  • obj.matrix.getPosition().x

Below is the snippet of my code:

squareGeometry = new THREE.Geometry();
squareGeometry.vertices.push(new THREE.Vector3( this.x, this.y, this.z));
squareGeometry.vertices.push(new THREE.Vector3( this.x + this.w, this.y, this.z));
squareGeometry.vertices.push(new THREE.Vector3( this.x + this.w, this.y - this.h, this.z));
squareGeometry.vertices.push(new THREE.Vector3( this.x, this.y - this.h, this.z));
squareGeometry.faces.push(new THREE.Face4(0, 1, 2, 3));

squareMaterial = new THREE.MeshBasicMaterial({
color:this.color,
side:THREE.DoubleSide
});

squareMesh = new THREE.Mesh(squareGeometry, squareMaterial);

scene.add(squareMesh);
squareMesh.updateMatrix()
scene.updateMatrixWorld();

vec = new THREE.Vector3();
matrix = squareMesh.matrix;
localPosition = squareMesh.position; // Output: 0,0,0
worldPosition = vec.getPositionFromMatrix( matrix ); // Output: 0,0,0

// The following line also does not yield the desired result 
squareMesh.matrix.getPosition().x // Output: 0

Answer №1

Why do you believe it is not functioning?

The entire mesh is currently positioned at 0,0,0. You can modify the position by altering the squareMesh.position attribute.

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

Convert the value of the <textarea> element to HTML encoding

Is there a way to fetch the most recent updated value entered in a textarea and encode it in HTML format? I usually use this code snippet to retrieve the value: $('textarea').val(); // works consistently across browsers However, if the value c ...

Retrieve documents in MongoDB that rely on information from other documents

Consider the following mongoose model: const UserSchema = Schema({ //_id: ObjectId, //more fields, blockedIds: [{ type: ObjectId, ref: 'User' }] }) What would be the most optimal approach to retrieve all users who do not have th ...

Autocomplete feature fails to operate on a duplicated input

I'm encountering an issue with the jQuery function clone(). I suspect that the problem lies within the withDataAndEvents input parameter of this method. To provide some context, I am working on a dynamic table where rows are added dynamically when a ...

Utilizing Backbone script for fetching data from an external JSON source

I am seeking assistance on how to utilize a Backbone script to display data from a JSON file. Here is the structure of the HTML Page: <!DOCTYPE html> <html> <head> <meta charset="ISO-8859-1"> <title>Insert title here</tit ...

encountered issue accessing optional property post validation check

flow 0.67.1 (although behavior still present in version 0.73.1) For Instance: type PropOptional = { prop?: ComplexType }; type ComplexType = { callable: () => void, anotherCallable: () => void }; function usePropOpt ...

React is unable to maintain the list during route transitions

I have been working on a project where I input user information into a form and upon submission, it displays the data in a table on the same page. Everything works fine initially, but when I navigate back to the form page after visiting the Home page, the ...

The development of the React app will pause momentarily upon encountering a single low-severity vulnerability. To address this, you can either run `npm audit fix` to resolve it, or use `npm audit` to gain

A challenge arises while executing the command below in Visual Studio Code to develop a react app: create-react-app my-first-react-app The process halts and displays this message: found 1 low severity vulnerability run `npm audit fix` to rectify th ...

Could anyone please provide advice on how to resolve the issue I encountered when trying to make Post and get Http method calls using protractor?

I am currently facing an issue while trying to make a GET API request using protractor. The challenge lies in using the bearer token generated from a previous POST response in the headers of the GET request. Although I have successfully executed the POST r ...

What is the best way to incorporate material-ui icons into my project?

I'm trying to incorporate an icon inside an IconButton, like so: <IconButton > <SearchIcon/> </IconButton> After adding @material-ui/icons to my package.json file and importing the necessary components: import IconButton from ...

Import a JSON file into Angular 8 and parse its contents

My code is intended to read and upload a JSON file (ARM template), but I am encountering an issue where this.updateObj appears as undefined in the console.log. Below is my code: onChange(fileList: FileList): void { var file = fileList[0]; var fileR ...

Guide on how to align the bootstrap popover's arrow tip with a text field using CSS and jQuery

I have tried multiple solutions from various questions on Stack Overflow, but I am still struggling to position the arrow tip of the bootstrap popover correctly. html: <input type = "text" id="account_create"/> js: $('.popov ...

JQuery fails to remove the active class

I am working on a project where I want the links to slide down over the page when the mobile nav is clicked, hiding the content so only the links are visible. Everything is almost working as intended, but for some reason, the .displayNone class does not ge ...

Issue with AJAX/Javascript functionality

Hey there! I'm currently working on an ajax call to a function called build_Array. This function is supposed to break down a string named myString, which contains "Call 1-877-968-7762 to initiate your leave.,1,0,through;You are eligible to receive 50% ...

Guide to creating a select box connected to a range slider in VueJS

Hey there! I'm a beginner in Vue and currently working on a project that involves Vue, PHP, and Laravel. Here is a picture link showing the price range filter that I need to implement. I'm struggling with coding the select box so that its value ...

Determining the best orientation for a marker or pointer on a 3D .obj Object in order to create the illusion that it is pointing towards a specific area of the object

I am trying to achieve a similar effect to the one shown in this example ( https://jsfiddle.net/xg1o4ekr/378/ ), but with different shapes of 3D objects and markers coming outwards. Since my 3D object is not a circle, the code provided in the link above ...

mobile navigation menu remains open after selecting a link

When the Fixed-to-top navbar is used in mobile view, such as clicking a Navbar icon, it does not collapse afterward while the page is loading. How can I prevent the page from loading in the navbar section? Here is the link to my website: CLICK HERE Addi ...

The error message states: "Dygraph is not defined."

Currently, I am utilizing express.js in my application to render dygraph charts on the client side. You can take a look at my index.jade file here. Upon visiting my browser, an error pops up in the console: Uncaught ReferenceError: Dygraph is not defined. ...

"Encountered an issue with loading a resource in the inspector within Angular

Using angular's ng-repeat, I am uploading some placeholder content. var app = angular.module("homeApp", []); app.controller("entriesView", function ($scope){ $scope.itemEntry = [ { image: "img/112013-priscilla-600.jpg", title: "y ...

Firebase monitors the authentication status of a user

Trying to maintain a global state in my application based on whether the user is logged in or not has me puzzled. Should I only have a single onAuthStateChanged() in my JavaScript file to monitor state changes and manipulate HTML elements like account deta ...

I keep encountering an issue in my application where I am receiving an error stating that

Encountering the error $ is not defined in my application due to the usage of the npm package. Link to the npm package Attached is the code snippet: Link to the code sandbox import React from "react"; import "./styles.css"; import { ZoomMtg } from "@zoo ...