Frontend/Three.js

애니메이션 기본

애니메이션 넣기 mesh 회전시키기 import * as THREE from "three"; /* 그리기 */ 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.setAnimati..

빛(조명) 설정하기

src/ex04_lightimport * 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...

Renderer에 배경색, 투명화 설정

Renderer에 배경색, 투명화 설정 src/ex03_backgroundColor 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); /* 디바..

브라우저 창 사이즈 변경에 대응하기

src/ex02_browserSize /* 디바이스 픽셀 비율을 설정 */ console.log("📢 [ex02_browserSize.js:16]", window.devicePixelRatio); // 픽셀 해상도의 비율을 나타내는 배정밀도 부동 소수점 값 확인 renderer.setPixelRatio(window.devicePixelRatio > 1 ? 2 : 1);  전체 코드 보기import * as THREE from "three";/* 주제: 브라우저 창 사이즈 변경에 대응하기 */export default function example() { /* Renderer 만들기 : html에 캔버스 미리 만들기 */ const canvas = document.querySelector("#..