The Three.js Environment Experiencing Intense Tremors

Currently, I am immersed in a project that requires handling very large and very small distances utilizing three.js.

Encountering an issue on the smaller side of the scene where the 'scene' begins to shake uncontrollably.

Initially, I suspected a problem with the Z-Buffer. To address this, I created a code snippet that adjusts the near and far camera properties each time a new area is entered. While this resolved the previous 'shimmering' problems, the intense shaking persists at close ranges.

An instance triggering this effect is as follows:

camera.near = .0133333
camera.far = 12
positionToObjects = 6

This should result in a z-resolution around: .0001, which seems adequate. However, the ensuing shaking is far more severe than anticipated.

The object positions span from -200000 to 200000 globally, while the scenes themselves remain stationary.

Another potential culprit I considered is the camera controls implemented, summarized below:

if(mouseIsDown == true){
    if(this.movementSpeed < this.maxSpeed){
        this.movementSpeed += this.acceleration
    }else{
        this.movementSpeed = this.maxSpeed
    }

}else{
    if(this.movementSpeed > this.minSpeed){
        this.movementSpeed = this.movementSpeed/this.deceleration
    }else{
        this.movementSpeed = this.minSpeed  
    }

}

With this.minSpeed set to 0, movement is achieved using this.movementSpeed following this pattern:

var actualSpeed = delta * this.movementSpeed;
this.object.translateZ( -actualSpeed * forwardOrAuto );
this.object.translateX( actualSpeed * sideSpeed );
this.object.translateY( actualSpeed * upSpeed );

Even when the camera remains static (up to 8 decimal places), the scene continues to shake vigorously.

Could there be factors eluding my consideration causing this behavior? Your insights would be greatly appreciated, and feel free to request additional information if needed. Thank you for your attention.

Answer №1

If you're experiencing violent movements, consider adjusting the values for near and far to be larger rather than small. Using a smaller number (<1) for near can result in loss of precision due to the reduced range of values being manipulated compared to using larger near and far values.

The default value for near is set at 0.1, as shown here: https://github.com/mrdoob/three.js/blob/r55/src/cameras/PerspectiveCamera.js#L13. However, some prefer to use 1 for near.

When seeking visual assistance, providing an online example can be beneficial for clarity.

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

error encountered in NestJS: unable to modify headers once they have been sent

request /login/login.html redirect /login I made a change to the redirect within the interceptor export class UricheckInterceptor implements NestInterceptor { constructor(private uri: string[]) {} intercept(context: ExecutionContext, next: CallHa ...

When Vue detects a change in declared parameters from an empty string, it automatically sends a

Within my application, I am making a request to the backend app and receiving a response with an ID such as { 'id': '12345'}. This ID is then saved as loadId within the data object: export default { name: 'SyncProducts', d ...

How can Swiper efficiently display the next set of x slides?

After exploring SwiperJS at https://swiperjs.com/, I've been unable to locate an option that allows the slide to return immediately to the right once it goes out of view on the left. The current behavior poses a problem where there is no next slide o ...

What is the suitable condition necessary for optimal functionality?

Greetings all! I am a newbie in the world of development and also new to Stack Overflow. This is my maiden post seeking assistance on the following issue: $(document).ready(function() { $(".header").click(function() { if ($(".header-content"). ...

What is the best way to organize a massive file over 10Gb filled with words?

I've been presented with this interview query: You have an input file containing words (which could be a jumble of letters) separated by commas, and the file size is 10 GB or more. Can you devise an algorithm to sort all these words? Keep in min ...

Transform an array of arrays object with multiple depths into an array of objects

Having some difficulty with the conversion of an array of arrays-like object into an array of objects. The reduce method is being used, and it successfully converts the array data to an object for the first set of arrays. However, on the second iteration, ...

A standard procedure for evaluating an application using JavaScript on the client side

I am looking to streamline E2E testing for a web application. The frontend of the app is built on a JavaScript framework, while the backend uses Java technology. While I am aware of the tools and frameworks available for JavaScript testing, I am curious ...

What is the best way to extract a single-word object from an array without any special characters?

Is there a way to extract a list of single words from wordnet without any special characters included? I'm attempting to achieve something like this: const wordnet = require('wordnet') await wordnet.init(); let results = await wordnet.lis ...

Guide on utilizing the eval() function to assign a value to a field passed as a parameter

I am interested in achieving the following: function modifyField(fieldName){ eval(fieldName) = 1234; } In simpler terms, I want to pass a specific field name as a parameter and then assign a value to that field. Can someone guide me on how to accomp ...

Executing a console.log statement within an array nested inside a function of an object

Today in school, I learned about objects and how a function inside an object is actually called a method. In my method, I have an array and I'm trying to change a global variable to display a different location in the console.log. However, all I keep ...

The utilization of Node.js promises combined with a for loop

I have managed to make progress, but I seem to be stuck once again. The issue lies with my for loops not functioning as expected. When there are three roles, only the last one is being added (three times) to my pivot MySQL table due to its asynchronous na ...

Adjusting Google Maps API v3 Autocomplete dropdown width with JavaScript and SASS to match input field dimensions

I am facing an issue where the autocomplete dropdown (div with class "pac-container") is consistently 4 pixels shy of aligning perfectly with the right side of the input field. It looks like this: https://i.sstatic.net/Y0oq1.png Below is the HTML code: ...

The problem with the CSS Grid effect

Looking for assistance in creating a grid layout similar to the one on this website: Upon inspecting the page source, I found the following code snippet: http://jsfiddle.net/o45LLsxd/ <div ng-view="" class="ng-scope"><div class="biogrid ng-scope ...

The error encountered in the Node crud app states that the function console.log is not recognized as a

I am attempting to develop a CRUD application, however, I keep encountering an error message that states "TypeError: console.log is not a function" at Query. (C:\Users\Luis Hernandez\Desktop\gaming-crud\server\app.js:30:25) h ...

typescript - instantiate an object using values stored in an array

Assume we have a model defined as follows. export interface Basicdata { materialnumber: number; type: string; materialclass: string; } We also have an array containing values that correspond directly to the Basicdata model in order, like this: ...

What could be the reason for meteor not injecting the text from my template helpers?

My goal is to dynamically generate a table displaying two different sets of data. Despite having verified returns from my database, the rendered page does not show the corresponding HTML elements as expected. Here is the template and HTML code: <templ ...

I am having trouble retrieving the properties of "2d" objects using tiles[i-1], unlike standard objects in JavaScript

I've been working on constructing a random map generator by utilizing a grid composed of tiles within a canvas. In my process, I'm investigating the properties of each tile tiles[i] before handling tiles[i-1]. While this procedure seems to functi ...

Modify the length of an array using a number input field

Currently, I am working with an array that contains objects and I want to dynamically change the number of objects in this array based on user input from a number type input box. Whenever the number in the input box is increased, I need to increase the len ...

Leveraging the .reduce method to perform specific calculations and generate an object containing the results of an array

After successfully achieving the desired results, here is the data manipulation I have done: const days = [ { date: '2016-12-13T00:00:00.000Z', stats: [ { name: 'Soft Drinks', sold: 34, }, { name: 'Snacks&apo ...

What is the best way to navigate between different areas of an image using html and javascript?

I am currently in the process of learning how to develop mobile applications, and I am still in the early stages. Although this question is not directly related to mobile development, it pertains more to html/css/js. My goal is to create a simple game wh ...