분류 전체보기

애니메이션 기본

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, win..

빛(조명) 설정하기

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("#..