Three.js

//화면에 그림을 그려주는 렌더러를 만들고, 사이즈를 설정해줍니다.
let renderer = new THREE.WebGLRenderer({
  canvas: document.querySelector("#canvas"),
  antialias: true,
});
renderer.setSize(window.innerWidth, window.innerHeight);

/**
  전체 요소가 포한되는 공간인 씬을 만들고 카메라를 추가합니다.
  카메라의 종류는 여러가지인데, 가장 기본인 원근 카메라 PerspectiveCamera 를 많이 쓰고,
  인자로 시야각, 종횡비, near, far 값을 넣습니다.
 **/
let scene = new THREE.Scene();
scene.background = new THREE.Color("skyblue");

let camera = new THREE.PerspectiveCamera(
    45, // 시야각(field of view)
    window.innerWidth / window.innerHeight, // 종횡비(aspect)
    0.1, // 눈에 보이는 가장 가까운 거리
    1000 // 눈에 보이는 가장 먼 거리
)
// 카메라의 위치 설정 (x: 0, y: 0, z: 5)
camera.position.set(0, 0, 5);


//우리가 물체를 볼 때 빛이 있어야 하는 것처럼, Three.js에서도 물체를 보기 위해서 조명을 추가해주어야 한다.
let PLight = new THREE.PointLight();
PLight.position.set(50, 50, 50);
let ALight = new THREE.AmbientLight();
let light = new THREE.DirectionalLight(0xffffff,10);
scene.add(PLight, ALight, light);

let loader = new GLTFLoader();
loader.load("/little_duck/scene.gltf", function (gltf) {
  scene.add(gltf.scene);
  function animate(){
    requestAnimationFrame(animate) //1초에 60번 실행됨.

    //회전
    gltf.scene.rotation.y += 0.010;
    renderer.render(scene,camera);
  }
  animate();
});