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.
GitHub: kentywang/Agamari
![kentywang profile picture](/kentywang.png?size=40)
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
GitHub: avin/generative
![avin profile picture](/avin.png?size=40)
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.
GitHub: mattdesl/filmic-gl
![mattdesl profile picture](/mattdesl.png?size=40)
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;
GitHub: TimothyStiles/meshdiff
![TimothyStiles profile picture](/TimothyStiles.png?size=40)
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.
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); }
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);
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
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(); }
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
GitHub: utunga/deeppbr.ai
![utunga profile picture](/utunga.png?size=40)
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
GitHub: exaquark/exaquark-vue
![exaquark profile picture](/exaquark.png?size=40)
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
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
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
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
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
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);
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
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);
GitHub: captDaylight/sugar
![captDaylight profile picture](/captDaylight.png?size=40)
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 );
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);
three.Vector3 is the most popular function in three (22341 examples)