Guide to aligning an object with the movement of the PointerLockControls in Three.js

I am currently working on a simple FPS game using Three.js and PointerLockControls. My goal is to attach a weapon to the camera/controls.

Although I have managed to position the gun in front of the camera and move it along the x/y axis, I am facing an issue with its movement along the z axis (up/down).

function updateGun() {
    if (weapon) {
        const yaw = controls.getObject();
        weapon.position.set(
            yaw.position.x - Math.sin(yaw.rotation.y) * 3,
            yaw.position.y - 1,
            yaw.position.z - Math.cos(yaw.rotation.y) * 3);

        weapon.rotation.set(
            yaw.rotation.x,
            (yaw.rotation.y - Math.PI),
            yaw.rotation.z);
    }
}

Answer №1

If you are utilizing the PointerLockControls feature and need to include an object that remains in front of the camera, you can follow this method:

var shape = new THREE.Mesh( new THREE.SphereGeometry( 5, 16, 8 ), new THREE.MeshNormalMaterial() );
shape.position.z = - 100; // set to a negative value

camera.add( shape );

If you do not have PointerLockControls enabled, you can still apply the same approach by ensuring to add the camera as a child of the scene.

scene.add( camera );
camera.add( shape );

This code is tested on three.js version r.84

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 it possible to use jQuery for drag-and-drop functionality?

Currently, I am working on developing a drag-and-drop widget that consists of 3 questions and corresponding answers. The user should only be able to fill in 2 answers in any order, while the third drop area should be disabled. This third drop area can be l ...

Append a constant string to the conclusion of the route parameter

Using React Router v6.4.1, I am aiming for a consistent conclusion to a series of dynamic routes. Specifically, I want my product detail routes to always end with "-product". For example, if the path is "/shaver-900-product", it should activate my Produc ...

After exporting static HTML, the links in Next.JS seem to become unresponsive

Exploring the world of NEXT.JS for the first time and encountering challenges with deploying a static site. In my component Nav.tsx, I have the following structure: const Nav = () => { return ( <nav className='nav p-3 border-bottom&a ...

Gain access to PowerBI reports effortlessly without the need to input any credentials

Seeking guidance on calling Power BI reports from an ASP.NET C# web application while passing credentials, specifically without utilizing Azure AD. Access has been granted to certain users in the Power BI Service workspace with view permissions. We aim t ...

embedding a scrollable section within a stationary container

I'm facing an issue with two divs where I need the parent to be fixed and the child to be scrollable. CSS for the parent div: aside{ height: 100%; float: left; width: 25%; position: fixed; border-style: solid; border-right-col ...

The list countdown for loop only appears in the initial iteration

Hey there, I'm currently facing an issue with duplicating my JavaScript countdowns and displaying images of cards on each loop iteration. Strangely, the countdown only appears in the first instance even though it's within the loop. I'm seeki ...

Despite setting allowHalfOpen to True, Node.js: Client still disconnects from Server

I've been working on a Node.js script that involves creating a server if a specific port is available, or connecting to an existing server if the port is already in use. To achieve this, I am using a recursive approach based on a reference from this l ...

Is Jquery "resistant" to updating CSS properties?

Within my HTML document, there exists a div with the class fd-video-upload-box, which has the following style properties applied: background-color: rgb(236, 238, 239); outline: 1px dashed gray !important; Upon rendering, it displays correctly as intended ...

Having trouble with V-For image paths not locating the image files? Need help on adding the right file path while using v-for?

I am currently using Vue/Nuxt and facing an issue with populating an image carousel. The images I want to insert into the carousel are stored in a folder named "AreaPictures" within my assets directory. This is how my v-for loop is structured: &l ...

Why does Safari browser keep showing NAN instead of a value?

In my quest to calculate the difference between two times in Safari browser, I encountered an issue. The code works perfectly fine in Chrome, but in Safari, it returns NAN. When I run the application for the first time, I save today's date. On subsequ ...

Require a Single Error Message When Two Fields Are Left Blank

I've been working on an asp.net contact form that includes fields for 'Tel No.' and 'Email'. I'm trying to set up one error message for when both of these fields are left blank upon form submission, but I just can't seem ...

Send Symfony2 form data via AJAX

When trying to render a form with AJAX and update existing values, I am facing an issue. Even after using the preventDefault method in my script to stop form submission, the form is still submitting. Here's the snippet of my script: $('#edit-co ...

What is the process for adjusting settings through selected options in a pop-up menu?

Here are the choices available: <form> <select id="poSelect" > <option selected disabled>Choose here</option> <option id="buyeroption" value="100101">I am a Buyer</option> ...

Bring in LOCAL .obj for loading with Three.js OBJLoader in a React environment

Attempting to import a local .obj file using the THREE.OBJLoader().load() function is causing issues. While it successfully loads non-local URLs such as '', loading the local file takes a long time due to downloading it every time. The setup inv ...

What steps can I take to deactivate input and stop it from being accessible on the browser?

insert image description Is there a method to block users from accessing disabled input fields in the browser? Any recommendations or solutions would be greatly appreciated. Vuejs is utilized within my project. Implementing this feature serves as a secu ...

Tips on retrieving JSON data from javascript files

Hey everyone, I need assistance with using Tumblr and connecting my Twitter account. Tumblr provided me with this sample file: I'm wondering if it's possible to retrieve follower count and screen name data from this file. If so, can someone guid ...

The presence of an undefined variable in `esm.js` is resulting in an overwhelming amount of

After upgrading from Node v14 to Node v16, I encountered a strange error specifically when running node with node -r esm. The error message reads: ReferenceError: myVar is not defined This results in an extensive output of the esm.js module spanning 5000 ...

Enhancing the efficiency of nested ajax calls loop

Disclaimer: While the final result is successful, I am struggling to comprehend the sequence in which a loop of nested ajax calls operates. Essentially, I have two ajax calls that fetch data from an external API using curl GET requests. They both rely on ...

Adding items to a dropdown list using AngularJS

I'm attempting to add an item to my dropdown list by targeting its ng-class after a save function in AngularJS. However, I am struggling to understand what the issue might be as I am still new to AngularJS. Any advice would be greatly appreciated: Dr ...

A guide on exposing TypeScript classes globally through a WebPack bundle in JavaScript

Currently delving into TypeScript, my aim is to gradually replace JS with TS. However, due to having numerous JS files, my strategy involves creating new classes in TS and incorporating them into my existing JS files for the time being. Eventually, I plan ...