Modifying default THREE fog

Resources
, ,
1

Haloo,

I decided to write up about a few hacks you can use to make the default three fog come to life~~ specifically adding support for dual color, noise, and movement.

Nothing crazy, but I think the setup is cool and maybe helpful for people playing with shaders in three.js :slight_smile:

article: https://medium.com/@snayss/three-js-fog-hacks-fc0b42f63386
live demo/code : threejs-fog-hacks - StackBlitz

<3 snayss

Screen Shot 2020-06-15 at 12.09.39 AM
Screen Shot 2020-06-15 at 12.09.39 AM1658×1174 78.7 KB

6 Likes
2

I really enjoy this, thanks!

1 Like
3

Nice demo and writeup!

By the way you can get rid of the hack. Replace this:


// HACK: Needed to make OBJLoader loader to work
// since it expect TREE as a global variable in a browser
if (typeof window !== "undefined") {
window.THREE = THREE;
} else {
global.THREE = THREE;
}

require("three/examples/js/loaders/OBJLoader");
require("three/examples/js/controls/FirstPersonControls");
require("three/examples/js/math/ImprovedNoise");

… with this:

import { ImprovedNoise } from "three/examples/jsm/math/ImprovedNoise";
import { FirstPersonControls } from "three/examples/jsm/controls/FirstPersonControls";
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
4 Likes
4

ohh awesome… much cleaner, thanks:)

1 Like