How to use the PCFSoftShadowMap function from three

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

In the Three.js library for JavaScript, THREE.PCFSoftShadowMap is a type of shadow map that provides high-quality, soft shadows with smooth edges.

index.js

279
280
281
282
283
284
285
286
287


renderer.toneMappingExposure = Math.pow(0.7, 2.0);

renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
var clock = new THREE.Clock();

function animate() {

+ 2 other calls in file

TestScene.js

GitHub: sneha-belkhale/street-rat

14
15
16
17
18
19
20
21
22
23

this.renderer.physicallyCorrectLights = true;
this.renderer.gammaInput = true;
this.renderer.gammaOutput = true;
this.renderer.gammaFactor = 2.2;
this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;

this.renderer.toneMapping = THREE.ReinhardToneMapping;

// this.renderer.shadowMap.enabled = true;

How does three.PCFSoftShadowMap work?

THREE.PCFSoftShadowMap is a type of shadow map in the Three.js library for JavaScript that provides high-quality, soft shadows with smooth edges.

When THREE.PCFSoftShadowMap is used as the shadowMap property of a THREE.WebGLRenderer object, it performs the following operations:

It generates a shadow map for each light that casts shadows in the scene.
The shadow map is a texture that represents the depth values of the objects that cast shadows.
When rendering the scene, the renderer samples the shadow map to determine whether each pixel is in shadow or not.
The samples are weighted based on their distance from the object being shaded, which creates soft shadows with smooth edges.
The weighting function is based on a Poisson distribution, which provides a good balance between quality and performance.
The resulting shadows are high-quality, with smooth edges and a natural appearance.

By using THREE.PCFSoftShadowMap, developers can add high-quality shadows to their Three.js scenes that look more realistic and natural than simple, hard-edged shadows. Note that THREE.PCFSoftShadowMap can be more computationally expensive than other types of shadow maps, so it should be used judiciously to avoid performance issues.

main.es6

GitHub: kevin-roark/gob-blender

29
30
31
32
33
34
35
36
37
38
}

if (this.renderer) {
  this.renderer.shadowMapEnabled = true;
  this.renderer.shadowMapCullFace = THREE.CullFaceBack;
  this.renderer.shadowMapType = THREE.PCFSoftShadowMap;

  this.renderer.gammaInput = true;
      this.renderer.gammaOutput = true;
}

blueprint3d.js

GitHub: 2022-SMHRD-IS-AI1/MyPlace

13630
13631
13632
13633
13634
13635
13636
13637
13638
13639
  preserveDrawingBuffer: true // required to support .toDataURL()
});
renderer.autoClear = false,
renderer.shadowMapEnabled = true;
renderer.shadowMapSoft = true;
renderer.shadowMapType = THREE.PCFSoftShadowMap;

var skybox = new ThreeSkybox(scene);

scope.controls = new ThreeControls(camera, domElement);

+ 13 other calls in file

Ai Example

1
2
3
const renderer = new THREE.WebGLRenderer();
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;

In this example, we're creating a new THREE.WebGLRenderer object and enabling the shadowMap feature by setting the enabled property to true. We're also setting the type property of the shadowMap to THREE.PCFSoftShadowMap, which tells Three.js to use the PCFSoftShadowMap type of shadow map. Once the renderer is configured in this way, any lights in the scene that are set up to cast shadows will automatically use THREE.PCFSoftShadowMap to generate high-quality, soft shadows with smooth edges. Note that you may need to adjust the properties of the light and the objects in the scene to get the desired shadow effects.

index.js

GitHub: ryo612/rhinestone

141
142
143
144
145
146
147
148
149
const renderer = new THREE.WebGLRenderer({ context, alpha: true, });
renderer.context.getExtension('EXT_shader_texture_lod');
//renderer.setClearColor(0xf7f7f7, 1);
renderer.setClearColor(0x000000, 1);
renderer.shadowMap.enabled = true;
//renderer.shadowMap.type = THREE.PCFSoftShadowMap;

const camera = new THREE.PerspectiveCamera(45, 1, 0.01, 10000);
camera.position.set(0, 0, 100);

+ 3 other calls in file

index.js

GitHub: PSkinnerTech/obscurus

67
68
69
70
71
72
73
74
75
76
    // transparent : true,
    // premultipliedAlpha : false,
    antialias : true
});
_renderer.setClearColor(settings.bgColor);
_renderer.shadowMap.type = THREE.PCFSoftShadowMap;
_renderer.shadowMap.enabled = true;
document.body.appendChild(_renderer.domElement);

_scene = new THREE.Scene();

+ 2 other calls in file

model.js

GitHub: Neticon/webgl-tests

35
36
37
38
39
40
41
42
43
const orbitControls = new THREE.OrbitControls(camera, renderer.domElement)

renderer.setClearColor(0x202020)
renderer.setSize(WIDTH, HEIGHT)
renderer.shadowMap.enabled = true
renderer.shadowMap.type = THREE.PCFSoftShadowMap
document.body.appendChild(renderer.domElement)

scene.fog = new THREE.FogExp2(0xffffff, 0)

+ 2 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