Navigate vertically using the pointer lock feature in THREE.js

I am seeking a way to achieve vertical movement using three.js's pointerlockcontrols. Specifically, I desire the movement to be similar to three.js's flycontrols, where the vertical direction of movement is proportional to the direction the user is looking (e.g., moving northeast results in simultaneous movement in the Y and Z axes).

My attempt so far has been:

if(keys[38] || keys[87]){
    Controls.moveForward(playerSpeed);
    Camera.position.y += Math.cos(Camera.rotation.y) * playerSpeed;
}

However, this code did not provide the desired behavior, as looking straight down would move the player forward significantly. I am puzzled by this issue and am seeking advice from anyone who has successfully tackled this problem before.

javascriptthree.js3dcameratrigonometry

Answer №1

If you want to modify the functionality of the moveForward(distance) method, you can do so by implementing the following code:

    moveForward(distance) {
        const camera = this.camera;

        _vector.copy(this.getDirection(_vector));

        camera.position.addScaledVector(_vector, distance);
    }

The original implementation calculates the forward direction using the camera's side and up vectors, allowing movement in the xz-plane.

My modification utilizes the existing getDirection method to apply the distance traveled on the resulting vector.

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

Using Inline Styling to Showcase a Background Image in a REACTJS Component

import React from 'react'; import Slick from 'react-slick'; import style from './Slider.module.css'; import {Link} from 'react-router-dom'; const SliderTemplates = (props) => { let template = null; const ...

javascriptcssreactjs

Tips for transferring information from the isolate scope to the parent scope

As a newcomer to AngularJS, I am exploring the creation of directives and how to invoke functions from the parent scope within them. While I have successfully achieved this, I am now grappling with the challenge of passing data from the isolate scope via a ...

javascriptangularjs

What is the best way to implement dynamic comment display similar to Stack Overflow using Asp.net and Jquery?

I have created a small web application using Asp.net and C#. Currently, I am able to retrieve comments by refreshing the entire page. However, I would like to achieve this functionality without having to do a full refresh. For instance Let's say the ...

javascriptjqueryasp.net.netangularjs

Create a fresh instance of an object in node.js by utilizing the require/new method

I am encountering a beginner problem with node.js where I cannot seem to create objects using the 'new' operator in the index.js file. My goal is to define a simple Person object within a Person.js file, located in the same directory as my index ...

javascriptnode.jsooprequire

Achieving success with the "silent-scroll" technique

I've been struggling to implement the 'scroll-sneak' JavaScript code for quite some time now. This code is designed to prevent the page from jumping to the top when an anchor link is clicked, while still allowing the link to function as inte ...

javascriptjqueryhtmlcss

In JavaScript, the event.defaultPrevented property will never be set to true

I've been experimenting with events in my script, but I'm struggling to understand the functionality of event.preventDefault()/event.defaultPrevented: var e = new Event('test'); e.defaultPrevented; > false e.preventDefault(); e.d ...

javascriptdom-events

Troubleshooting overload errors within ReactJS: tips and tricks

import React from 'react' import { Link } from 'react-scroll' import "./Protocol.css" import { ANALYTICS, TRADE, USERS, TRADERS, VOTES, ZEROES } from "../../Constants" const Protocol = () => { return ( ...

javascriptreactjstypescriptreact-hooksreact-scroll

What is the best way to reference an ImageButton using jquery?

I created an HTML page with a special div in the body that contains a collection of buttons and images. <div id="div_one"> <button id="button_one"> <asp:Image id="image_button_one" ImageUrl=".." runat="server"> </button> </div& ...

javascriptjqueryformsimagebutton

The process of dynamically inserting input types into a <td> element using the innerHTML tag is not functioning properly in Internet Explorer

I am facing an issue with dynamically placing input types within a <td> tag - the innerHTML() method is not functioning properly in Internet Explorer, although it works fine in Mozilla. This is how I am inserting the input types using JavaScript, wi ...

javascripthtmlinternet-explorer

Conversing about the user data modeling in MongoDB

Here's a question for you: Is it a better idea to separate the users' model into one for storing passwords for access, and another for profile information? Or is it more secure to have everything together in one model? What are your thoughts on t ...

javascriptnode.jsmongodbsecuritybackend

Ways to stop Android from automatically restarting an application after invoking the camera intent

I am experiencing an issue on a low memory device after calling the camera intent. Whenever the activity result is supposed to be received, the app restarts on Android. Has anyone else encountered this problem? Is there a solution available? ...

androidcameralifecyclerestartactivity-lifecycle

I'm looking to learn how to efficiently write file chunks from a video upload in Node Js. How can I

My current project involves attempting to stream webcam or audio data to Node.js and save it on disk. The aim is to send the chunks of data to the server as soon as they are available. I have successfully captured the stream using getUserMedia, set up me ...

javascriptnode.jsexpresswebrtcgetusermedia

What are some clever ways to handle the transition of the display property?

While transitions for the display property may not work, I am exploring alternatives. I attempted using the visibility property but it didn't quite fit my needs. In my current setup, different text is displayed when hovering over an anchor tag by sett ...

javascriptjqueryhtmlcss

Transitioning JS/CSS effects when the window is inactive

My latest project involved creating a small slider using JavaScript to set classes every X seconds, with animation done through CSS Transition. However, I noticed that when the window is inactive (such as if you switch to another tab) and then return, the ...

javascriptcss

Iterate over an array in JavaScript and include the elements as parameters in an SQL query

Can I set an SQL string to a variable in JavaScript and populate part of it by looping through an array? Here is the initial SQL: var tag = ["fun", "beach", "sun"]; var sql = "SELECT * FROM myTable " +"WHERE id > 5" //... // L ...

javascriptsqlloops

What is the best way to modify the height of a div before fetching an image using Ajax, and then revert it back to its original height once the image has been

Using a form and Ajax, I'm dynamically pulling an image to replace another image in the .results div. Initially, when the image was removed and loaded, the page jumped up and down, so I tried adding a style attribute to set the div height and then rem ...

javascriptjqueryajax

Transforming API Response into a structured format to showcase a well-organized list

When I make an API call for a list of properties, the data comes back unorganized. Here is how the data from the API looks when stored in vuex: posts:[ { id: 1; title: "Place", acf: { address: { state: "Arkansas", ...

javascriptjsonvue.jssortingvuejs2

Executing untrusted JavaScript code on a server using a secure sandbox environment

I am facing difficulties in creating a secure node sandbox that can execute untrusted code while allowing users to communicate with the program through api calls (input and output). My goal is to establish a browser console where users can run their own se ...

javascriptnode.jsexpressvirtual-machine

Is it possible to integrate two calendars into the `DatePicker` component of MUI?

The <DateRangePicker/> component from MUI has a prop called calendars which determines the number of calendars displayed inside the component popup. Here is an example: If the calendars prop has a value of "3", it will look like this: https://i.sta ...

javascriptreactjsnext.jsmaterial-uimui-x

The document.getElementsByClassName method in JavaScript is returning an Array with a length property value of 0

My HTML contains a list of li elements with one class. I am attempting to collect them all and place them in an array to determine how many have been gathered. However, when I attempt to display the number using the .length property of the array returned b ...

javascripthtmlcssarrays