body { margin: 0; }
canvas { width: 100%; height: 100% }

var stats = initStats();
// Tạo một cảnh, sẽ chứa tất cả các yếu tố của chúng ta như vật thể, máy ảnh và ánh sáng.
var scene = new THREE.Scene();

// Tạo một máy ảnh, xác định nơi chúng ta đang xem.
var camera = new THREE.PerspectiveCamera(
  45,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

// Tạo kết xuất và đặt kích thước
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(new THREE.Color(0x000000));
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
// hiển thị các trục trên màn hình
var axes = new THREE.AxesHelper(20);
scene.add(axes);

// Tạo mặt phẳng
var planeGeometry = new THREE.PlaneGeometry(60, 20);
var planeMaterial = new THREE.MeshLambertMaterial({
  color: 0xaaaaaa
});
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
//Cho phép nền đất nhận đổ bóng
plane.receiveShadow = true;
// Xoay và định vị mặt phẳng
plane.rotation.x = -0.5 * Math.PI;
plane.position.set(15, 0, 0);

// thêm mặt phẳng vào cảnh
scene.add(plane);

// tạo một khối lập phương
var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
var cubeMaterial = new THREE.MeshLambertMaterial({
  color: 0xff0000
});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

// định vị khối lập phương
cube.position.set(-4, 3, 0);
//Đổ bóng cho khối vuông
cube.castShadow = true;
// Thêm khối lập phương vào khung cảnh
scene.add(cube);

// Tạo một quả cầu
var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
var sphereMaterial = new THREE.MeshLambertMaterial({
  color: 0x7777ff
});
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);

// Vị trí của quả cầu
sphere.position.set(20, 4, 2);
//Đổ bóng cho hình cầu
sphere.castShadow = true;
// Thêm hình cầu vào cảnh
scene.add(sphere);

// Định vị và hướng máy ảnh vào trung tâm của cảnh
camera.position.set(-30, 40, 30);
camera.lookAt(scene.position);
//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;
//Cho phép đổ bóng
// 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);

var ambienLight = new THREE.AmbientLight(0x353535);
scene.add(ambienLight);

// thêm đầu ra của trình kết xuất vào phần tử html
document.getElementById("webgl-output").appendChild(renderer.domElement);

// Gọi hàm render
var step = 0;
renderScene();

function renderScene() {
  stats.update();
  requestAnimationFrame(renderScene);
  renderer.render(scene, camera);
}