Home

Index

How to use the HemisphereLight function from three

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

three.HemisphereLight is a class in the Three.js library that creates a hemisphere light source.

main.js

97
98
99
100
101
102
103
104
105
106

// planet
createLevel();

// lighting
hemisphereLight = new THREE.HemisphereLight('#004570', someColors['pink'], 0.8);

shadowLight = new THREE.DirectionalLight('#4ECDC4', 0.3);

shadowLight.castShadow = true;

+ 15 other calls in file

index.js

GitHub: avin/generative

156
157
158
159
160
161
162
163
164
165
// ---------------------------------------------
// Свет
// ---------------------------------------------

const whiteColor = 0xffffff;
const lightMain = new THREE.HemisphereLight(whiteColor, 0xffffff, 0.42);
scene.add(lightMain);

const lightDir1 = new THREE.SpotLight(whiteColor, 0.98251, 30, Math.PI / 4, 2, 2);
lightDir1.position.set(5, 7, 5);

+ 5 other calls in file

How does three.HemisphereLight work?

HemisphereLight is a type of light in the Three.js library that creates a gradient of light on the objects in the scene based on their orientation to the light source, with one hemisphere of the scene receiving indirect lighting and the other hemisphere receiving direct lighting, and it takes parameters for color, ground color, and intensity. When rendered, the hemisphere light is visible only in objects whose material is set to MeshStandardMaterial or any other material that is capable of handling physically based lighting.

main.js

GitHub: mattdesl/filmic-gl

14
15
16
17
18
19
20
21
22
23
var point = new THREE.PointLight(0xaf581e, 1.0, 1000);
point.position.x = -5;
point.position.y = 80;
scene.add(point);

var hemi = new THREE.HemisphereLight(0x5babc2, 0x8d5f2e, 1);

var dir = new THREE.DirectionalLight(0x5babc2, 0.5);
dir.position.y = 50;
dir.position.x = 10;

client.js

GitHub: TimothyStiles/meshdiff

21
22
23
24
25
26
27
28
29
30
camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 15 );
camera.position.set( 3, 3, 3 );
cameraTarget = new THREE.Vector3( 0, -0.25, 0 );

// Lights
scene.add( new THREE.HemisphereLight( 0x443333, 0x111122 ) );
addShadowedLight( 0.5, 1, -1, 0xffff99, 1 );

// renderer
renderer = new THREE.WebGLRenderer( { antialias: true } );

Ai Example

1
2
3
4
5
6
7
8
// create a HemisphereLight with a sky color and a ground color
const hemiLight = new THREE.HemisphereLight(0xffffff, 0x003366, 1);

// set the position of the light
hemiLight.position.set(0, 10, 0);

// add the light to the scene
scene.add(hemiLight);

In this example, a HemisphereLight is created with a sky color of 0xffffff (white) and a ground color of 0x003366 (dark blue). The intensity property is set to 1, which controls the brightness of the light. The position of the light is set to (0, 10, 0) which means it will shine down from above. Finally, the light is added to the scene.

renderer.js

GitHub: StaticFX/3DModels-To-GIF

43
44
45
46
47
48
49
50
51
52
		Renderer.BASE_FAR_PLANE,
	);
	// this.#camera.position.z = 20;

	this.#scene.add(new THREE.AmbientLight(0xffffff, 0.4));
	this.#scene.add(new THREE.HemisphereLight(0xffffff, 0.2));

	this.#scene.add(this.#parent);
	this.#scene.add(this.#camera);
}

gas.js

GitHub: 0xFlicker/onchaingas

49
50
51
52
53
54
55
56
57
58
  if (event.isPrimary) pointerY = event.clientY - halfInnerHeight;
}

const scene = new THREE.Scene();
scene.background = new THREE.Color(0);
const light = new THREE.HemisphereLight(16777147, 526368, 1);
scene.add(light);
const positionLight = new THREE.PointLight(16777147, 1, 1e3, 0);
positionLight.position.set(0, 0, 150);
positionLight.lookAt(0, 0, 0);

index.js

GitHub: andrenanninga/tomb-raider

37
38
39
40
41
42
43
44
45
46
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
document.body.appendChild(stats.domElement);

var light = new THREE.HemisphereLight(0xffffff, 0xffffff, 0.5);
scene.add(light);

var light = new THREE.PointLight(0xffffff, 0.5);
light.shadowCameraFov = THREE.VIEW_ANGLE;

+ 5 other calls in file

TestScene.js

GitHub: sneha-belkhale/street-rat

57
58
59
60
61
62
63
64
65
66
  const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
  const cube = new THREE.Mesh(geometry, material);

  this.scene.add(cube);

  // const light = new THREE.HemisphereLight(0x3e52b7, 0x8e3109, 0.1);
  // this.scene.add(light);

  this.loadGLTFScene();
}

_web3d.js

GitHub: truongvithien/threed

358
359
360
361
362
363
364
365
366
367
    );
    scene.add(light_top);
}

if (settings.hemisphere_light.enable) {
    light_hemi = new THREE.HemisphereLight(0xffffff, 0xffffff, 0.6);
    light_hemi.color.setHSL(0.6, 1, 0.6);
    light_hemi.groundColor.setHSL(0.095, 1, 0.75);
    light_hemi.position.set(0, 50, 0);
    scene.add(light_hemi);

+ 5 other calls in file

webgl_main.js

GitHub: utunga/deeppbr.ai

138
139
140
141
142
143
144
145
146
147
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.01, 1000 );
camera.position.z = 2;
camera.rotation.x = Math.PI / 0.5
controls = new THREE.OrbitControls( camera, renderer.domElement );

