What is the location within an object3d where I can access the dynamic point coordinates?

Watching one singular point rotate around the Y axis is quite intriguing.
I am eager to witness the shift in X coordinate as it moves along its trajectory.
Although the starting point remains unchanged, I wonder where the dynamic coordinates lie.
Could it be hidden within "pointa.geometry.vertices[0].x" perhaps?

UPDATE: I have transformed the rotating point into a rotating Group within a stationary Scene.

<!doctype html>
<html>
  <head>
    <title> Exploring a solitary point </title>
    <script src="http://threejs.org/build/three.js"></script>
    <script type="text/javascript">
  "use strict";
  var js3canvas, renderer, camera, world, pointa, geometry, material, datadiv;
  var norotate;
window.onload = function() { 
  "use strict";
  js3canvas = document.getElementById("js3canvas");
  datadiv = document.getElementById("data");
  renderer = new THREE.WebGLRenderer( { canvas:js3canvas } );
  camera = new THREE.PerspectiveCamera(50, 1, 1, 20);
  camera.position.set(0,5,10);
  camera.lookAt(0,0,0);
  norotate = new THREE.Scene();
  norotate.background = new THREE.Color(0x888888);
  world = new THREE.Group();
  norotate.add(world);
  // create the point
  geometry = new THREE.Geometry();
  geometry.vertices.push(new THREE.Vector3(2.3456,0,0));
  material = new THREE.PointsMaterial( { color:0xffffff } );
  pointa = new THREE.Points(geometry, material);
  world.add(pointa);
  animate();
}
function animate() { 
  datadiv.innerHTML = "Current X coordinate: " + pointa.geometry.vertices[0].x; // discovering the x coordinate
  renderer.render( norotate, camera );
  world.rotateY(.03);
  requestAnimationFrame(animate);
}
    </script>
  </head>
  <body>
    <canvas width="200" height="200" id="js3canvas"></canvas>
    <div id="data"></div>
  </body>
</html>

Answer №1

When making adjustments to the rotation, position, or scale of an object, you are essentially applying a transform matrix to the geometry's points while preserving the original data.

To convert a vertex from local to world coordinates, create a temporary vector and copy the vertex into it:

var jsCanvas, renderer, camera, scene, pointA, geometry, material, dataDiv;
var noRotate;
jsCanvas = document.getElementById("jsCanvas");
dataDiv = document.getElementById("data");
renderer = new THREE.WebGLRenderer({
  canvas: jsCanvas
});
camera = new THREE.PerspectiveCamera(50, 1, 1, 20);
camera.position.set(0, 5, 10);
camera.lookAt(0, 0, 0);
noRotate = new THREE.Scene();
noRotate.background = new THREE.Color(0x888888);
scene = new THREE.Group();
noRotate.add(scene);
// create a point
geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3(2.3456, 0, 0));
material = new THREE.PointsMaterial({
  color: 0xffffff
});
pointA = new THREE.Points(geometry, material);
scene.add(pointA);
var tempV3 = new THREE.Vector3();
animate();

function animate() {
  pointA.localToWorld(tempV3.copy(pointA.geometry.vertices[0]));
  dataDiv.innerHTML = "X coordinate: " + tempV3.x; // accessing the x coordinate
  renderer.render(noRotate, camera);
  scene.rotateY(.03);
  requestAnimationFrame(animate);
}
<canvas width="200" height="200" id="jsCanvas"></canvas>
<div id="data"></div>
<script src="http://threejs.org/build/three.js"></script>

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

Search for elements with a specific substring in their class names using the querySelectorAll() method

I'm working with a custom component in app.js return ( {cards.map((index) => { return <Card key={index} /> ) Within the Card component, I assigned a specific className return ( <ListItem id="root" className="find-card"&g ...

The values in my array are causing it to output NAN

I'm currently working on a program that aims to combine a variable number of one-row matrices with varying lengths. The goal is to add the elements of each matrix together, where element one of array one adds to element one of array two, and so forth. ...

Is there a way to restore the state back to its original form?

I'm having trouble resetting the default state. How can I achieve that? I attempted a method but it ends up adding state to itself and labels it as undefined. const initialData = { name: null, coins: 0, image: null, }; export default function ...

steps for setting up socket.io client

