Limiting the maximum distance for orbit controls in THREE.js while targeting

In my 3rd person RPG style environment created in three.js, I am utilizing orbitControls to navigate. The controls effectively target the player object and allow me to rotate around her regardless of her position in the world.

However, I am facing a challenge with maintaining a constant zoom distance while in motion, especially when it is less than the maximum distance set by the maxDist value. Currently, the only workaround I have found is setting the min and max values to be the same. For example, if I set a high maxDistance value such as 5000, the player starts moving away from the camera once in motion until reaching the maxDist limit.

I am hoping to find a way to establish a secondary or temporary maxDist value, like 500, that adjusts dynamically as the player moves, yet still enables zooming out to the original maxDist of 5000 if needed. Has anyone encountered a similar issue or have any suggestions on how to achieve this?

Any insights would be greatly appreciated. Thank you.

Answer №1

Adjusting the .maxDistance on each iteration within your render loop is a common practice. Be sure to update the controls by calling controls.update() after making any modifications. Feel free to create a customized version of orbit controls that meets your specific requirements as well.

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

Inexperienced individual asks: 'Is it possible to accomplish this task using Dojo and Ajax?'

On my website, there is a feature that sends an initial request to a web service. Once this request is sent, the user has to wait for a specific amount of time before being able to send a second request. During this waiting period, I would like a countdo ...

What is the process for setting a default value in an array using Angular and then showcasing that value in a textbox?

I have been working on creating a form that includes a feature to dynamically append new rows. While I am able to successfully create new rows dynamically, I am facing an issue with displaying the initial values in my textboxes. Below is a snippet of my c ...

"The `Head.js` method called `.js()` allows for dynamic

Recently, I came across some code that was passed down to me from work, and it involves making an api call using head.js: head.js( { 'application' : 'someurl.com/foo.js' }); I'm curious if this actually registers the javascript a ...

Sort your Laravel pagination table effortlessly with just one click

Here is my current setup: <table class="table table-striped"> <tr> <th> Item Image </th> <th> Item Number </th> <th> Item Name </th> <th> Description </th> ...

Tips for implementing the JSON object table filter functionality

My website features a collection of json objects organized as shown below: [ { "a": true or false, "b": "information", "c": "information", "d": "information", "e": "information" }, ... ] The goal here ...

When using the * selector in jQuery on Chrome, it targets and selects scrollbars

Here's the code I'm currently using: $("*").bind("mousedown.sg", { 'self':this }, this.sgMousedown); This code binds an event listener to all elements on the page, and it functions properly in most browsers except for Chrome. In Chrom ...

Implementing hover effect triggered by keyboard input

Is there a way to create a hover effect on a div when a specific key is pressed on the keyboard using jQuery? <div id="d-up" class="button"></div> Appreciate any help with this! Thank you. ...

Shadows with pixel art style in Threejs

I developed an application where I dynamically created shelves. Everything is working fine except for the shadows. I'm not sure if the issue lies with the lighting or the objects themselves. Can anyone provide some assistance? Here is a snapshot showc ...

Unable to open file downloaded from Laravel with Vue.js support

I am facing an issue with my function in Laravel and vue.js. Even though it successfully downloads the desired file, when I try to open it, I consistently receive an error message stating that the file type is unsupported. Below is the vue.js function I a ...

Unable to open a modal in Angular UI after closing the initial modal

Hey there! I've been attempting to open a modal after closing the first one, but I'm encountering an issue where the second modal appears to be opened but is actually not. I'm struggling to understand what's causing this problem. Could ...

Why is the .html() method in jQuery 1.9 not functioning properly on a div element in Chrome? And why isn't

Here is the code snippet I am using: function updateList(searchStr){ $.ajax(getSearchURL(true) + searchStr).done(function(data) { $("#div_list").html($(data).find("#div_list").html()); }); }; This code updates the content of my div #div_ ...

Is there a way to determine if the browser window is currently in use?

The code I am currently working with looks like this: let focus; function setFocus() { focus = true; } function hideWindow() { focus = false; } window.onfocus = setFocus(); window.onblur = hideWindow(); The intention behind this code is to use it in the ...

Why do I receive the error message "Error: Objects are not valid as a React child (found: [object Promise])" in NextJS13?

I'm feeling overwhelmed by this issue and unsure of how to resolve it. Here is the code that is causing trouble: 'use client' import React, { useState } from 'react' import AnimatedDiv from '../../../(shop)/(components)/animat ...

"Can you explain the process by which React grabs the props using the code `const props = this.props

I recently came across an interesting article authored by Dan. The example provided in the article caught my attention: class ProfilePage extends React.Component { showMessage = (user) => { alert('Followed ' + user); }; handleClick ...

Arrangement of jQuery On Events and Triggers

Consider the code snippet below: $('body').on('hellothere', function(){ console.log('execution complete.'); }); $('body').triggerHandler('hellothere'); The abov ...

Displaying icon.png in Angular based on item attribute - a step-by-step guide

My data is stored in an array of objects with information about people: [{"name":"Steve", "hourly_wage":16, "status":"part-time"}, {"name":"Maria", "hourly_wage":25, "status":"full-time"}, {"name":"Jose", "hourly_wage":21, "status":"former"}] I am lookin ...

Error in Chrome Extension Data Type

I am having trouble adding a highlighted red button to YouTube. The code does not seem to be working as expected. manifest.json { "name": "Example", "version": "0.0", "manifest_version": 2, "c ...

Tips for resolving the error message "Cannot assign type 'string' to type '...' in NextJS"

In my nextjs-app, there is a Button component implemented as follows: interface IButton { text: string theme: 'primary' | 'secondary' size: 'small' | 'medium' | 'large' onClick?: () => void } ...

Retrieve items from the parent row of selected checkboxes

Within my table, I have the following row. <tr class="data_rows" ng-repeat='d in t2'> <td class="tds"> <input class='checkBoxInput' type='checkbox' onchange='keepCount(this)'></td> &l ...

Positioning with Bootstrap CSS libraries

The text next to the logo in the navbar isn't aligning properly (refer to this link for the page -> ). Furthermore, the logo isn't positioning correctly either, and this issue is present in all the navbar codes. I'm utilizing CSS bootstr ...