Home

Index

How to use the AmbientLight function from three

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

THREE.AmbientLight is a class in the Three.js library that creates an ambient light source that illuminates all objects in a scene evenly.

Scene.js

562
563
564
565
566
567
568
569
570
571
    key: 0.4,
    head: 0.15,
    fill: 0.15,
    back: 0.1,
};
const ambientLight = new THREE.AmbientLight(0xffffff);
const grids = {
    planes: {},
    labelsOnEdges: {},
};

116

804

main.js

GitHub: wkentaro/morefusion

17
18
19
20
21
22
23
24
25
26
var div = document.getElementById("reconstruction-robotic-top-down")

var camera = new THREE.PerspectiveCamera(30, 640 / 480, 0.01, 1000);
robotic_top_down.resetCamera();

var ambientLight = new THREE.AmbientLight(0xffffff, 1.5);
scene.add(ambientLight);

// var pointLight = new THREE.PointLight(0xffffff, 1.5);
// camera.add( pointLight );

209

How does three.AmbientLight work?

THREE.AmbientLight is a class in the Three.js library that is used to create an ambient light source, which illuminates all objects in a scene evenly. When an AmbientLight is added to a scene, it does not cast any shadows, and its light intensity does not vary based on its distance to an object. Instead, the AmbientLight creates a uniform illumination throughout the scene, simulating a natural environment without any direct sources of light. To create an AmbientLight object in Three.js, you simply need to instantiate the THREE.AmbientLight class and set the light color and intensity: javascript Copy code {{{{{{{ const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); // color, intensity scene.add(ambientLight); In this example, we create a new AmbientLight with a white color and an intensity of 0.5. We then add the AmbientLight to the scene object to make it visible in the scene. AmbientLight objects can be combined with other light sources, such as directional lights or point lights, to create more complex lighting effects in a Three.js scene.

chemview.js

GitHub: gabrielelanaro/chemview

55
56
57
58
59
60
61
62
63
64
directionalLight1.position.set(0.2, 0.2, -1).normalize();

var directionalLight2 = new THREE.DirectionalLight(0xFFFFFF, 1.2);
directionalLight2.position.set(0.2, 0.2, 1).normalize();

var ambientLight = new THREE.AmbientLight(0x202020);

this.scene.add(directionalLight1);
this.scene.add(directionalLight2);
this.scene.add(ambientLight);

+ 20 other calls in file

main.js

GitHub: kentywang/Agamari

116
117
118
119
120
121
122
123
124
shadowLight.shadow.mapSize.height = 512;

scene.add(hemisphereLight);
scene.add(shadowLight);

ambientLight = new THREE.AmbientLight(someColors['green'], 0.5);
scene.add(ambientLight);

loadGame();

+ 15 other calls in file

Ai Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// Create a new Three.js scene
const scene = new THREE.Scene();

// Create a new camera and add it to the scene
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
scene.add(camera);

// Create a new renderer and add it to the page
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Create an AmbientLight and add it to the scene
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); // color, intensity
scene.add(ambientLight);

// Create a cube and add it to the scene
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// Move the camera back from the cube
camera.position.z = 5;

// Render the scene
renderer.render(scene, camera);

In this example, we create a new Three.js scene and add a camera and renderer to it. We then create a new AmbientLight with a white color and an intensity of 0.5, and add it to the scene using the add method. After that, we create a green cube and add it to the scene, and move the camera back so that the cube is visible. Finally, we call the render method on the renderer object to render the scene. The AmbientLight we added to the scene illuminates the cube with a soft, uniform light, while the green color of the cube remains visible.

THREEUtil.js

GitHub: VCityTeam/UD-Viz

112
113
114
115
116
117
118
119
120
121
  directionalLight.position.set(100, 100, 500);
  directionalLight.target.position.set(0, 0, 0);
  directionalLight.updateMatrixWorld();
  scene.add(directionalLight);

  const ambientLight = new THREE.AmbientLight(0xffffff, 0.3);
  scene.add(ambientLight);

  return { directionalLight: directionalLight, ambientLight: ambientLight };
},

+ 4 other calls in file

render.js

GitHub: hobuinc/usgs-lidar

1174
1175
1176
1177
1178
1179
1180
1181
1182
1183

// world
scene = new THREE.Scene();

// ambiently light our scale objects
var l = new THREE.AmbientLight(0xffffff);
scene.add(l);

renderer = new THREE.WebGLRenderer( { antialias: false } );
renderer.setSize(w, h);

110

index.js

GitHub: ASSERT-KTH/ci-hackathon

60
61
62
63
64
65
66
67
68
    scene.add( cube );
}


function addAmbienLigth(){
    //var light = new THREE.AmbientLight( 0xffffff ); // soft white light
    var light = new THREE.AmbientLight( 0x222222 ); // soft white light
    scene.add( light );
}

+ 5 other calls in file

example.js

GitHub: dividab/three-x3d-loader

20
21
22
23
24
25
26
27
28
29
if (httpRequest.status === 200) {
    var xmlText = httpRequest.responseText;

    var loader = new THREE.X3DLoader();
    const scene = loader.parse(xmlText);
    var light = new THREE.AmbientLight( 0x404040 ); // soft white light
    scene.add( light );
    renderer.render(scene, camera);
} else {
    alert('There was a problem with the request.');

client.js

GitHub: anthill/city-core

65
66
67
68
69
70
71
72
73
74
controlsButton.addEventListener('click', toggleControls);


// Add event listeners
lightButton.addEventListener('click', function(){
    var greenLight = new THREE.AmbientLight("#004400"); 
    bordeaux3D.addLight(greenLight);
});

meshButton.addEventListener('click', function(){

spotlightview_new.js

GitHub: audunsh/evince

3393
3394
3395
3396
3397
3398
3399
3400
3401
3402





let light = new THREE.AmbientLight( 0xffffff, 0.5 ); // soft white light
this.scene.add( light );

const directionalLight = new THREE.DirectionalLight( 0xffffff, .5 );
directionalLight.position.set( 1, 1, 1 );

+ 17 other calls in file

latticeview.js

GitHub: audunsh/evince

306
307
308
309
310
311
312
313
314
315





let light = new THREE.AmbientLight( 0x202020, 5 ); // soft white light
this.scene.add( light );

const directionalLight = new THREE.DirectionalLight( 0xffffff, .5 );
directionalLight.position.set( 1, 1, 1 );

denseview.js

GitHub: audunsh/evince

177
178
179
180
181
182
183
184
185
/*
let directionalLight = new THREE.DirectionalLight( 0x555555, .5 );
directionalLight.position.set( 1, 1, 1 );
this.scene.add( directionalLight );

let alight = new THREE.AmbientLight( 0x202020, .1 ); // soft white light
this.scene.add( alight );
*/

+ 2 other calls in file

morpheusview.js

GitHub: audunsh/evince

147
148
149
150
151
152
153
154
155

let directionalLight = new THREE.DirectionalLight( 0xffffff, .5 );
directionalLight.position.set( 1, 1, 1 );
this.scene.add( directionalLight );

//let alight = new THREE.AmbientLight( 0x202020, 5 ); // soft white light
//this.scene.add( alight );

pyramid-game-lib.cjs.prod.js

GitHub: tcool86/pyramid-game-lib

468
469
470
471
472
473
474
475
476
477
  });
  this.renderer.setSize(screenResolution.x, screenResolution.y);
  this.composer = new EffectComposer.EffectComposer(this.renderer);
}
setupLighting(scene) {
  const ambientLight = new THREE.AmbientLight(0xffffff, 0.8);
  scene.add(ambientLight);
  const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
  directionalLight.name = 'Light';
  directionalLight.position.set(0, 100, 0);

+ 12 other calls in file

scenes.js

GitHub: gracexu94/FinalProject

144
145
146
147
148
149
150
151
152
153
camera.position.set(5, 5, 5);
camera.lookAt(new THREE.Vector3(0,0,0));

var scene = new THREE.Scene();
scene.background = new THREE.Color( 'whitesmoke' );
scene.add(new THREE.AmbientLight(0x333333));

var controls = new OrbitControls(camera, framework.renderer.domElement);
controls.enableDamping = true;
controls.enableZoom = true;

+ 11 other calls in file

index.jsx

GitHub: scottlawsonbc/stldiff

9
10
11
12
13
14
15
16
17
18
const loader = new STLLoader();
const camera = new THREE.PerspectiveCamera(75, 1, 0.1, 2000);
const controls = new OrbitControls(camera, renderer.domElement);

function initLight() {
    const ambientLight = new THREE.AmbientLight(0xb2b2b2);
    scene.add(ambientLight);

    const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
    directionalLight.position.x = 1;

ThreeFactory.js

GitHub: zhouzhili/webGL-webGIS-Learning

130
131
132
133
134
135
136
137
138
139
/**
 * return {SpotLight}
 */
initLight() {
  // 环境光-均匀的照亮场景中的所有物体,不能投射阴影
  const Alight = new THREE.AmbientLight(0x404040)
  this.scene.add(Alight)

  // 添加聚光灯
  const light = new THREE.SpotLight({ color: '#fff' })

index.js

GitHub: juanuys/boids

52
53
54
55
56
57
58
59
60
61
}

// LIGHTS

//ambient light
scene.add(new THREE.AmbientLight(0xffffff, 0.5));

light = new THREE.PointLight(0xffffff, 0.5, 500);
light.position.set(0, 100, 0);
scene.add(light);

fashionview.js

GitHub: audunsh/evince

397
398
399
400
401
402
403
404
405
406

this.scene.add(bondMesh);



let light = new THREE.AmbientLight( 0xffffff, 0.8 ); // soft white light
this.scene.add( light );

const directionalLight = new THREE.DirectionalLight( 0xffffff, .5 );
directionalLight.position.set( 1, 1, 1 );

+ 2 other calls in file

builder.js

GitHub: TimMerino1710/Minecraft-Interactive-Evolution

116
117
118
119
120
121
122
123
124
125
126
127
//load a texture loader
var loader = new THREE.TextureLoader(  );
loader.crossOrigin = true;


//add a light
const ambientLight = new THREE.AmbientLight(0xffffff, 0.9);
SCENE.add(ambientLight);


const directionalLight = new THREE.DirectionalLight(0xffffff, 0.6);
directionalLight.position.set(10, 20, 0); // x, y, z

Other functions in three

Sorted by popularity

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

Other popular packages:

Home

About