Maximum opacity in Three.js fog

My Current Endeavor:

I am in the process of developing a lightweight GIS application with topography. One feature I want to implement is atmosphere haze.

The Code I'm Working With:

(Please bear with me as I have multiple scenes)

  fogColor = new THREE.Color(0x7EC0EE);
  this.scenes[name].background = fogColor;
  this.scenes[name].fog = new THREE.Fog(fogColor, 250, 2000);
  //alternatively:
  this.scenes[name].fog = new THREE.FogExp2( fogColor, .001 )

Issue Faced:

While both Fog and FogExp2 are effective for close-to-ground scale units in my app, there is an obstacle when the camera moves higher above the ground and looks downwards. At some point, the earth appears completely blue due to being enveloped by the fog setting.

The Question at Hand:

Is there a method to set a maximum opacity for the fog?

I aim for the distant topography to remain hazy but not entirely cloaked in solid-colored fog. My initial thought was to determine the farthest object in view and adjust the fog setting whenever the camera position changes, though I'm uncertain if this approach is too complex. Ideally, I would like to calculate fog intensity based on the volume of "air" between the camera and objects, ensuring it never surpasses a certain level of opacity. Would a shader be a more efficient way to achieve this?

Answer №1

If you're looking to apply maximum opacity to fog, unfortunately there isn't a direct way to achieve that. However, you can adjust the parameters of the fog dynamically by altering the near and far values. Here's an example:

var origin = new THREE.Vector3(0, 0, 0);

update() {
    var dist = camera.position.distanceTo(origin);
    fog.far = 2000 + dist;
}

Depending on the units you are working with, you may need to fine-tune the calculation for dist. This method adjusts the fog based on your proximity to the reference point 0, 0, 0.

If using FogExp2, experiment with tweaking the .density property to achieve desired effects.

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

Updating the DOM after making changes with Maquette involves calling the `renderMaquette

In a previous discussion, I expressed my desire to utilize Maquette as a foundational hyperscript language. Consequently, avoiding the use of maquette.projector is essential for me. However, despite successfully appending SVG objects created with Maquette ...

Is there a way to utilize JSON data to dynamically fill column names in a JQuery datatable?

JSON Data: { "data": [ { "name": "Garrett Winters", "designation": "Accountant", "salary": "$170,750", }, { "name": "Brielle Williamson", "designation": "Integration Specialist", "salary": "$372,000", } ] } H ...

utilizing React.js, learn how to extract the most recent user input and store it within an array

My Input component generates input tags dynamically based on JSON data. I've implemented the onChange method in the input tag, which triggers a function called "handleChange" using contextAPI to record the values in another component. The issue aris ...

Obtain the selected dropdown value and transfer it to the controller seamlessly without the need to reload the page

Currently, I am facing an issue with two dropdown lists in a bootstrap modal - CATEGORY and SUBCATEGORY. The values in the SUBCATEGORY list depend on the selection made in the CATEGORY list. My goal is to retrieve the selected value ID and pass it to my co ...

Determine the name of the time zone using JavaScript

Currently, I am developing a React application and facing an issue where the timezone is detected as 'Etc/GMT-1' instead of the desired format 'Africa/Bangui'. This problem seems to be specific to my machine as it persists even when usi ...

Optimizing Shader Caching in WebGL: Best Practices

I am currently in the process of developing a WebGL application, and I have encountered some challenges with shader storage... In most examples, shaders are directly written in plaintext within the xHTML file itself. However, this approach can lead to clu ...

Leveraging document.getElementById alongside css modules

When trying to retrieve an element that is using a css module, I encountered a problem where the id of the element changes after rendering. As a result, document.getElementById("modal") returns null. import React from "react"; export const HandleClick = ...

Discovering the worth of objects in a MongoDB array - a guide

I need assistance to access the value of a nested object within an array. I have the _id of the parent object and the _id of the child object in the array, but I am struggling to get the value of "solvedOn" in order to toggle a checkbox behavior. Here is ...

Setting a checkbox to true within the MUI Data Grid using my input onChange event - how can I achieve this?

I am looking to highlight the selected row in my usage input onChange event. https://i.stack.imgur.com/rp9rW.png Details of Columns: const columns = [ { field: 'part_code', headerName: 'Part Code', width: 200 }, { ...

- "Utilizing the _underscore loop within a design framework"

I am encountering a persistent error while working on this. Specifically, I keep receiving an error related to syntax: syntax error var _p=[],print=function(){_p.push.a... ');}return __p.join(''); <script id="product" type="text/t ...

Having trouble with jQuery validation: Seeking clarification on the error

I have implemented some validations on a basic login page and added jQuery validation upon button click. However, the code is not functioning as expected. I have checked the console for errors but none were displayed. Here is the code for your review: ...

Error message encountered: 'OBJLoader' is not a valid export from package 'three' (imported as 'THREE')

When attempting to run the OBJLoader, I encountered an error: 'OBJLoader' is not exported from 'three' (imported as 'THREE'). import * as THREE from "three"; import OBJLoader from "three-obj-loader&quo ...

Using ESM imports in webpack configuration

I'm in the process of creating a webpack application and I am keen on utilizing ESM (ECMAScript Modules) throughout the entire project. This involves configuring the webpack.config file to allow for ESM imports. Previously, I knew that this could be ...

Submitting a form via NextJS to an internal API

After reading through the Next.JS documentation, I came across an interesting point. Note: Instead of using fetch() to call an API route in getStaticProps, it's recommended to directly import the logic from within your API route and make necessary cod ...

What are the methods to determine if vue-router is being utilized within the present Vue instance?

I am working on creating a library that includes a vue.js component with navigation elements. The goal is for this component to be flexible, able to function both with and without vue router. When used with the router, it will utilize <router-link> ...

Two interactive dropdown menus featuring custom data attributes, each influencing the options available in the other

Looking to create interactive select boxes based on the data attribute values? This is the code I currently have: HTML <select id="hours" onchange="giveSelection()"> <option value="somethingA" data-option="1">optionA</option> <o ...

The importance of .hash in this jquery function explained

I utilized a jQuery function from someone else and tweaked it to fit my needs, however, I am struggling to grasp how it actually operates. Specifically, the line var content = this.hash.replace('/', ''); Can anyone offer an explanation ...

Creating a Dynamic Dropdown Menu in Rails 4

I am attempting to create a dynamic selection menu following this tutorial; however, I am encountering issues as the select statement does not seem to be updating. Below is the code snippet I currently have: #characters_controller.rb def new ...

In ReactJS, ensure only a single div is active at any given moment

I'm working on a layout with three divs in each row, and there are multiple rows. Only one div can be selected at a time within a row, and selecting a new div will automatically unselect the previously selected one. Here is a simplified version of my ...

upright scrolling mouse slider

In my project, I have implemented a vertical slider with mousewheel control using SwiperJS from https://swiperjs.com/. Although the slider is working perfectly fine, I am looking to fix the positions while scrolling on the page similar to the example pro ...