var spotLight = new THREE.SpotLight(0xffffff, 1, 100, Math.PI/4, 0, 2); //創(chuàng)建一個(gè)白色聚光燈，強(qiáng)度為1，有效距離為100，光錐角度為45度，模糊半徑為0，衰減系數(shù)為2
spotLight.position.set(0, 10, 0); //設(shè)置聚光燈的位置
var spotLightTarget = new THREE.Object3D(); //創(chuàng)建一個(gè)對(duì)象作為聚光燈的目標(biāo)
spotLightTarget.position.set(0, 0, -10); //設(shè)置目標(biāo)位置
scene.add(spotLightTarget); //將目標(biāo)對(duì)象添加到場(chǎng)景中
spotLight.target = spotLightTarget; //設(shè)置聚光燈的目標(biāo)為目標(biāo)對(duì)象
scene.add(spotLight); //將聚光燈添加到場(chǎng)景中

import * as THREE from "three";
// 導(dǎo)入軌道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
// 導(dǎo)入動(dòng)畫庫
import gsap from "gsap";
// 導(dǎo)入dat.gui
import * as dat from "dat.gui";
import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";
const gui = new dat.GUI();
// 1、創(chuàng)建場(chǎng)景
const scene = new THREE.Scene();
// 2、創(chuàng)建相機(jī)
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
// 設(shè)置相機(jī)位置
camera.position.set(0, 0, 10);
scene.add(camera);
const sphereGeometry = new THREE.BoxGeometry( 1, 1, 1 );  // 立方體幾何體 參數(shù)：長、寬、高
const material = new THREE.MeshStandardMaterial({color: 0x00ff00});
const sphere = new THREE.Mesh(sphereGeometry, material);
// 投射陰影
sphere.castShadow = true; // 設(shè)置立方體投射陰影
scene.add(sphere); // 將立方體添加到場(chǎng)景中
// // 創(chuàng)建平面
const planeGeometry = new THREE.PlaneBufferGeometry(50, 50);
// 創(chuàng)建標(biāo)準(zhǔn)材質(zhì)
const materialplane = new THREE.MeshStandardMaterial({color: 0xf0fff0});
const plane = new THREE.Mesh(planeGeometry, materialplane);
plane.position.set(0, -1, 0);
plane.rotation.x = -Math.PI / 2;
// 接收陰影
plane.receiveShadow = true;
scene.add(plane);
// 燈光
// 環(huán)境光
const light = new THREE.AmbientLight(0xffffff, 0.5); // soft white light
scene.add(light);
// 創(chuàng)建聚光燈
const spotLight = new THREE.SpotLight(0xffffff, 1);
spotLight.position.set(5, 5, 5); // 設(shè)置聚光燈位置
spotLight.castShadow = true; // 設(shè)置聚光燈投射陰影
spotLight.intensity = 2; // 設(shè)置聚光燈強(qiáng)度
// 設(shè)置陰影貼圖模糊度
spotLight.shadow.radius = 20;
// 設(shè)置陰影貼圖的分辨率
spotLight.shadow.mapSize.set(512, 512);
// console.log(directionalLight.shadow);
spotLight.target = sphere; // 設(shè)置聚光燈的目標(biāo)為立方體 會(huì)自動(dòng)對(duì)準(zhǔn)目標(biāo)
spotLight.angle = Math.PI / 6; // 設(shè)置聚光燈的角度
spotLight.distance = 0; // 設(shè)置聚光燈的距離
spotLight.penumbra = 0; // 設(shè)置聚光燈的邊緣
spotLight.decay = 0; // 設(shè)置聚光燈的衰減
// 設(shè)置透視相機(jī)的屬性
scene.add(spotLight);
gui.add(sphere.position, "x").min(-5).max(5).step(0.1);
gui
  .add(spotLight, "angle")
  .min(0)
  .max(Math.PI / 2)
  .step(0.01);
gui.add(spotLight, "distance").min(0).max(10).step(0.01);
gui.add(spotLight, "penumbra").min(0).max(1).step(0.01);
gui.add(spotLight, "decay").min(0).max(5).step(0.01);
// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
// 設(shè)置渲染的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight);
// 開啟場(chǎng)景中的陰影貼圖
renderer.shadowMap.enabled = true;
renderer.physicallyCorrectLights = true; // 設(shè)置渲染器的物理正確性
// console.log(renderer);
// 將webgl渲染的canvas內(nèi)容添加到body
document.body.appendChild(renderer.domElement);
// 創(chuàng)建軌道控制器
const controls = new OrbitControls(camera, renderer.domElement);
// 設(shè)置控制器阻尼，讓控制器更有真實(shí)效果,必須在動(dòng)畫循環(huán)里調(diào)用.update()。
controls.enableDamping = true;
// 添加坐標(biāo)軸輔助器
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);
// 設(shè)置時(shí)鐘
const clock = new THREE.Clock();
function render() {
  controls.update();
  renderer.render(scene, camera);
  //   渲染下一幀的時(shí)候就會(huì)調(diào)用render函數(shù)
  requestAnimationFrame(render);
}
render();
// 監(jiān)聽畫面變化，更新渲染畫面
window.addEventListener("resize", () => {
  //   console.log("畫面變化了");
  // 更新攝像頭
  camera.aspect = window.innerWidth / window.innerHeight;
  //   更新攝像機(jī)的投影矩陣
  camera.updateProjectionMatrix();
  //   更新渲染器
  renderer.setSize(window.innerWidth, window.innerHeight);
  //   設(shè)置渲染器的像素比
  renderer.setPixelRatio(window.devicePixelRatio);
});