Guide to creating fog animations in three.js

Question

Guide to creating fog animations in three.js

I'm attempting to adjust the fog density using tweening, but for some reason, it doesn't seem to be working. Here are my default settings:

var camera, densityFog, colorFog2;
                    colorFog2 = 0xfee2ed;
                    densityFog = 0.25;
                    scene.fog = new THREE.FogExp2(colorFog2, densityFog);

Here is my attempt using GSAP and tweenjs:

tween = new TWEEN.Tween(scene.fog)
                .to({densityFog: 0.02}, 1000 )
                .easing(TWEEN.Easing.Exponential.InOut)
                .onComplete(function() { }).start();
                    
                gsap.to(scene.fog, {
                        duration: 2,
                        densityFog: 0.02,
                        onUpdate: function () {
                            controls.update();
                            isZoomed = 0;
                            controls.enabled = false;
                            
                        },
                    });

Could someone provide some guidance on how to achieve this?

javascript three.js gsap tween.js

Answer 1

Answer №1

This solution utilizes the gsap library

Create an object like myfog = { value: .5 } and animate its value property to achieve your desired effect.

Then, within the onUpdate function, update the scene.fog to a new THREE.FogExp2 instance with the current value of myfog.value.

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
camera.position.y = 2;

// Initialize the object and fog here
var myfog = { value: .5 }
scene.fog = new THREE.FogExp2(0x00ff00, myfog.value);

var geometry = new THREE.BoxGeometry(1, 1, 5);
var material = new THREE.MeshBasicMaterial({
  color: 0xff0000
});
var mesh = new THREE.Mesh(geometry, material);

scene.add(mesh);

var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x00ff00);
document.body.appendChild(renderer.domElement);

function render() {
  renderer.render(scene, camera);
}

function animate() {
  requestAnimationFrame(animate);
  render();
}

animate();

// This part animates the fog
gsap.to(myfog, {
  duration: 2,
  value: 0.002, // The end value
  onUpdate: function() {
    // Update fog with current myfog value
    scene.fog = new THREE.FogExp2(0x00ff00, myfog.value);
  },
  // Set animation to yoyo and repeat infinitely
  yoyo: true,
  repeat: -1,
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r127/three.min.js"></script>

Answer 2

This solution utilizes the gsap library

Create an object like myfog = { value: .5 } and animate its value property to achieve your desired effect.

Then, within the onUpdate function, update the scene.fog to a new THREE.FogExp2 instance with the current value of myfog.value.

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
camera.position.y = 2;

// Initialize the object and fog here
var myfog = { value: .5 }
scene.fog = new THREE.FogExp2(0x00ff00, myfog.value);

var geometry = new THREE.BoxGeometry(1, 1, 5);
var material = new THREE.MeshBasicMaterial({
  color: 0xff0000
});
var mesh = new THREE.Mesh(geometry, material);

scene.add(mesh);

var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x00ff00);
document.body.appendChild(renderer.domElement);

function render() {
  renderer.render(scene, camera);
}

function animate() {
  requestAnimationFrame(animate);
  render();
}

animate();

// This part animates the fog
gsap.to(myfog, {
  duration: 2,
  value: 0.002, // The end value
  onUpdate: function() {
    // Update fog with current myfog value
    scene.fog = new THREE.FogExp2(0x00ff00, myfog.value);
  },
  // Set animation to yoyo and repeat infinitely
  yoyo: true,
  repeat: -1,
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r127/three.min.js"></script>

Guide to creating fog animations in three.js

Answer №1

Similar questions

Tips for inserting a DIV and SCRIPT from a single HTML template into a webpage

Implementing a click event on a selection option – tips and tricks

What is the best way to retrieve the element at the current cursor position inside an iframe

Break down and extract elements using typedEvent in TypeScript

How can you retrieve the X.509 Certificate from a P12 file using Node JS?

Refresh the page without reloading to update the value of a dynamically created object

Troubleshooting server-side sorting issues with AJAX implementation, encountering problems with headers functionality

I'm having trouble with my AngularJS Spinner directive

Creating a new line in the content of a MatDialog in Angular 7

Raycasting in Three.js without using a camera

Rearrange list items by dragging and dropping

Steps for iterating through an array within an object

The hovering event trail feature is not functioning in tsParticles, unlike in particlejs

Is there a way to prevent pixels from being rendered outside of a designated rectangle in HTML5?

Creating a Client-side Web Application with Node.js

Can webpack effectively operate in both the frontend and backend environments?

Using Vue.js to bind data in two directions by using an object with v-for

Issue with React Hot Toast not displaying properly due to being positioned behind the <dialog>

Is it possible to turn off Angular CLI ng build linting for a specific directory?

Tips for crafting services using $q and $http requests while avoiding redundancy