What is the reason behind limiting the yawObject position to a maximum of 10 in the Three.js PointerLockControls source code?

Currently, I'm engrossed in developing a fundamental Demo FPS engine, employing the PointerLockControls example from the Three.js source located here: https://github.com/mrdoob/three.js/blob/master/examples/js/controls/PointerLockControls.js

/**
 * @author mrdoob / http://mrdoob.com/
 */

THREE.PointerLockControls = function ( camera ) {

    var scope = this;

    camera.rotation.set( 0, 0, 0 );

    var pitchObject = new THREE.Object3D();
    pitchObject.add( camera );

    var yawObject = new THREE.Object3D();
    yawObject.position.y = 10;
    yawObject.add( pitchObject );

    var moveForward = false;
    var moveBackward = false;
    var moveLeft = false;
    var moveRight = false;

    var isOnObject = false;
    var canJump = false;

    var velocity = new THREE.Vector3();

    var PI_2 = Math.PI / 2;

    var onMouseMove = function ( event ) {

        if ( scope.enabled === false ) return;

        var movementX = event.movementX || event.mozMovementX || event.webkitMovementX || 0;
        var movementY = event.movementY || event.mozMovementY || event.webkitMovementY || 0;

        yawObject.rotation.y -= movementX * 0.002;
        pitchObject.rotation.x -= movementY * 0.002;

        pitchObject.rotation.x = Math.max( - PI_2, Math.min( PI_2, pitchObject.rotation.x ) );

    };

    var onKeyDown = function ( event ) {

        switch ( event.keyCode ) {

            case 38: // up
            case 87: // w
                moveForward = true;
                break;

            case 37: // left
            case 65: // a
                moveLeft = true; break;

            case 40: // down
            case 83: // s
                moveBackward = true;
                break;

            case 39: // right
            case 68: // d
                moveRight = true;
                break;

            case 32: // space
                if ( canJump === true ) velocity.y += 10;
                canJump = false;
                break;

        }

    };

    var onKeyUp = function ( event ) {

        switch( event.keyCode ) {

            case 38: // up
            case 87: // w
                moveForward = false;
                break;

            case 37: // left
            case 65: // a
                moveLeft = false;
                break;

            case 40: // down
            case 83: // s
                moveBackward = false;
                break;

            case 39: // right
            case 68: // d
                moveRight = false;
                break;

        }

    };

    document.addEventListener( 'mousemove', onMouseMove, false );
    document.addEventListener( 'keydown', onKeyDown, false );
    document.addEventListener( 'keyup', onKeyUp, false );

    this.enabled = false;

    this.getObject = function () {

        return yawObject;

    };

    this.isOnObject = function ( boolean ) {

        isOnObject = boolean;
        canJump = boolean;

    };

    this.getDirection = function() {

        var direction = new THREE.Vector3( 0, 0, -1 );
        var rotation = new THREE.Euler( 0, 0, 0, "YXZ" );

        return function( v ) {

            rotation.set( pitchObject.rotation.x, yawObject.rotation.y, 0 );

            v.copy( direction ).applyEuler( rotation );

            return v;

        }

    }();

    this.update = function ( delta ) {

        if ( scope.enabled === false ) return;

        delta *= 0.1;

        velocity.x += ( - velocity.x ) * 0.08 * delta;
        velocity.z += ( - velocity.z ) * 0.08 * delta;

        velocity.y -= 0.25 * delta;

        if ( moveForward ) velocity.z -= 0.12 * delta;
        if ( moveBackward ) velocity.z += 0.12 * delta;

        if ( moveLeft ) velocity.x -= 0.12 * delta;
        if ( moveRight ) velocity.x += 0.12 * delta;

        if ( isOnObject === true ) {

            velocity.y = Math.max( 0, velocity.y );

        }

        yawObject.translateX( velocity.x );
        yawObject.translateY( velocity.y ); 
        yawObject.translateZ( velocity.z );

        if ( yawObject.position.y < 10 ) {

            velocity.y = 0;
            yawObject.position.y = 10;

            canJump = true;

        }

    };

};

Delving into this code to grasp its functionality, I've encountered a perplexing segment that has piqued my curiosity. It's this particular section:

(Line 169 of the aforementioned source)

if ( yawObject.position.y < 10 ) {
    velocity.y = 0;
    yawObject.position.y = 10;
    canJump = true;
}

The purpose of this code snippet eludes me. Removing it causes the player's camera to behave erratically, and altering the number does not seem to affect the outcome. My query is thus: What significance does this code hold, and how does modifying that number impact the behavior?

Answer №1

After some additional experimentation, I've come to the realization that this is actually just a mechanism to keep the player above the ground. The difference between 10 and 0 seemed insignificant at first, but it actually resulted in a slight adjustment in camera height (albeit barely noticeable). The seemingly swaying camera effect when the lines were deleted was just the terrain rushing by as you fell through the floor.

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

Discovering the art of incorporating various color palettes within a single stylesheet using HTML

I'm curious about incorporating multiple color schemes into a single stylesheet that can be activated by clicking, similar to the functionality found in platforms like WordPress and Magento. These platforms offer themes with various color options avai ...

