Using THREE Js to rotate a mesh on the Y-axis towards a targeted vector location

I've been trying all day to adjust the orientation of a mesh on its Y axis towards a specific location within another mesh.

I've experimented with different methods, but none have yielded successful results so far.

Here is the code I currently have:

   var vector = new THREE.Vector3(0,0,5);
   var axis = new THREE.Vector3(0, 1, 0);
   turret.quaternion.setFromUnitVectors(axis, vector.clone().normalize());

Despite this code, the turret isn't rotating as expected to face the specified vector position. I also attempted using Euler rotation and vec1.angleTo(vec2) to manipulate the direction of the turret without success.

If anyone could provide some insight into how this should be working and clarify any misunderstandings I might have, I would greatly appreciate it.

javascriptthree.jsrotation

Answer №1

Here is the THREE.Vector3 constructor definition (Documentation):

Vector3( x, y, z )

x -- The float value for the vector's x coordinate
y -- The float value for the vector's y coordinate
z -- The float value for the vector's z coordinate

If you intend to rotate a mesh on its Y axis but are rotating it on its Z axis instead, make sure to use:

var vector = new THREE.Vector3( 0, 5, 0);

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

Error encountered while loading slick grid

I followed the tutorial for using recline JS, but I keep encountering this error message: Uncaught Error: SlickGrid's 'enableColumnReorder = true' option requires jquery-ui.sortable module to be loaded Here is what I have done so far : &l ...

javascriptjquerybackbone.jsslickgrid

Ways to link numerous sockets within a single Vue.js project?

import VueSocketIOExt from 'vue-socket.io-extended'; import { io } from 'socket.io-client'; const socketOne = io('http://localhost:3200/'); const socketTwo = io('http://localhost:3100/'); Vue.use(VueSocketIOExt, so ...

javascriptvue.jswebsocketvuexvue-socket.io

Unique Soundcloud visualization using webglonDeletegist

After going through the SoundCloud documentation, I have been trying to figure out how to create a visualizer for SoundCloud tracks. The challenge is that in order to achieve this effectively, I need access to the source waveform. I suspect that direct acc ...

javascripthtmlwebglsoundcloud

Error: Unable to access 'createInvite' property from undefined variable

Having trouble generating an invite to one of my guild's channels. Here is the code snippet I am using: const { Client } = require("discord.js"); const client = new Client({ intents: [] }); client.on("ready", async () => { ...

javascriptnode.jsdiscord.js

Remove files from the server using an AJAX request

I am attempting to delete files on the SERVER using JavaScript, and I have already consulted the advice provided in this JavaScript file deletion thread My current JavaScript code looks like this: deleteFile = function() { return $.ajax({ url: "de ...

javascriptphpjsonajax

Error: excessive recursion detected within jQuery operations

I am experiencing a delay in posting on my aspx page due to an abundance of code and database connections. Although that's not a major issue, I am trying to disable the post button once it is clicked by the user, which I have successfully done. Additi ...

javascriptjqueryasp.net

Updating the state of a React Component using data from 2 input fields

I am facing an issue with two input fields of type "file" in a React component. My goal is to load a JSON file into each input field, save the data from both files into separate variables, and update the state of the component. However, I have noticed that ...

javascripthtmlcssreactjsinput

What is the best way to utilize Protractor to comb through a specific class, locate a p tag within that class, and validate certain text within it?

My current task involves using Protractor to locate a specific class and then search through all the p tags within that class to identify any containing the text "Glennville, GA". In my spec file, I have attempted the following steps: it('should fil ...

javascriptangularjsnode.jsjasmineprotractor

updating an object using its instance in angular: step-by-step guide

Having multiple nested arrays displaying data through HTML recursion in Angular, I am faced with the task of updating specific fields. Directly editing a field is simple and involves assigning its instance to a variable. arr=[{ "name":"f ...

javascriptangulartypescript

Enhance user experience with dynamic color changes in JavaScript

Looking to create a navigation menu with unique colors for each selected state? Check out the code below! After searching extensively, I stumbled upon this snippet. While it only includes one selected state, you can easily customize it for three different ...

javascriptcss

What causes the preview pane in an embedded Stackblitz project to not show up?

I've been attempting to integrate Stackblitz projects into my Angular application. The project editor pane displays correctly, but the preview pane is not showing the preview. Instead, it's showing an error message that reads: Error occurred: Err ...

javascripthtmlangularembedstackblitz

Android 403 error encountered when trying to access the Google Sign-In client script from the accounts.google.com URL with async defer attributes included

When I run my Angular app (built with the Ionic framework) locally in a browser, everything works fine. However, when I try running it through Android Studio or package and push it to my mobile phone, I encounter a 403 error. The issue seems to be related ...

javascriptandroidangularandroid-studioionic-framework

Issues encountered while utilizing Bliss as the template engine in NodeJS/Express

Seeking assistance in transitioning from Jade to Bliss as the template engine for a basic Express web application on NodeJS. Here is the code snippet from app.js: var express = require('express'), routes = require('./routes'), ...

javascriptnode.jstemplatesexpress

A versatile CSS and JavaScript slider component that is designed to be reused multiple times within a single webpage

Looking to create a CSS/jQuery slider that can be used multiple times on one HTML page. I have a client who wants sliders as category links, but I'm struggling to get it working as a single slider on a page. Can someone review the code and point out ...

javascriptjqueryhtmlcssslider

Traverse the list of JSON arrays

We've recently kicked off our 3rd semester just two weeks ago, diving into the world of basic event/DOM/fetch manipulation. My current task involves fetching data from https://jsonplaceholder.typicode.com/users, focusing on extracting all names and p ...

javascripthtmljson

How can Codeception/Selenium help in testing the tooltip or customValidity message?

I am trying to implement a feature in my Codeception scenario where I want to validate a form submission with user errors, such as confirming a wrong email address, and display a custom tooltip message in the browser. HTML <form ... > <label ...

javascriptseleniumcodeception

What is the recommended way to modify page within a CATCH block in Node.js and Express?

I've written a short code snippet below that scrapes movie titles from the IMDB website. The code is functioning well with basic error handling using catch. app.get("/", function(err, req, res){ function handleError(err) { console.log('Ohhh ...

javascriptnode.jsexpressasync-awaitpuppeteer

Resetting the caret position in a React Native TextInput occurs when switching the secureTextEntry prop

As I develop a component to wrap the React Native TextInput in my app, I encounter an issue with the caret position resetting to 0 when toggling the secureTextEntry prop for password visibility. To address this problem, I implemented a workaround using a s ...

javascriptreactjsreact-native

Is it necessary for me to develop and implement my own jquery script for slideToggle animation when utilizing bootstrap offline (through npm)?

After mastering the art of creating websites with bootstrap, I decided to use it for a project. Initially, I used an online bootstrap tool to ensure optimal display. The navbar I created had a hamburger menu that triggered a smooth animation upon clicking: ...

javascripthtmljquerybootstrap-4

Is there a way to utilize req.query, req.params, or req.* beyond its original scope without the need to store it in a database?

Looking to streamline my code and apply the DRY pattern, I've been working on creating a helper function for my express http methods. The structure of each method is similar, but the req.params format varies between them. Here's how I attempted t ...

javascriptmysqlnode.jstypescriptexpress