import * as THREE from "three";
 
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import gsap from "gsap";
import * as dat from "dat.gui";
import vertexShader from "../shaders/flylight/vertex.glsl";
import fragmentShader from "../shaders/flylight/fragment.glsl";
import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
 
// 目標(biāo)：認(rèn)識shader
 
//創(chuàng)建gui對象
const gui = new dat.GUI();
 
// console.log(THREE);
// 初始化場景
const scene = new THREE.Scene();
 
// 創(chuàng)建透 視相機
const camera = new THREE.PerspectiveCamera(
  90,
  window.innerHeight / window.innerHeight,
  0.1,
  1000
);
// 設(shè)置相機位置
// object3d具有position，屬性是1個3維的向量
camera.position.set(0, 0, 2);
// 更新攝像頭
camera.aspect = window.innerWidth / window.innerHeight;
//   更新攝像機的投影矩陣
camera.updateProjectionMatrix();
scene.add(camera);
 
// 加入輔助軸，幫助我們查看3維坐標(biāo)軸
// const axesHelper = new THREE.AxesHelper(5);
// scene.add(axesHelper);
 
// 加載紋理
 
// 創(chuàng)建紋理加載器對象
const rgbeLoader = new RGBELoader();
rgbeLoader.loadAsync("./assets/2k.hdr").then((texture) => {
  texture.mapping = THREE.EquirectangularReflectionMapping;
  scene.background = texture;
  scene.environment = texture;
});
 
// 創(chuàng)建著色器材質(zhì);
const shaderMaterial = new THREE.ShaderMaterial({
  vertexShader: vertexShader,
  fragmentShader: fragmentShader,
  uniforms: {},
  side: THREE.DoubleSide,
  //   transparent: true,
});
 
// 初始化渲染器
const renderer = new THREE.WebGLRenderer({ alpha: true });
// renderer.shadowMap.enabled = true;
// renderer.shadowMap.type = THREE.BasicShadowMap;
// renderer.shadowMap.type = THREE.VSMShadowMap;
renderer.outputEncoding = THREE.sRGBEncoding;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
// renderer.toneMapping = THREE.LinearToneMapping;
// renderer.toneMapping = THREE.ReinhardToneMapping;
// renderer.toneMapping = THREE.CineonToneMapping;
renderer.toneMappingExposure = 0.2;
 
const gltfLoader = new GLTFLoader();
let LightBox = null;
gltfLoader.load("./assets/model/flyLight.glb", (gltf) => {
  console.log(gltf);
 
  LightBox = gltf.scene.children[1];
  LightBox.material = shaderMaterial;
 
  for (let i = 0; i < 150; i++) {
    let flyLight = gltf.scene.clone(true);
    let x = (Math.random() - 0.5) * 300;
    let z = (Math.random() - 0.5) * 300;
    let y = Math.random() * 60 + 25;
    flyLight.position.set(x, y, z);
    gsap.to(flyLight.rotation, {
      y: 2 * Math.PI,
      duration: 10 + Math.random() * 30,
      repeat: -1,
    });
    gsap.to(flyLight.position, {
      x: "+=" + Math.random() * 5,
      y: "+=" + Math.random() * 20,
      yoyo: true,
      duration: 5 + Math.random() * 10,
      repeat: -1,
    });
    scene.add(flyLight);
  }
});
 
// 設(shè)置渲染尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight);
 
// 監(jiān)聽屏幕大小改變的變化，設(shè)置渲染的尺寸
window.addEventListener("resize", () => {
  //   console.log("resize");
  // 更新攝像頭
  camera.aspect = window.innerWidth / window.innerHeight;
  //   更新攝像機的投影矩陣
  camera.updateProjectionMatrix();
 
  //   更新渲染器
  renderer.setSize(window.innerWidth, window.innerHeight);
  //   設(shè)置渲染器的像素比例
  renderer.setPixelRatio(window.devicePixelRatio);
});
 
// 將渲染器添加到body
document.body.appendChild(renderer.domElement);
 
// 初始化控制器
const controls = new OrbitControls(camera, renderer.domElement);
// 設(shè)置控制器阻尼
controls.enableDamping = true;
// 設(shè)置自動旋轉(zhuǎn)
controls.autoRotate = true;
controls.autoRotateSpeed = 0.1;
controls.maxPolarAngle = (Math.PI / 3) * 2;
controls.minPolarAngle = (Math.PI / 3) * 2;
 
const clock = new THREE.Clock();
function animate(t) {
  controls.update();
  const elapsedTime = clock.getElapsedTime();
 
  requestAnimationFrame(animate);
  // 使用渲染器渲染相機看這個場景的內(nèi)容渲染出來
  renderer.render(scene, camera);
}
 
animate();