Seeking a solution on how to rotate a sphere in order to align one specific point with another on the surface, like illustrated in the image below.
An illustration of the desired movement
While I've come across tutorials explaining this process in Unity using Quaternion.FromToRotation, I'm unable to find a similar function in Three.js.
Any assistance on this matter would be highly valued.
While there may not be a predefined method like Quaternion.FromToRotation for three.js, you can easily achieve the rotation from B to A with just a few lines of code.
import * as THREE from 'three';
const geometry = new THREE.SphereGeometry(1)
const material = new THREE.MeshBasicMaterial({ color: 0xffffff });
const sphere = new THREE.Mesh(geometry, material);
const vector_B = new THREE.Vector3(1,1,1).normalize();
const vector_A = new THREE.Vector3(0,0,1).normalize();
const n = vector_B.clone().cross(vector_A).normalize();
const theta = vector_B.angleTo(vector_A);
const q = new THREE.Quaternion(n.x * Math.sin(theta / 2), n.y * Math.sin(theta / 2), n.z * Math.sin(theta / 2), Math.cos(theta / 2));
sphere.applyQuaternion(q);
In this implementation, I made assumptions about the direction vectors B and A. By exploiting the mathematical relationship between these vectors, we derived the quaternion q that rotates from B to A based on their cross-product (represented by n) and the angle between them (denoted by theta).
const q = new THREE.Quaternion(n.x * Math.sin(theta / 2), n.y * Math.sin(theta / 2), n.z * Math.sin(theta / 2), Math.cos(theta / 2));
Does Firebase have a feature that allows me to verify if an email confirmation has already been sent to a user? I am able to check validation, but I need to determine whether the verification email has already been sent in order to decide if it needs to be ...
I am currently in the process of developing a hybrid Android App using Phonegap/Apache Cordova. The main function of my app is to retrieve data from my web API, which is being served through JSON. I have implemented the following code snippet for this task ...
To start, I retrieve a JSON array by using the following JavaScript code: $.getJSON("myJSONfile.json") .done(function(data) { myData = data; }); After storing the data in myData, which is a global variable, I proceed to add more informati ...
After attempting to prerender the routes of my SPA using the npm package prerender-spa-plugin with Vue CLI 3, I received a satisfactory output. However, upon running "npm run build," I encountered an error in the index.html file. The error displayed in th ...
I followed the steps to create a react application using npx create-react-app myapp, but when I use npm start, it fails to start a developer server. Even after trying to reinstall the node_modules, the issue persists. I am using the latest versions of Reac ...
Looking to implement a Favorite module in my React Native app using Firestore. Here is the code snippet: addFavorite() { getPlaceName().doc(this.selectedPlaceName.id).set({ favorite: { uid : true ...
In my current project using React, I've successfully implemented a feature where a ball follows the cursor with JavaScript. The ball only appears when it hovers over a button element, thanks to this CSS block: #app button:hover + .ball { display: b ...
Currently, I am working on a JavaScript project that involves implementing a 'scroll-to-top' button within a Vuetify v-dialog component. The button should only appear after the user has scrolled down by 20px along the y-axis. Within the v-dialog, ...
I am attempting to determine if a value from array1 exists within an object in array2. array1: [2,5,1] array2: [ { value: 1, name: 'Monday', isSelected: false }, { value: 2, name: 'Tuesday', isSelected: false }, { value: 3 ...
Currently, I am working on a jQuery slide toggle functionality that involves clicking an item in one ul to toggle down the corresponding item in another ul. However, I am encountering difficulties in linking the click event to the correct id and toggling t ...
After successfully viewing the image, I encountered an error when trying to navigate back using <NuxtLink :to="{ path: 'About', hash: '#secondNav' }" class="close">, which resulted in a message stating Cannot f ...
I have created dynamic links where clicking on a country link displays the cities of that particular country. I am trying to retrieve the event.target.id of the dynamically generated city link when it is clicked. $(".countryName").children().on('cl ...
I'm currently working with a JSON file and trying to display it in a bootstrap table. Check out the code snippet I've been using: $(document).ready(function(){ $.getJSON(url, function(data){ content = '<h1><p class="p1 ...
My application features a datatable with pagination. When a user selects a row in the table, a report is displayed below it that can be edited. If the user attempts to select another row without saving any pending edits, they are given a warning and the op ...
Within my project, there exists a form, <form id="form3" name="form3"> <input type="text" id="number" name="number" value="" >Number</input> <button type="button" onclick="submit();">Submit</button> </form> When at ...
I am having trouble with downloading a QR code canvas image with a background. The download works fine, but my device is unable to scan the code properly due to an incomplete border. I need to add a white background behind it to make it larger. Current im ...
In my jQuery code, I am looping through a result set using $.each and attempting to append data to a table: $.each(result, function (y, z) { $table.append("<tr>"); $table.append("<td>" + y + "</td>"); ...
I am facing an issue with my Vue component where I am trying to set the image src using data from my api. const product = computed(() => { return store.products.find(product => product.slug === route.params.slug); }); const selectedImage = ref(n ...
My mind is currently in disarray. I am interested in developing two unique jQuery plugins: A tab plugin A slider plugin. These plugins need to be able to communicate with each other. For example, clicking on a tab should activate the corresponding index ...
Two routes in my application share a controller, but one route requires data to be resolved before the view loads while the other does not. Here is an example of the routing segments: ... when('/users', { controller: 'UsersCtrl', ...