How to tween/animate fog three.js

Question

So i am trying to change the fog density by tweening it is this possible because it doesn't seem to change here's my defaults:

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

and here is what I've tried using the libs 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;
                            
                        },
                    });

can anyone point me in the right direction?

Answer 1

This answer uses gsap

Use an object eg. myfog = { value: .5 } and tween its value property to what you desire.

Then in onUpdate , set scene.fog to a new THREE.FogExp2 with the current myfog.value as a parameter.

 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; // Init 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 mat = new THREE.MeshBasicMaterial({ color: 0xff0000 }); var mesh = new THREE.Mesh(geometry, mat); 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 animates the fog gsap.to(myfog, { duration: 2, value: 0.002, // The end value onUpdate: function() { // New fog with current myfog value scene.fog = new THREE.FogExp2(0x00ff00, myfog.value); }, // These just infinitely repeat the animation 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>