Frontend

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

직교 카메라(Orthographic Camera)

직교 카메라 basic/src/main.js import * as THREE from "three"; /* Renderer 만들기 : html에 캔버스 미리 만들기 */ const canvas = document.querySelector("#three-canvas"); const renderer = new THREE.WebGLRenderer({ canvas, antialias: true // 부드러운 효과 }); renderer.setSize(window.innerWidth, window.innerHeight); /* Scene 만들기 */ const scene = new THREE.Scene(); /* Camera 만들기 : Perspective Camera*/ // const camera = new ..

기본장면 만들기 - Mesh

Mesh 만들기 src/main.js import * as THREE from "three"; /* Renderer 만들기 : html에 캔버스 미리 만들기 */ const canvas = document.querySelector("#three-canvas"); const renderer = new THREE.WebGLRenderer({ canvas, antialias: true // 부드러운 효과 }); renderer.setSize(window.innerWidth, window.innerHeight); /* Scene 만들기 */ const scene = new THREE.Scene(); /* Camera 만들기 */ // PerspectiveCamera( fov : Number, aspect : N..