Would it be possible to reference the socket.io client library using a relative path like: src="/socket.io/socket.io.js" instead of the absolute path: src="https://miweb:6969/socket.io/socket.io.js" To establish a connection with the library, typically ...

JavaScript (jQuery) module that fetches libraries

Many of you may be familiar with Google's API, which allows you to load specific modules and libraries by calling a function. The code snippet below demonstrates how this can be done: <script type="text/javascript" src="//www.google.com/jsapi"> ...

What is the solution to the problem "How can you resolve the issue where 'Cannot set property 'ref' of undefined' occurs"?

My goal is quite simple - I just want to retrieve data from Cloud Firestore. Below is the code snippet I am using: import React from 'react'; import firebase from "react-native-firebase"; export default class newsFeed extends React.Component { ...

I require the ability to imprint an image using jquery

Can someone assist me with adding an ID to a cloned image using Jquery? I have almost completed the code but I am facing issues defining the ID for the cloned image. Below is the code I have written: //Make element click $(".drag").click(functi ...

Programmatically changing the stylesheet does not seem to be working to apply the

I'm currently working on a feature that allows the User to customize the application's style. Index.html <!DOCTYPE html> <html> <head> <link id="style" rel="stylesheet" type="text/css" href="red-stylesheet.css" ...

When using Rspec and Capybara, utilizing jQuery to set focus on an element may not apply the `:focus` CSS as expected

I have implemented jump links for blind and keyboard users on my website, but I've hidden them off-screen visually. When these links gain focus, they are moved into the viewport. Trying to test this behavior using RSpec and Capybara has been unsucces ...

I'm running into a "timeout" issue with socket.io and a self-signed SSL connection. Can anyone help me troubleshoot this?

After setting up a nodejs server with HTTPS, everything seems to be working fine when sending GET requests. However, I encountered an error message 'WebSocket was closed before the connection was established' when trying to connect another nodejs ...

Sending form data to a CFC asynchronously in Coldfusion

To begin with, I want to mention that the product I am creating is intended for individuals who do not have automatic access to HTML5. Some of these people are still using IE8. Here's an example of a form: <form action="ee.cfc?method=xlsupload" en ...

What could be causing the issue of why the null check in JavaScript isn't functioning properly

function getProperty(property) { console.log(localStorage[property]) //Displays “null” if(localStorage[property] == null) { console.log('Null check') return false; } return localStorage[property]; } The log outputs "nu ...

Understanding the functionality of app.listen() and app.get() in the context of Express and Hapi

What is the best way to use only native modules in Node.js to recreate functionalities similar to app.listen() and app.get() using http module with a constructor? var app = function(opts) { this.token= opts.token } app.prototype.get = function(call ...

"Utilizing Bootstrap Tour for Easy Navigation: Automatically Scroll Back to the Top with

I have a Bootstrap tour set up with code that is meant to capture the user pressing the end tour button and scroll them back to the top of the screen. However, currently the code runs when a new popover loads instead of when the end tour button is clicke ...

Loading content beforehand vs. loading it on the fly

I am facing a dilemma with loading a large amount of content within a hidden <div>. This content will only be revealed to the user upon clicking a button. Should I load this content beforehand or wait until it is requested? ...

Storing a function in local storage using Javascript

Is there a way to save this information in local storage, or is there an alternative method for storing it? $('#pass_to_score').on('click',function(){ var compressed = function(){ $('.whole_wrap_of_editcriteria').css(&ap ...

Unsubscribe from the Event Listener in Node.js

In light of this inquiry (linked here), can the Listener be eliminated from within the callback function? To illustrate: let callback = function(stream) { if(condition) performAction(); else server.removeListener('connection', cal ...

Express NodeJS encountering issues with partials

I am currently experimenting with using partials in my ExpressNodeJS project. My Node version is 3.x. This is the structure of my project directory: D:\eclipse\workspace\test I have created a sub-folder and added headModule.ejs in the vi ...

Displaying dropdown options based on the previous selection made by the user

Can I link the data in my second dropdown to the selection made in the first dropdown? I tried a similar solution from stackoverflow without success. You can find the reference here. The code works when directly copied and pasted but not within my system. ...

What is the best approach to implement a basic image upload functionality?

I have a vision for my new website where users can upload an image with the click of a button, store it locally on one page and then retrieve its absolute URL to share on forums or other websites for preview purposes. While I've managed to create a fu ...