Pointer lock controls in Three.js enabling shooting in the y-axis direction

I am currently working on a first-person shooter using three.js and pointerlockcontrols.

With the following code, I'm able to shoot in any horizontal direction:

var direction = new THREE.Vector3( 0, 0, -1 );
var rotation = new THREE.Euler( 0, 0, 0, "XYZ" );
var cameraDirection = new THREE.Vector3(this.game.usermodel.root.children[0].position.x, this.game.usermodel.root.children[0].rotation._x, this.game.usermodel.root.children[0].position.z);
cameraDirection.copy( direction ).applyEuler( this.game.user.rotation );

var raycaster = new THREE.Raycaster(this.game.usermodel.root.children[0].position, cameraDirection); 

However, my current implementation neglects the y-axis. The following line represents the pitch rotation:

this.game.usermodel.root.children[0].rotation._x

How can I incorporate this value to allow shooting along the y-axis (vertically in any direction) as well? As it stands now, the bullet only travels in a straight line.

I appreciate any help or guidance you can provide. Thank you!

Answer №1

If you are implementing PointerLockControls and need to configure a raycaster, follow this approach:

var direction = new THREE.Vector3();
var raycaster = new THREE.Raycaster(); // initialize once and use multiple times
...

controls.getDirection( direction );
raycater.set( controls.getObject().position, direction );

Avoid directly adjusting the camera's position or rotation when utilizing PointerLockControls.

Version: three.js r.71

Answer №2

After further investigation, I managed to find a workaround solution for this issue on my own. While it may not be the most optimal method, it does get the job done.

The updated approach involves obtaining the base mesh rotation and applying the Euler angles, followed by adding the pitch rotation. By doing this, both horizontal and vertical rotations are passed into the raycaster for accurate calculation.

var direction = new THREE.Vector3( 0, 0, -1 );

direction.copy( direction ).applyEuler( this.game.user.rotation );
direction.y = this.game.usermodel.root.children[0].rotation._x;

var raycaster = new THREE.Raycaster(this.game.usermodel.root.children[0].position, direction);

Feel free for anyone to provide feedback or suggest a more elegant solution to this problem.

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

Is there a way for me to send a form containing pre-existing data from a different page?

Seeking advice: I realize that utilizing jQuery's ajax function may be the simplest approach, however I am facing an issue with the form field names. The var_dump below displays the typical values submitted by the form using test data. It appears that ...

"Adjust the placement of a personalized marker on a Google Map using google-map-react

I have incorporated google-map-react into my React project and I have designed custom markers. The markers are displayed at the correct location but from the top left corner: https://i.sstatic.net/e6lGN.png The red dot indicates the exact location. Howe ...

Dynamic URL behavior in AngularJS

Let's say I have 3 links displayed on my webpage: A B C, When the user clicks on link A, it should trigger a function like this: var app = angular.module('myApp', []); app.controller('myCtrl', function($scope, $http) { $http.ge ...

How to fetch React route parameters on the server-side aspect

I encountered a challenge while working with ReactJS and ExpressJS. The user uploads some information on the /info route using React and axios. Then, the user receives route parameters from the server side to redirect to: axios.post('/info', Som ...

The iframe is not large enough to contain all the HTML content

I'm encountering a problem with a website I'm currently developing - specifically, I am struggling to embed an HTML document into an iframe in a manner that fills the entire page. Additionally, I am utilizing Angular to retrieve the HTML document ...

Creating a customized image modal in ReactJS that incorporates a dynamic slideshow feature using the

I am attempting to incorporate an image lightbox into my React application: https://www.w3schools.com/howto/howto_js_lightbox.asp Here is the link to the CodeSandbox where I have tried implementing it: https://codesandbox.io/s/reactjs-practice-vbxwt ...

What is the reason behind Google Closure Compiler appending a variable to the global namespace when the original namespace was blank?

My long script is neatly enclosed within a (function() {/.../})() to prevent any name pollution. It has been typed with complete accuracy and zero warnings. I recently discovered that Google Closure compiler initially redefines i and j in the global names ...

Unable to display Boostrap modal upon clicking href link

Can someone help me troubleshoot why my pop modal is not displaying after a user clicks on a specific link on my webpage? I have attempted the following: <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></s ...

Locate a specific document by searching for a specific value within a subdocument contained within an array

In my database, there exists a Mongoose collection named WorkoutUser with a simplistic schema as shown below: const WorkoutUserSchema = new Schema({ user: { type: Schema.Types.ObjectId, ref: 'User', required: true, }, exercises: ...

Mastering DragControl for Object3D in Three.js

After loading a jSON Object into the scene using ObjectLoader, I encountered an issue where I couldn't assign DragControls to them. However, when a mesh is added to the Loader, I was able to assign dragcontrollers successfully. In my projects, I refe ...

What is the best way to set up jest to generate coverage reports for Selenium tests?

I recently made the switch to using jest for testing my JavaScript project after encountering coverage issues with mocha and chai. While my unit tests are providing coverage data, my Selenium tests are not. I've tried various solutions found in outdat ...

Filter an array in Angular 2 and add additional data to it

Quick query: I have 2 arrays/objects. The first one contains all items, while the second contains selected IDs from the first array. My question is, what is the most efficient way to iterate through both arrays, identify selected items from the second arr ...

A Challenge with jQuery Compatibility in Safari

My latest project involves creating a unique navigation bar that transitions off the screen when users scroll down, then smoothly slides back into view when they stop scrolling or scroll up. Check out a snippet of my script and a jsfiddle below: $(documen ...

I'm curious as to why a webpage tends to load more quickly when CSS files are loaded before script files. Can anyone shed some

While watching a video, I came across some concepts that were a bit difficult for me to grasp. The video mentions that scripts are 'serialized' and can block subsequent files from loading. According to this explanation, Script 1 would load first ...

A script that creates folders in Google Drive using a portion of the file name and organizes the files within

I require assistance in transferring files from a single Google Drive folder to folders named after the file names. The files come in two formats: .psd and .jpg. I am looking for a custom google.script that can identify the file name, create a folder base ...

Is it possible to have the cursor rotate or animate by 45 degrees when clicked

Do you know how to create a unique custom cursor using CSS? Say, for example, we have this code: cursor: url(images/cursor.png) 15 15, auto; Now, what if we wanted to take it up a notch and make the cursor rotate -45 degrees when clicked, and then revert ...

Accessing QML Functions from JavaScript

Currently, I am faced with a challenge in my app development using Qt. I need to trigger a QML function from JavaScript when a specific event is triggered from my HTML page. I attempted the following method: app.html <html> <head><title& ...

JavaScript calculator not calculating values correctly

I am facing an issue with my JavaScript calculator. The problem occurs when I try to perform addition, such as adding 5+5, the result gets stuck at 10 and does not continue to increment (10, 15, 20, etc). Below is the code snippet that I am using: func ...

When working on my asp.net webform, I incorporated an AgreementCheckBox along with a CustomValidator. However, I encountered an issue where the error message

Code for AgreementCheckBox: <asp:CheckBox ID="AgreementCheckBox" runat="server" ForeColor="Black" Text="Please agree to our terms and conditions!" /> Code for AgreementCustomValidator: <asp:CustomValidator ID="AgreementCustomValidator" runat=" ...

HTML Date input field not respecting locale settings and defaults to mm/dd/yyyy format

When using an html date input in an ng-repeat scenario, I noticed that it defaults to mm/dd/yyyy even though my computer's regional settings are set to dd/mm/yyyy. <script src="//unpkg.com/angular/angular.js"></script> <body ng-app&g ...