draw함수로 그리기 부분 넣기
렌더러가 렌더 메서드를 호출하는 부분을 draw 함수 안으로 넣기
src/ex05_animationBasic
import * as THREE from "three";
/* 주제: 애니메이션 기본 */
export default function example() {
/* Renderer 만들기 : html에 캔버스 미리 만들기 */
const canvas = document.querySelector("#three-canvas");
const renderer = new THREE.WebGLRenderer({
canvas,
antialias: true
// alpha: true // 배경 투명도 설정
});
renderer.setSize(window.innerWidth, window.innerHeight);
/* 디바이스 픽셀 비율을 설정 */
renderer.setPixelRatio(window.devicePixelRatio > 1 ? 2 : 1);
/* 배경색, 투명화 설정 */
// renderer.setClearAlpha(0.5); // 불투명도 설정
// renderer.setClearColor(0x00ff00);
/* Scene 만들기 */
const scene = new THREE.Scene();
// scene.background = new THREE.Color("blue");
/* Camera 만들기 */
const camera = new THREE.PerspectiveCamera(
75, // 시야각 (field of view)
window.innerWidth / window.innerHeight, // 종횡비(aspect)
0.1, // near
1000 // far
);
camera.position.z = 5;
scene.add(camera);
/* Light 만들기 */
const light = new THREE.DirectionalLight(0xffffff, 2);
light.position.x = 2;
light.position.z = 2;
scene.add(light);
/* Messh 만들기 */
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({
// MeshBasicMaterial는 빛의 영향을 받지 않아 조명이 없어도 보인다.
// MeshStandardMaterial는 빛의 영향을 받는다.
color: "red"
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
/* 그리기 */
function draw() {
renderer.render(scene, camera);
}
function setSize() {
// 카메라
camera.aspect = window.innerWidth / window.innerHeight; // window는 전역 객쳐여서 작성하지 않아도 됨. window.innerWidth === innerWidth
// updateProjectionMatrix - 카메라 투영에 관련된 값에 변화가 있을 경우 실행해야 함
camera.updateProjectionMatrix();
// setSize - 변화된 것을 다시 그려주는 것까지 해야 작동된다.
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.render(scene, camera);
}
/* 이벤트 */
window.addEventListener("resize", setSize);
draw();
}
애니메이션 넣기
mesh 회전 시키기
src/ex05_animationBasic
import * as THREE from "three";
/* 주제: 애니메이션 기본 */
export default function example() {
/* Renderer 만들기 : html에 캔버스 미리 만들기 */
const canvas = document.querySelector("#three-canvas");
const renderer = new THREE.WebGLRenderer({
canvas,
antialias: true
// alpha: true // 배경 투명도 설정
});
renderer.setSize(window.innerWidth, window.innerHeight);
/* 디바이스 픽셀 비율을 설정 */
renderer.setPixelRatio(window.devicePixelRatio > 1 ? 2 : 1);
/* 배경색, 투명화 설정 */
// renderer.setClearAlpha(0.5); // 불투명도 설정
// renderer.setClearColor(0x00ff00);
/* Scene 만들기 */
const scene = new THREE.Scene();
// scene.background = new THREE.Color("blue");
/* Camera 만들기 */
const camera = new THREE.PerspectiveCamera(
75, // 시야각 (field of view)
window.innerWidth / window.innerHeight, // 종횡비(aspect)
0.1, // near
1000 // far
);
camera.position.z = 5;
scene.add(camera);
/* Light 만들기 */
const light = new THREE.DirectionalLight(0xffffff, 2);
light.position.x = 2;
light.position.z = 2;
scene.add(light);
/* Messh 만들기 */
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({
// MeshBasicMaterial는 빛의 영향을 받지 않아 조명이 없어도 보인다.
// MeshStandardMaterial는 빛의 영향을 받는다.
color: "red"
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
/* 그리기 */
function draw() {
// 애니메이션 추가
// mesh.rotation.y += 0.1; // 각도는 Radian을 사용, 360도는 2파이
mesh.rotation.y += THREE.MathUtils.degToRad(1);
mesh.position.y += 0.01;
if (mesh.position.y > 3) {
mesh.position.y = 0;
}
renderer.render(scene, camera);
// window.requestAnimationFrame(draw);
renderer.setAnimationLoop(draw);
}
function setSize() {
// 카메라
camera.aspect = window.innerWidth / window.innerHeight; // window는 전역 객쳐여서 작성하지 않아도 됨. window.innerWidth === innerWidth
// updateProjectionMatrix - 카메라 투영에 관련된 값에 변화가 있을 경우 실행해야 함
camera.updateProjectionMatrix();
// setSize - 변화된 것을 다시 그려주는 것까지 해야 작동된다.
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.render(scene, camera);
}
/* 이벤트 */
window.addEventListener("resize", setSize);
draw();
}
window.requestAnimationFrame()
참고 : window 함수는 전역함수여서 생략하고 작성해도 된다.
- threeJS에서 애니메이션을 주는 것은 Canvas랑 마찬가지 requestAnimationFrame메서드를 사용한다.
- window.requestAnimationFrame() 메서드는 브라우저에게 수행하기를 원하는 애니메이션을 알리고 다음 리페인트 바로 전에 브라우저가 애니메이션을 업데이트할 지정된 함수를 호출하도록 요청 이 메서드는 리페인트 이전에 호출할 인수로 콜백을 받습니다.
- 예를 들어, 박스가 하나 있고 1도씩 회전한다면 리페인트를 해주기 전 박스를 1도 회전하는 함수를 호출한다는 것 (박스 돌리기 → 리페인트를 반복한다는 뜻)
- 비슷하게 예전에 많이 사용되는 SetInterval 이 있다.
- SetInterval : 자동으로 지정해 둔 초당 프레임수를 빠르게 반복하는 함수
- 성능 이슈와 단점이 많음
- 빠르게 반복 실행하면서 애니메이션 처리를 할 때는 요즘 requestAnimationFrame을 사용한다.
- 1분 코딩 requestAnimationFrame 사용법
renderer.setAnimationLoop(draw)
- window.requestAnimationFrame() 대신 사용
- 렌더러가 가지고 있는 메서드를 사용하여 애니메이션을 사용해도 된다.
- threeJS를 이용해서 AR이나 VR 같은 콘텐츠를 만들 경우는 setAnimationLoop로 꼭 사용하기
mesh.rotation.y += 0.1
- 각도는 Radian을 사용
- 360도는 2파이
mesh.rotation.y += THREE.MathUtils.degToRad(1)
- THREE.MathUtils.degToRad()가 우리에게 익숙한 각도
- deg : 360도 기반의 각도
- 디그리 값을 라디안으로 변환해 주는 메서드
- THREE.MathUtils.degToRad(1) = 1도씩 돌리는 것
애니메이션 속도는 컴퓨터 성능이나 상황에 다라 다를 수 있다.
- 예전에는 일반적으로 초당 60회 반복을 목표로 했었음.
- 최근 브라우저들 같은 경우 화면 주사율을 따라가는 것이 권고된다.
- 컴퓨터 화면 주사율에 따라 60회보다 훨씬 더 많이 반복이 될 수 있다.
window.requestAnimationFrame(draw)
- draw()를 호출하면서 반복되는 것.
- 인자로 넣은 함수를 리페인트가 일어나기 전 한번 호출해 주고 끝낸다. draw가 계속 호출되기 때문 반복되는 것
- 단, 리퀘스트 애니메이션 프레임 자체는 반복시키지 않는다.