Can one object be directed towards another?

I am working on calculating the orientation value between two objects in three.js. My goal is to assign a value of 1 when one object is directly facing another and -1 when it is facing directly away.

Although I have the object's global position and quaternion for orientation, I am not getting the expected numbers with my current approach.

My current method involves storing the object orientation as a 3-part vector:

const lookVector = new THREE.Vector3(0,0,1);
const direction = lookVector.clone().applyMatrix4(torsoMesh.matrix);
this.lookVector = direction.sub(this.worldPosition);

Then, I use this vector to calculate the angle to another specified point:

angleTo(pointOfInterest){
    const vectorToPOI =  pointOfInterest.sub(this.worldPosition);
    const angle = this.lookVector.angleTo(vectorToPOI);
    return angle;
}

Answer №1

If you're looking to accomplish this, one method is utilizing the dot product technique. It's quite straightforward - simply normalize both vectors and multiply each corresponding component before summing them together. Further explanations on this can easily be found online, but here's an example using three.js:

this.lookVector.normalize();
pointOfInterest.normalize();
var angleValue = this.lookVector.dot(pointOfInterest);

By calling normalize() on a vector, keep in mind that you are altering it.

angleValue essentially represents the cosine of the angle between the two vectors. Alternatively, you could achieve the same by doing:

.
.
return Math.cos(angle);

Hoping I've interpreted your query accurately.

Answer №2

It has come to my attention that mesh objects store rotation values in radians. One possible solution could be implementing a "parent mesh" concept, where its rotation values can be used to calculate the final result.

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

The navigation icon on my website refuses to close

Hey there, I'm having some trouble creating a side navigation menu. The issue I am facing is that the menu opens without any problem, but then I can't seem to figure out how to close it using a second "onclick()" function. If you could take a lo ...

Capturing the row selected within a table using AngularJS

Displayed below is an HTML Code that includes a table which retrieves items from costList and presents them in separate rows. The objective is to exhibit the item value when a row is clicked. How can this be achieved using Angular? Your help is greatly a ...

What is the best way to integrate a React component into an Angular project?

Struggling with integrating a React component into an Angular project and unable to make it work. I have a JavaScript file containing the React component that I want to use in Angular. Here's an example: React file... import React from "react"; c ...

Tips for ensuring a watcher only runs once in each digest cycle, regardless of how many times the property is modified

I am facing an issue with my function $scope.render() that relies on the value of $scope.myProperty to render a chart. Whenever myProperty changes during a digest cycle, I need to ensure that $scope.render() is called only once at the end of the digest cyc ...

Encountering issues with querySelector() across certain classes

I need to display the actual date in my first column, but my JavaScript script is only working for one class in my HTML code. Question: How can I make my JavaScript code work for every class in the HTML code? I am currently using querySelector(), but I fe ...

Can you explain the distinction between using call and apply?

Can you explain the distinction between utilizing Function.prototype.apply() and Function.prototype.call() to execute a function? const func = function() { alert("Hello world!"); }; func.apply() compared to func.call() Do performance dispar ...

Leveraging regular expressions for handling apostrophes

I need help with a function function convertToTitleCase(sentence: string) { return sentence.replace(/\b\w/s, word => word.toUpperCase()); } Current output: Men's apparel Desired output: Men's Apparel Can anyone assist me in achi ...

Tips for aligning meshes to the left and ensuring responsiveness in three.js

Currently working on a website using three.js, I'm facing an issue where I can't seem to align and make the mesh responsive simultaneously. My current approach to alignment is: cube.position.x = -20 However, when I try resizing the window, the m ...

When using axios to post to an API, the data being sent is showing as an empty object when logged on the server

I recently started working with nodejs and have been experimenting with sending data in a post API using axios, but I am encountering an issue where the data is not being received on the server side. Here is my current setup: CLIENT export default class A ...

The Fundamentals of AngularJS Providers and Models

As a newcomer to the AngularJS framework, I am faced with a challenge in pulling complex data from a Web API backend into my application's $scope. My goal is to utilize this front-end library to display this data in a calendar widget. My issue lies i ...

Checking the validation status of input in Angular 2

Currently, I am in the process of developing an input text component using angular2. One requirement I have is to include a class in this control if it is both valid and required. Here is the code for the component: import { Component, Input } from "@ang ...

JavaScript encoding the text

Looking for a straightforward JavaScript function to encrypt text data from a textarea using a key (the key being the user's password stored as a hashed session variable, outputted by PHP into a field). The objective is to have the content of the tex ...

How to fetch an image from a web API using JavaScript

I have recently entered the world of web development and I am facing an issue where I am trying to retrieve a Bitmap Value from a web api in order to display it on an HTML page using JavaScript. However, despite my efforts, the image is not getting display ...

Data within an array can become compromised when passing through a complex series of nested asynchronous arrow

This discussion thread delves into the intricacies of sync versus async operations and offers potential solutions. However, despite implementing one of the suggested solutions, I continue to encounter errors. I believe I have reached my limit in understand ...

Guidelines for adjusting canvas dimensions based on parent div attributes

Trying to insert a p5.js canvas into a div using the divs width to control the canvas width, within a jekyll post. The markdown file includes a div positioned at the top of the post. <div id="myCanvas"</div> <script src="/js/p5Sketches/firstP ...

Is it possible to incorporate FCM into Next.js and effectively handle server-side events for FCM on Next.js servers?

Is it feasible to incorporate the Firebase Cloud Messaging (FCM) into my upcoming Next.js application? Can I manage both client-side and server-side modules within the server side? ...

The problem of IE being interrupted by Ajax requests

Currently facing an issue with IE7 that doesn't occur in Chrome or Firefox: I have multiple page elements being loaded through ajax. These elements are dynamically displayed on the page as hyperlinks to another page. As these elements load, I can som ...

Making an HTTP POST call from an Angular frontend to an Express server

I encountered an issue with sending a POST request to an API hosted on the same server but on a different port from my Angular front-end application. Below is the code snippet: import { Component, OnInit } from '@angular/core'; import {HttpCli ...

JavaScript functions are not effective within the updated innerHTML

Using Monaca IDE and Onsen UI, I am delving into AngularJS to develop a hybrid app. However, upon fetching the server response, I noticed that the JavaScript methods are not being utilized as expected. For example, the {{"hello"}} at the end of the code sn ...

Guidelines for creating numerous self-edges within a node-link diagram using D3

Creating a single self-link on a node within a node-link diagram can be accomplished by following the instructions outlined in this resource: D3 Force Layout Self-Linking Node If you need to draw multiple links on the same node, what modifications would y ...