Home

Index

How to use the Fog function from three

Find comprehensive JavaScript three.Fog code examples handpicked from public code repositorys.

SceneManagerXR.js

170
171
172
173
174
175
176
177
178
const boardUid = useUiStore(state => state.boardUid)

const fog = useRef()
const getFog = () => {
  if (!fog.current) {
    fog.current = new THREE.Fog(world.backgroundColor, -10, world.fog.far)
  }
  return fog.current
}

263

index.js

GitHub: cryptoquick/voxel-engine

65
66
67
68
69
70
71
72
73
74
    32: 'wantsJump', //space
  }
}
this.playerControls = opts.controlLayout ? this.controlLayouts[opts.controlLayout] : this.controlLayouts.qwerty
if (!opts.controlsDisabled) this.bindControls(this.controls)
if (!opts.fogDisabled) this.scene.fog = new THREE.Fog( 0xffffff, 0.00025, this.worldWidth() )
this.moveToPosition(this.startingPosition)
this.collideVoxels = collisions(
  this.getTileAtIJK.bind(this),
  this.cubeSize,

226

+ 3 other calls in file

client.js

GitHub: TimothyStiles/meshdiff

13
14
15
16
17
18
19
20
21
22
      container = document.createElement( 'div' );
      document.body.appendChild( container );

// scene
      scene = new THREE.Scene();
      scene.fog = new THREE.Fog( 0x72645b, 2, 15 );

// camera
      camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 15 );
      camera.position.set( 3, 3, 3 );

091_snow_forest.js

GitHub: avin/sketches

211
212
213
214
215
216
217
218
219
220
controls.minDistance = 10;
controls.maxDistance = 40;

const scene = new THREE.Scene();

scene.fog = new THREE.Fog(0xffffff, 20, 50);

// ---------------------------------------------
// Свет
// ---------------------------------------------

_web3d.js

GitHub: truongvithien/threed

79
80
81
82
83
84
85
86
87
88
    var defaults = {
    }
    var settings = $.extend(defaults, options);
    scene = new THREE.Scene();
    scene.background = new THREE.Color().setHSL(0, 0, 0);
    scene.fog = new THREE.Fog(scene.background, 1, 5000);
},
setupRenderer: function(options) {
    var defaults = {
    }

+ 5 other calls in file

main.es6

GitHub: kevin-roark/martyr

78
79
80
81
82
83
84
85
86
  scene.addEventListener('update', function() {
    // here wanna apply new forces to objects and things based on state
    scene.simulate(undefined, 1);
  });

  scene.fog = new THREE.Fog(0x111111, 1, 600);

  return scene;
}

world.js

GitHub: exaquark/exaquark-vue

108
109
110
111
112
113
114
115
116
117
  }
}
this.changeUniverse = function (universe) {
  if (universe === 'SANDBOX_BLACK') {
    this.scene.background = new THREE.Color(0x000000)
    this.scene.fog = new THREE.Fog(0x000000, 0, 750)
  } else {
    this.scene.background = new THREE.Color(0xffffff)
    this.scene.fog = new THREE.Fog(0xffffff, 0, 750)
  }

+ 11 other calls in file

old.js

GitHub: jereddanielson/chaos-equations

369
370
371
372
373
374
375
376
377
378
);
camera.position.set(0, 0, 1);

scene = new THREE.Scene();
// scene.background = new THREE.Color(0x111213);
// scene.fog = new THREE.Fog(0x050505, 2000, 3500);

//

particles = ITERS * STEPS_PER_FRAME;

index.js

GitHub: onlymg/webgl-react

18
19
20
21
22
23
24
25
26
27
this.camera = new three.PerspectiveCamera(45, width / height, 1, 10000)
this.camera.position.set(-5, 5, 5)

// add the scene to render in
this.scene = new three.Scene()
// this.scene.fog = new three.Fog(0x333333, 5, 40)

// add light to scene
const light = new three.SpotLight(0xffffff, 1)
light.position.set(-50, 50, 0)

home.js

GitHub: Cherna/cherna.github.io

14
15
16
17
18
19
20
21
22
23
24
25
// INITIALIZATION FUNCTION


function init() {
  scene = new THREE.Scene();
  scene.background = new THREE.Color(0x59472b);
  scene.fog = new THREE.Fog( 0x59472b, 0, 40 );


  var winWidth = window.innerWidth;
  var winHeight = window.innerHeight;

home2.js

GitHub: Cherna/cherna.github.io

25
26
27
28
29
30
31
32
33
34
35
36
37


// INITIALIZATION FUNCTION


function init() {
  scene = new THREE.Scene();
  scene.fog = new THREE.Fog(0xddeeff, 0, 38);


  var winWidth = window.innerWidth;
  var winHeight = window.innerHeight;

renderer.js

GitHub: akosblazsik/microbit-vrobot

30
31
32
33
34
35
36
37
38
39
camera.position.set(-5, 3, 10);
camera.lookAt(new THREE.Vector3(0, 2, 0));

scene = new THREE.Scene();
scene.background = new THREE.Color(0xe0e0e0);
scene.fog = new THREE.Fog(0xe0e0e0, 20, 100);

clock = new THREE.Clock();

// lights

index.js

GitHub: IoannisMorakis/LoadModels-FireworksParticle

73
74
75
76
77
78
79
80
81
82
	colorg: "#111122", 
};

renderer = new THREE.WebGLRenderer({ canvas });
scene = new THREE.Scene();
   // scene.fog = new THREE.Fog( 0x443333, 1, 4 );

const fov = 35;
const aspect =  window.innerWidth/ window.innerHeight;  // the canvas default
const near = 0.1;

+ 6 other calls in file

main.es6

GitHub: kevin-roark/rayne

69
70
71
72
73
74
75
76
77
  scene.addEventListener('update', function() {
    // here wanna apply new forces to objects and things based on state
    scene.simulate(undefined, 1);
  });

  scene.fog = new THREE.Fog(0x111111, 1, 400);

  return scene;
}

Other functions in three

Sorted by popularity

three.Vector3 is the most popular function in three (22341 examples)

Other popular packages:

Home

About