Home

Index

How to use the PointLight function from three

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

three.PointLight is a type of light source in the Three.js library that emits light from a single point in all directions, simulating a light bulb or a candle.

main.js

20
21
22
23
24
25
26
27
28
29
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 );

var renderer = new THREE.WebGLRenderer();
renderer.setSize(div.offsetWidth, div.offsetWidth / 640 * 480);

209

app.js

GitHub: dbradleyfl/Mixed-Reality-JS

32
33
34
35
36
37
38
39
40
41
let loader = new THREE.TextureLoader();
let material = new THREE.MeshStandardMaterial({ vertexColors: THREE.VertexColors, map: new THREE.DataTexture(new Uint8Array(3).fill(255), 1, 1, THREE.RGBFormat) });

let ambientLight = new THREE.AmbientLight(0xFFFFFF, 0.8);
let directionalLight = new THREE.DirectionalLight(0xFFFFFF, 0.5);
let pointLight = new THREE.PointLight(0xFFFFFF, 0.5);

let cube = new THREE.Mesh(new THREE.BoxBufferGeometry(0.2, 0.2, 0.2), material.clone());
let sphere = new THREE.Mesh(initColors(new THREE.SphereBufferGeometry(0.1, 20, 20)), material.clone());
let cone = new THREE.Mesh(initColors(new THREE.ConeBufferGeometry(0.1, 0.2, 20, 20)), material.clone());

How does three.PointLight work?

