⚠️ 1분 코딩님의 강의를 바탕으로 작성한 글입니다.
브라우저 사이즈 변경에 대비하기
만약 캔버스의 크기를 브라우저 사이즈에 따라 변경되어야 한다면 어떻게 해야 할까?
간단하다. 이벤트 함수를 만들어서 종횡비의 값을 재할당 해주면 된다!
function setSize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.render(scene, camera); // ‼️ 다시 그려주기
}
// 이벤트
window.addEventListener('resize', setSize);이때 반드시 화면에 다시 그려줘야 한다는 점을 기억하자!
고해상도에 대비하기
9월 원티드 프리온보딩을 들으며 배웠던 내용이기도 한 '고해상도'에 대한 이슈이다. 동영상 720p도 만족하지 못하는 나처럼... 시간이 갈수록 고해상도의 중요함을 느낀다. 그런데 요 canvas도 이미지와 같은 개념처럼 실제로 화면에 보이는 크기는 100px이더라도 픽셀 수가 더 많은 이미지를 줄여서 보여줘야 더 깔끔한 이미지를 보여줄 수 있기 때문에 실제 이미지 크기는 2배로 사용해야 한다.
그런데 다행인 건(?) 쉽게 2배로 만들어주는 메서드가 존재한다!
// console.log(window.devicePixelRatio);
renderer.setPixelRatio(window.devicePixelRatio);devicePixelRatio로 현재 픽셀 밀도(비율)를 알 수 있다. 그리고 이것을 단순히 setPixelRatio 메서드에 넣어주기만 하면 된다.
배경 색 설정하기
배경을 투명하게 만드는 방법에 대해 먼저 알아보겠다.
const renderer = new THREE.WebGLRenderer({
canvas,
antialias: true,
alpha: true
});기존에 만들어두었던 renderer에 alpha: true를 추가해 주면 배경이 투명해진다. CSS에 배경색을 넣어보면 확인할 수 있다.
만약 반투명하게 만들고 싶을 경우에는 아래의 방법을 사용할 수 있다.
renderer.setClearAlpha();setClearAlpha 메서드의 인자로는 0 ~ 1 사이의 숫자값을 넣으면 된다.
메서드를 이용해서 배경색을 넣을 수도 있다.
renderer.setClearColor(0x00ff00);
renderer.setClearAlpha(0.5);이때 주의해야 할 점은 CSS 배경색과 setClearColor로 설정한 색상과 투명도과 모두 합쳐진 색상으로 표출된다는 점이다. CSS에 설정한 색상이 없다면 기본 색상인 흰색 위에서 색상이 올려지는 것이다.
지금까지는 렌더링 역할을 하는 renderer에 명령하였다면, scene에서 조작해 보도록 하겠다.
scene은 무대라는 의미처럼 renderer보다 상위에 있기 때문에 renderer에 부여했던 색상값들은 모두 덮인다.
scene.background = new THREE.Color('blue');three.js의 Color 속성을 사용하여 색상을 넣어줄 수 있다.
빛(조명)에 대비하기
우선 이 테스트를 하기 위해서는 mesh의 재질이 중요하다. MeshBasicMaterial일 경우에는 빛에 영향을 받지 않는 재질이기 때문에 MeshStandardMaterial 재질의 mesh를 만들 것이다. 이제 빛을 적용해 보겠다.
const light = new THREE.DirectionalLight( color : Integer, intensity : Float );
light.position.x = 1;
light.position.z = 5;
scene.add(light);빛도 위치를 이동시킬 수 있으며, 반드시 scene에 추가해 줘야만 화면에 그려진다! 참고로 두 번째 인자는 빛의 강도이다.
| DirectionalLight | 태양빛과 유사하다. 무대의 mesh를 전체적으로 비춰준다. |
| AmbientLight | scene의 모든 개체를 전체적으로 동일하게 비춰준다. |
여러 개의 조명을 동시에 올려도 되지만, 성능적 면에서는 좋지 않다.
📜 출처