An in-depth guide on implementing debounce functionality for `keyup` events in Vue.js

I am attempting to detect when the user begins typing and stops typing using the debounce function. I experimented with Lodash and Underscore.js. On my textArea v-on:keyup="handler($event)" handler: function(e) { ...

Storing data in Angular service for future use

My ui-grid is functioning correctly, utilizing server side pagination with a view button to display row details on a separate page. However, upon returning to the grid after viewing details, it defaults back to displaying the first page. I would like it to ...

Using React.PureComponent, the list component efficiently renders each item with optimized performance

We've developed a reusable list component in ReactJS. To address performance concerns, we decided to incorporate the shouldComponentUpdate method to dictate when our list component should re-render. public shouldComponentUpdate(nextProps: TreeItemInt ...

Is there a way to show the text within a div tag in a tooltip without relying on jQuery?

Is there a way to display the text content of an HTML element inside a tooltip? I am struggling to achieve this, as I would like to have the word test appear in the tooltip, but it's not working. Unfortunately, we are not using jQuery in our code bas ...

Vue's keydown event will only fire when elements are in an active state

Encountering a strange issue while attempting to listen for keydown events in Vue.js. The keydown event is attached to a div tag that surrounds the entire visible area: <template> <div class="layout-wrapper" @keydown="handleKey ...

Issue with ng-selected when used alongside ng-options or ng-repeat in Angular

My application features a form where users can fill out their starting point and choose from 350 possible destinations to get directions using Google Maps. Users can select their destination by either clicking on a pin on the map or choosing from a drop-do ...

Limiting the use of JavaScript widgets to specific domains

In the process of developing a webservice that offers Javascript widgets and Ajax calls limited to specific domains, I have explored various options. However, my research has led me to consider using a combination of HTTP-Referer and API Keys for access ...

Dealing with the Back Button Problem in History API and History.js

Using Ajax to load the page presents a challenge when the user clicks the back button. Here is the scenario: Initial page (index.php) is loaded User clicks on a link The new page loads successfully via Ajax User clicks the back button The initial page is ...

The modal box appears to be malfunctioning

I am attempting to open the abc.html file (located in the same directory) in a modal box. Here is the code I am using, however, it doesn't seem to be working. Any assistance would be greatly appreciated. <!DOCTYPE html> <html> <head ...

Oops! It seems like there was an issue trying to access a property that doesn't exist (specifically, the

Encountering an error on the HomeScreen of my project I aim to manipulate the state of my HomeScreen Page using redux. The data is fetched from an API (an array of items) and then displayed on the screen. However, despite all these processes, an error me ...

"Troubleshooting the ineffectiveness of JavaScript's

(After reviewing all questions and answers related to this issue, I have not found a solution that works for me.) Here is the code snippet in question: var timeoutHandle; function showLoader(show) { if (show) { $('.loader').html(&a ...

How to retrieve the value of an input field in Angular 2/Typescript without using ngModel

Currently, I'm utilizing Typescript in conjunction with Angular2, mirroring the structure of the Angular2 Tour of Heroes guide. There is a specific input field that I aim to associate a change event with, triggering custom logic whenever the value wi ...

What steps can I take to expand this on a grander level?

I have a code snippet for a personality quiz, but I'm facing an issue with increasing its size. Here's the HTML code: <h3>1. What is your favorite color?</h3> <input type="radio" name="q1" value="A" /> A. Red. <input type="r ...

Toggle the visibility of a component in React by managing its state

Currently, I am faced with the challenge of toggling the visibility of a component based on a state value: import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; import Button from ' ...

Vue table displaying a list of books with a button that allows users to easily send the title of the

Hey everyone, I am new to Vue and struggling with a certain task. I have two tables: Books and Booking. Books: ID, NAME, AUTHOR etc. Booking: ID, ID_USER, ID_BOOK I'm creating a page in Vue that displays all bookings, but the table only shows the BOO ...

Framework7 disables the jQuery.appear plugin

I am utilizing Framework7 and aiming to incorporate jQuery.appear for executing a script once an element becomes visible to the user. The implementation is successful when using this code in a basic HTML setup: <!DOCTYPE html> <html> < ...

Numerous operations included in a JavaScript document

Looking to enhance my JS file by adding multiple functions, but I'm having trouble as I'm not very familiar with JavaScript. Here's what I've got so far. $(function(){ $('.incentives').hide(); $('.incentives-click&a ...

Understanding how to use the 'this' variable in Vue components is essential for efficiently modifying DOM elements. Let's dive into a clarification on the usage of 'this'

Within my vue component, the structure is as follows: export default{ name: '', data: function () { return { var1 :{}, var2 : {}, ... } }, created: function () { this.methodName1() }, methods: { me ...

Retrieving over 300,000 rows from elasticsearch and saving them as a .csv document

Hi there, I am currently working on a website in nodejs that utilizes an Elasticsearch database. One of my indexes, 'bigData*', contains 366,844 rows with each row consisting of 25 items, each being a different string of varying sizes (with a max ...