//scene.add( new THREE.HemisphereLight( 0x443333, 0x222233, 4 ) );
pointLight = new THREE.PointLight( 0xffffff, settings.lampBright, 0 );
pointLight.position.set(0,0,4);
pointLight.castShadow = true;
pointLight.shadowCameraVisible = true;

+ 3 other calls in file

world.js

GitHub: exaquark/exaquark-vue

194
195
196
197
198
199
200
201
202
203
// set a background
instance.scene.background = new THREE.Color(0xffffff)
instance.scene.fog = new THREE.Fog(0xffffff, 0, 750)

// add some light
let light = new THREE.HemisphereLight(0xeeeeff, 0x777788, 0.75)
light.position.set(0.5, 1, 0.75)
instance.scene.add(light)

// create a floor

+ 3 other calls in file

index.js

GitHub: nopenoway0/kcd_customizer

87
88
89
90
91
92
93
94
95
96
97
98
};


// start initialization for rendering
function init(){
	// create basics for scene
	var light = new THREE.HemisphereLight(0xffffbb, 0x080820, 3);
	var camera = new THREE.PerspectiveCamera( 1, window.innerWidth/window.innerHeight, 0.1, 1000 );


	var renderer = new THREE.WebGLRenderer();
	renderer.setSize( window.innerWidth, window.innerHeight);

+ 2 other calls in file

blueprint3d.js

GitHub: 2022-SMHRD-IS-AI1/MyPlace

13496
13497
13498
13499
13500
13501
13502
13503
13504
13505
this.getDirLight = function() {
  return dirLight;
}

function init() {
  var light = new THREE.HemisphereLight( 0xffffff, 0x888888, 1.1 );
  light.position.set(0, height, 0);
  scene.add(light);

  dirLight = new THREE.DirectionalLight( 0xffffff, 0 );

+ 13 other calls in file

index.js

GitHub: IoannisMorakis/LoadModels-FireworksParticle

84
85
86
87
88
89
90
91
92
93
94
	camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
	
	//Lights
	// spotLight = new THREE.SpotLight( 0xffff00 );
	light = new THREE.AmbientLight( obj.color0 ); // soft white light
	hemisLight = new THREE.HemisphereLight( obj.color0, obj.colorg, 1 );
	


	stats = new Stats();
}

+ 6 other calls in file

viewer.js

GitHub: MichaelPolla/mip-viewer

429
430
431
432
433
434
435
436
437
438

addLights() {
  const state = this.state;

  if (this.options.preset === Preset.ASSET_GENERATOR) {
    const hemiLight = new THREE.HemisphereLight();
    hemiLight.name = 'hemi_light';
    this.scene.add(hemiLight);
    this.lights.push(hemiLight);
    return;

+ 5 other calls in file

renderer.js

GitHub: akosblazsik/microbit-vrobot

36
37
38
39
40
41
42
43
44
45

clock = new THREE.Clock();

// lights

var light = new THREE.HemisphereLight(0xffffff, 0x444444);
light.position.set(0, 20, 0);
scene.add(light);

light = new THREE.DirectionalLight(0xffffff);

App.js

GitHub: jacaryr/sillyphysics

692
693
694
695
696
697
698
699
700
701
// light.position.set(.0, 1000000.0, 1000000.0);
// scene.add(light);
// var light = new THREE.PointLight(32,255,1000000,100);
// light.position.set(-1000000.0, -1000000.0, 1000000.0);
// scene.add(light);
// var light = new THREE.HemisphereLight(55, 255, 55);
// light.position.set(1, 1, 1);
// light.decay = 0;
// scene.add(light);
// var light = new THREE.HemisphereLight(255, 55, 55);

+ 7 other calls in file

index.js

GitHub: mashakereb/Univ-Programming

39
40
41
42
43
44
45
46
47
48
});

this.sphereMesh = new THREE.Mesh(sphereGeom, material);


let hemiLight = new THREE.HemisphereLight(0xddeeff, 0x0f0e0d, 0.2);

this.scene.add(hemiLight);

let bulbGeometry = new THREE.SphereGeometry(0.02, 16, 8);

final.js

GitHub: captDaylight/sugar

111
112
113
114
115
116
117
118
119
120

scene = new THREE.Scene();
sceneCube = new THREE.Scene();
projector = new THREE.Projector();
        
var hemiLight1 = new THREE.HemisphereLight( 0xffffff, 0xffffff, 1 );

hemiLight1.color.setHSL( 0.6, 1, 0.6 );
hemiLight1.groundColor.setHSL( .01, 0, 0.2 );
hemiLight1.position.set( 0, 500, 0 );

scene.es6

GitHub: kevin-roark/second-shane

209
210
211
212
213
214
215
216
217
218
}

/// PART 1

makeLights() {
  this.hemiLight = new THREE.HemisphereLight(0xffffff, 0xffffff, 0.8);
  this.hemiLight.color.setHSL(0.6, 1, 0.6);
  this.hemiLight.groundColor.setHSL( 0.095, 1, 0.75 );
  this.hemiLight.position.set( 0, 500, 0 );
  this.scene.add(this.hemiLight);

Other functions in three

Sorted by popularity

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

Other popular packages:

Home

About