Unusual trait of TrackballControls.target within the world of Three.js

My current project involves simulating a 3D distribution of galaxies.

In this simulation, the galaxies are represented as points.

question1.htm references galaxydata1.txt to calculate and load the galaxy positions:

rawFile.open("GET", "galaxydata1.txt", false);

var parts = data[i].split("\t");

var D = parts[0];
var glon = parts[1]*3.1416/180;
var glat = parts[2]*3.1416/180;

var z = D*Math.sin(glat);
var xy = D*Math.cos(glat);
var x = xy*Math.cos(glon);
var y = xy*Math.sin(glon);

dotGeometry.vertices.push(new THREE.Vector3( x, y, z ));                

To ensure the simulation works on devices with limited resources, I pre-calculated and saved the positions in a file.

I accomplished this using write.htm to generate galaxydata2.txt.

question2.htm utilizes galaxydata2.txt for loading the galaxy positions:

var parts = data[i].split(" ");

rawFile.open("GET", "galaxydata2.txt", false);

dotGeometry.vertices.push(new THREE.Vector3( parts[0], parts[1], parts[2] ));

The accuracy of the transformation can be verified as both question1.htm and question2.htm generate identical models.

I have recently added a galaxy search feature that locates a specific galaxy by name and centers it using:

controls.target = dots.geometry.vertices[i];

You can test this feature by searching for "m31" (one of the names for the Andromeda galaxy).

Interestingly, while the galaxy search function functions correctly in question1.htm, it fails in question2.htm!

I have dedicated considerable time over the past two days trying to troubleshoot this issue but have been unable to pinpoint the problem.

It should be noted that I used exactly the same code to calculate the positions in both scenarios.

Chances are high that I am overlooking something obvious that experts could easily identify.

If possible, kindly provide guidance on resolving this challenge.

Answer №1

The vertices in your dots.geometry.vertices within the search function are currently stored as strings instead of floats.

Examples: 1: n {x: "-34.10470732858122", y: "95.77578953486031", z: "-66.52906941334713"} 2: n {x: "-23.203470164906907", y: "64.44921156287786", z: "-43.97565350543055"} 3: n {x: "-22.228259825915906", y: "57.0117730686664", z: "-31.448405312168955"}

This setup will not function correctly.

You must convert the string data to floats using .parseFloat after loading it, before inserting it into the geometry.

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

"Encountering a new error with the creation of a user using AngularJS and Firebase

Attempting to create a user using Angular. myApp.controller('loginCtrl',['$scope','$firebaseAuth','config',function($scope,$firebaseAuth,config){ console.info('[APP-INFO] ~ loginCtrl Start') var ref = ne ...

When utilizing jQuery lightbox to pull data from a database using PHP/Ajax, it may require a double click the

Encountering a strange issue where I must click on specific buttons with unique IDs. These IDs are then sent through Ajax to a PHP script, which searches for corresponding entries in the database. The retrieved data is then displayed in a jQuery lightbox. ...

What could be the reason why modifications made to $scope in a directive's link function do not appear on the user interface?

The AngularJS directives' link function causes changes to isolate scope data that are not reflected in the UI. Take a look at this example: var myApp = angular.module('myApp', []); myApp.directive('myDirective', function () { ...

Discovering the art of line breaks

Imagine I have a random block of text displayed in a single line, like this: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Due to various reasons such as width settings or text-zoom, the text may display as two or more lines on the viewer&apos ...

"Obtaining a MEAN response after performing an HTTP GET

I'm currently in the process of setting up a MEAN app, however I've hit a roadblock when it comes to extracting data from a webservice into my application. While returning a basic variable poses no issue, I am unsure how to retrieve the result fr ...

What is the best way to avoid multiple triggers of an event listener in a Vue Js Component?

When I use an event listener to call a specific function, it behaves strangely. Here is the code snippet: mounted() { window.addEventListener("message", this.call); }, methods: { call(e){ if (e.data === "test"){ ...

Modify the label contents to reflect the selected file, rather than using the default text

Currently, I am working on customizing my file upload input to enhance its appearance. Everything is going smoothly so far, but I am facing difficulty in finding a suitable jQuery script that can meet my specific requirements. My objective is to have the ...

Vue.js Element UI form validation - showcasing errors returned by server

Utilizing Vue.js and Element UI libraries for my current project, I have implemented front-end validation with specific rules. However, I now also require the ability to display backend errors for the current field. When the form is submitted and an error ...

Retrieving HTML elements from the website address

Imagine having a URL like www.example.com. On this webpage, there is a DOM element <a>. To programmatically click on this element, you would typically use document.getElementById('#link')[0].click(). The challenge arises when dealing with ...

Nested Tables in JavaScript: Creating Tables within Tables

Recently, I have been analyzing student data and noticed a recurring structure. While preparing to present information on student performance within the discipline, I also became interested in showcasing a history of new students. It was suggested that hav ...

New options for outdated Webpack i18n plugin and loader

I am currently working on a TypeScript project that requires loading translations from individual .json files assigned to each country. For instance, we would have separate language files like en.json, es.json. The goal is to be able to access these trans ...

The type of jQuery selector

I came across jQuery code that looks like this return 13 == t.keyCode ? (t.preventDefault(), !1) : void 0 Can someone explain what the ? and : mean in this context? Please provide a reference for further reading, as I am still new to jQuery. Thank you ...

Which Angular component, directive, or pipe would be best suited for creating dynamic HTML content similar to this?

(I am transitioning from React to Angular, so please bear with me if my question has a hint of React influence.) I am in need of developing an Angular component that can accept a string along with a list of terms within that string for displaying tooltips ...

Unable to display images - PhoneGap

I am experiencing an issue where images that are being dynamically added to my HTML display correctly in Firefox, but on all the Android devices I have tested, the images do not appear. Instead, a box with their alt text is shown. HTML: <div class="ui ...

Successful jQuery Ajax request made without the need for JSON parsing

I find it strange that my experience with jQuery's ajax function is completely different from what I'm used to. Below is the javascript code in question: $.ajax({ url: "/myService.svc/DoAction", type: "GET", dataType: "json", su ...

Can we access an element within the document using its context?

One common method to access an element is by using its id: <div id="myId"></div> <script type="text/javascript"> $(document).ready(function(){ $('#myId').something(); }); </script> However, there are inst ...

Concealed Selenium File Upload through Drag and Drop User Interface

Struggling to insert an image into the specified input using selenium web-driver. <input type="file" multiple="multiple" class="dz-hidden-input" accept="image/gif,image/jpg,image/jpeg,image/png,application/zip" style="visibility: hidden; position: abso ...

Updating subdata in an array using Reactjs handleChange

I am facing an issue with my handleChange function. While I can easily change data in the same directory without any problem, I'm struggling to update sub-data. I would like to find a clean solution for this without having to add extra functions withi ...

Come hang out in the user voice channel by reacting with your favorite emojis!

I am currently developing a Discord bot, and I want to implement a feature where the bot joins a voice channel if a user reacts to its message. I am using the awaitReactions function which only returns reaction and user data. Is there a way to retrieve th ...

Implementing expiration dates or future dates with jQuery

How can I modify this jQuery code to display an expiration date specified in months or years? For instance, I have created a Membership Card for a client that is valid for 2 years, and I would like to include an expiration date in the script. Thank you j ...