three.PointLight is a type of light source in the Three.js library that emits light from a single point in all directions. The light is emitted uniformly in all directions, with the intensity of the light decreasing as the distance from the light source increases. The three.PointLight constructor takes several parameters that control the properties of the light, including its color, intensity, and distance attenuation. These parameters can be set when the light is created, and can also be changed later on to modify the behavior of the light. In addition to the standard properties of a light source, three.PointLight also has a position property that specifies the location of the light in 3D space. This property can be set to move the light to a different location, and can be animated to create dynamic lighting effects. Here is an example of how a three.PointLight might be created in Three.js: javascript Copy code {{{{{{{ const pointLight = new THREE.PointLight(0xffffff, 1, 100); pointLight.position.set(0, 0, 10); scene.add(pointLight); In this example, a new three.PointLight is created with a white color, an intensity of 1, and a distance attenuation of 100 units. The light is positioned at (0, 0, 10) using the position property, and is added to the scene using the add method.

index.js

GitHub: maxogden/stl-obj-viewer

75
76
77
78
79
80
81
82
83
84
scene = new THREE.Scene()

scene.add(camera)
material = new THREE.MeshLambertMaterial({color: 0xCCCCCC, wireframe: false})

var pointLight = new THREE.PointLight(0xFFFFFF)

// set its position
pointLight.position.x = 50
pointLight.position.y = 50

+ 14 other calls in file

main.js

GitHub: mattdesl/filmic-gl

9
10
11
12
13
14
15
16
17

function addLights(scene) {
    var light = new THREE.AmbientLight(0x14031b);
    scene.add(light);

    var point = new THREE.PointLight(0xaf581e, 1.0, 1000);
    point.position.x = -5;
    point.position.y = 80;
    scene.add(point);

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
// Create a scene
const scene = new THREE.Scene();

// Create a camera
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

// Create a renderer
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Create a point light
const pointLight = new THREE.PointLight(0xffffff, 1, 100);
pointLight.position.set(0, 0, 10);

// Add the point light to the scene
scene.add(pointLight);

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

In this example, a new three.PointLight is created with a white color, an intensity of 1, and a distance attenuation of 100 units. The light is positioned at (0, 0, 10) using the position property, and is added to the scene using the add method. The scene is then rendered using a WebGLRenderer instance, which is created and added to the DOM. When the render method is called, the renderer will render the scene from the perspective of the camera, taking into account the position and properties of the point light.

simulate.js

GitHub: cfry/dde

216
217
218
219
220
221
222
223
224
225
    //camera.position.set( -15, 10, 15 );
    //camera.lookAt( scene.position );
}

function createLights(){
          /* doesn't do anything //var light = new THREE.PointLight( 0xFFFF00 );
   var light = new THREE.DirectionalLight( 0xffffff, 0.5 );
   light.position.set( 10, 10, 10 );
   scene.add( light );
   */

index.js

GitHub: ASSERT-KTH/ci-hackathon

203
204
205
206
207
208
209
210
211
212
    
} );


function addBulbLight(color, position){
    var pointLight = new THREE.PointLight(Number(color), 0.3);

    pointLight.position.set(...position);
    scene.add(pointLight)

+ 5 other calls in file

GLTFLoader.js

GitHub: XvisionAS/FieldTwin-Integration-Demo

288
289
290
291
292
293
294
295
296
297
  lightNode.target.position.set(0, 0, -1);
  lightNode.add(lightNode.target);
  break;

case "point":
  lightNode = new THREE.PointLight(color);
  lightNode.distance = range;
  break;

case "spot":

+ 14 other calls in file

streetview.js

GitHub: Jam3/threejs-cubemap-compositor

46
47
48
49
50
51
52
53
54
55
  combine: THREE.AddOperation,
  reflectivity: 0.6
})
var item = new THREE.Mesh(itemGeo, itemMat)

// var light = new THREE.PointLight( 0xffffff, 1, 500 )
// light.position.set( 0.025, 0.1, -0.025 )
// app.scene.add( light )

var ambient = new THREE.AmbientLight( 0x404040 )

GLTFLoader.js

GitHub: disasteroftheuniverse/zdoom-navmesh-generator

435
436
437
438
439
440
441
442
443
444
    lightNode.target.position.set( 0, 0, - 1 );
    lightNode.add( lightNode.target );
    break;

case 'point':
    lightNode = new THREE.PointLight( color );
    lightNode.distance = range;
    break;

case 'spot':

index.cjs

GitHub: Brakebein/node-three-gltf

524
525
526
527
528
529
530
531
532
533
    lightNode = new three.DirectionalLight(color);
    lightNode.target.position.set(0, 0, -1);
    lightNode.add(lightNode.target);
    break;
case 'point':
    lightNode = new three.PointLight(color);
    lightNode.distance = range;
    break;
case 'spot':
    lightNode = new three.SpotLight(color);

index.js

GitHub: juanuys/boids

61
62
63
64
65
66
67
68
69
70
scene.add(light);

// TARGET

lure = null
// lure = new THREE.PointLight(0xffffff, 3, 500);
// lure.position.set(0, 50, 0);
// scene.add(lure);
// var lightHelper = new THREE.PointLightHelper(lure);
// scene.add(lightHelper);

+ 3 other calls in file

crystals.js

GitHub: funwithtriangles/polyop-ceremony

92
93
94
95
96
97
98
99
100

this.size = (Math.random() * 15) + 5;
var geometry = new THREE.IcosahedronGeometry(this.size);
this.mesh = new THREE.Mesh(geometry, crystalMaterial);

this.light = new THREE.PointLight( 0xffffff, params.lightIntensity, 1000 );

this.group.add(this.light);
this.group.add(this.mesh);

index.js

GitHub: andrenanninga/tomb-raider

40
41
42
43
44
45
46
47
48
49
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;
light.castShadow = true;
// light.shadowBias = 0.0001;
// light.shadowDarkness = 0.5;

+ 5 other calls in file

iktest.js

GitHub: sneha-belkhale/street-rat

52
53
54
55
56
57
58
59
60
61
const rectLight = new THREE.RectAreaLight(0xff00ff, 800, 5, 5);
rectLight.position.copy(neonPos);
rectLight.lookAt(0, 0, -1);
scene.add(rectLight);

const pointLight = new THREE.PointLight();
pointLight.position.set(0, 50, 0);
scene.add(pointLight);

const sphere = new THREE.Mesh(new THREE.SphereGeometry(100), new THREE.MeshBasicMaterial({

TestScene.js

GitHub: sneha-belkhale/street-rat

131
132
133
134
135
136
137
138
139
140
const lightColor = new THREE.Color(...color.array);
const lightIntensity = intensity.array[0] * 10000;
const lightDistance = 0.0;
const decay = 2;

const pointLight = new THREE.PointLight(
  lightColor, lightIntensity, lightDistance, decay,
);

const { x, y, z } = asset.position;

moveable.js

GitHub: andrenanninga/tomb-raider

38
39
40
41
42
43
44
45
46
47
document.body.appendChild(stats.domElement);

var light = new THREE.AmbientLight(0x666666);
scene.add(light);

var light = new THREE.PointLight(0xffffff, 0.5, 10000);
light.position.set(camera.position.x, camera.position.y, camera.position.z);
scene.add(light);

var axis = new THREE.AxisHelper(100);

scene.js

GitHub: demo3d/threejs-mapping

23
24
25
26
27
28
29
30
31
32
camera.position.z = 120;
camera.position.x = 100;
camera.position.y = -100;
scene.add(camera);

light = new THREE.PointLight(0xFFFFFF);
light.position.x = 120;
light.position.y = -100;
light.position.z = 120;
scene.add(light);

+ 3 other calls in file

preview.js

GitHub: lyxnter/DuetWebControl

147
148
149
150
151
152
153
154
155
156
//previewSpace.prop("style", "transform: scale(0.5)");
previewSpace.appendChild(this.previewRenderer.domElement);
var ambientLight = new THREE.AmbientLight(0xffffff, 0.4);
this.previewScene.add(ambientLight);

var light = new THREE.PointLight(0xffffff, 1, 600);
light.position.set(0, 295, 0);
light.castShadow = true;
light.shadow.camera.near = 0.1;
light.shadow.camera.far = 1000

+ 2 other calls in file

browser.js

GitHub: FabricLabs/verse

52
53
54
55
56
57
58
59
60
61
const mouse = new THREE.Vector2();

// Rover
const vehicleGeometry = new THREE.SphereGeometry(0.5, 32, 32);
const vehicleMaterial = new THREE.MeshBasicMaterial({ color: 0x2185d0 });
const vehicleGlow = new THREE.PointLight(0x5555ee, 1, 50);

// Fireballs
const fireballGeometry = new THREE.SphereGeometry(0.05, 8, 8);
const fireballMaterial = new THREE.MeshBasicMaterial({ color: 0xFF0000 });

+ 35 other calls in file

_web3d.js

GitHub: truongvithien/threed

262
263
264
265
266
267
268
269
270
271
if (settings.environment_light.enable) web3d.setupRGBE(settings.environment_light.options);

var sphere_light = new THREE.SphereGeometry(0.2, 32, 32);

if (settings.key_light.enable) {
    light_key = new THREE.PointLight(
        settings.key_light.options.color, 
        settings.key_light.options.intensity, 
        settings.key_light.options.distance,
        settings.key_light.options.decay,

+ 23 other calls in file

Other functions in three

Sorted by popularity

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

Other popular packages:

Home

About