How to use the BasicShadowMap function from three

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

three.BasicShadowMap is a rendering technique in the three.js library that generates basic shadows for 3D objects in a scene.

preview.js

141
142
143
144
145
146
147
148
149
150
});
this.lays = [];
this.previewRenderer.setSize(1200, 1200);

this.previewRenderer.shadowMapEnabeled = true;
this.previewRenderer.shadowMap.type = THREE.BasicShadowMap;
//previewSpace.prop("style", "transform: scale(0.5)");
previewSpace.appendChild(this.previewRenderer.domElement);
var ambientLight = new THREE.AmbientLight(0xffffff, 0.4);
this.previewScene.add(ambientLight);

+ 2 other calls in file

webgl_main.js

GitHub: utunga/deeppbr.ai

128
129
130
131
132
133
134
135
136
renderer.gammaOutput = true;

// renderer.toneMapping = THREE.ReinhardToneMapping;
// renderer.toneMappingExposure = 3;
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.BasicShadowMap;
renderer.shadowMapSoft = true;

scene = new THREE.Scene();

+ 3 other calls in file

How does three.BasicShadowMap work?

three.BasicShadowMap is a rendering technique in the three.js library that generates basic shadows for 3D objects in a scene.

To use three.BasicShadowMap, you first need to enable it in the renderer instance using the shadowMap property. You can set this property to THREE.BasicShadowMap to enable basic shadow mapping.

You then need to set up the objects in the scene that will cast and receive shadows. Objects that cast shadows should have the castShadow property set to true, and objects that receive shadows should have the receiveShadow property set to true.

You can then set up the light source that will cast the shadows. This should be a directional light (THREE.DirectionalLight), and should have the castShadow property set to true.

Once the scene, objects, and light are set up, three.js will automatically generate shadows for the objects in the scene. The quality and appearance of the shadows can be further controlled using properties and methods of the THREE.LightShadow and THREE.ShadowMap classes.

For example, here's how to enable basic shadow mapping and set up a directional light that casts shadows:

javascript
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.BasicShadowMap;
document.body.appendChild(renderer.domElement);

const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(0, 10, 0);
light.castShadow = true;
light.shadow.mapSize.width = 1024;
light.shadow.mapSize.height = 1024;
scene.add(light);

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshPhongMaterial({ color: 0xff0000 });
const cube = new THREE.Mesh(geometry, material);
cube.position.set(0, 0.5, 0);
cube.castShadow = true;
scene.add(cube);

const planeGeometry = new THREE.PlaneGeometry(10, 10);
const planeMaterial = new THREE.MeshPhongMaterial({ color: 0x999999 });
const plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.receiveShadow = true;
plane.rotation.x = -Math.PI / 2;
scene.add(plane);

camera.position.z = 5;

function animate() {
  requestAnimationFrame(animate);
  
  cube.rotation.y += 0.01;
  
  renderer.render(scene, camera);
}

animate();

In this example, we are using THREE.BasicShadowMap to generate basic shadows for a cube and plane in a three.js scene. We first create a new scene, camera, and renderer instance, and enable basic shadow mapping in the renderer by setting the shadowMap property to THREE.BasicShadowMap.

We then create a directional light that will cast shadows and set its castShadow property to true. We also set the mapSize property of the light's shadow to 1024x1024 for higher resolution shadows.

We then create a cube and plane geometry, and set their castShadow and receiveShadow properties to true, respectively. We add these objects to the scene.

Finally, we set the camera position and create an animation loop that rotates the cube and renders the scene using the renderer instance.

This example demonstrates how to use THREE.BasicShadowMap to generate basic shadows for objects in a three.js scene.

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
33
34
35
36
37
38
39
40
41
42
43
44
45
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
  45,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.BasicShadowMap;
document.body.appendChild(renderer.domElement);

const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(0, 10, 0);
light.castShadow = true;
light.shadow.mapSize.width = 1024;
light.shadow.mapSize.height = 1024;
scene.add(light);

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshPhongMaterial({ color: 0xff0000 });
const cube = new THREE.Mesh(geometry, material);
cube.position.set(0, 0.5, 0);
cube.castShadow = true;
scene.add(cube);

const planeGeometry = new THREE.PlaneGeometry(10, 10);
const planeMaterial = new THREE.MeshPhongMaterial({ color: 0x999999 });
const plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.receiveShadow = true;
plane.rotation.x = -Math.PI / 2;
scene.add(plane);

camera.position.z = 5;

function animate() {
  requestAnimationFrame(animate);

  cube.rotation.y += 0.01;

  renderer.render(scene, camera);
}

animate();

In this example, we are using THREE.BasicShadowMap to generate basic shadows for a cube and plane in a three.js scene. We first create a new scene, camera, and renderer instance, and enable basic shadow mapping in the renderer by setting the shadowMap property to THREE.BasicShadowMap. We then create a directional light that will cast shadows and set its castShadow property to true. We also set the mapSize property of the light's shadow to 1024x1024 for higher resolution shadows. We then create a cube and plane geometry, and set their castShadow and receiveShadow properties to true, respectively. We add these objects to the scene. Finally, we set the camera position and create an animation loop that rotates the cube and renders the scene using the renderer instance. This example demonstrates how to use THREE.BasicShadowMap to generate basic shadows for objects in a three.js scene.

Other functions in three

Sorted by popularity

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

Other popular packages:

Home

About