Thêm vật liệu và đèn mới trong Three.js rất đơn giản và được làm theo cách tương tự như chúng tôi đã giải thích trong
Bài 6. Kết xuất và xem một đối tượng 3D three.js
Chúng tôi bắt đầu bằng cách thêm nguồn sáng vào cảnh
//Thêm đốm sáng cho bóng
var spotLight = new THREE.SpotLight(0xFFFFFF);
spotLight.position.set(-40, 40, -15);
spotLight.castShadow = true;
spotLight.shadow.mapSize = new THREE.Vector2(1024, 1024);
spotLight.shadow.camera.far = 130;
spotLight.shadow.camera.near = 40;
// Nếu bạn muốn bóng mờ hơn, bạn có thể tăng mapSize được sử dụng để vẽ bóng.
// spotLight.shadow.mapSize = new THREE.Vector2(1024, 1024);
scene.add(spotLight);
Thay đổi vật liệu của đối tượng
var planeMaterial = new THREE.MeshLambertMaterial({color:
0xffffff});
Chúng ta sẽ sử dụng vật liệu MeshLambertMaterial để xem sự thay đổi
[upl-image-preview url=https://making.vn/assets/files/2021-11-17/1637135173-481196-image.png]
Đổ bóng đối tượng
//Cho phép nền đất nhận đổ bóng
plane.receiveShadow = true;
//Đổ bóng cho khối vuông
cube.castShadow = true;
//Đổ bóng cho hình cầu
sphere.castShadow = true;
Sau đó cho phép nguồn sáng có đổ bóng
spotLight.castShadow = true;
Cho phép render đổ bóng
renderer.shadowMap.Enabled = true;
Kết quả
Bài 8, Chúng ta sẽ tìm hiểu về chuyển động với Three.js
