Frontend/Three.js

직교 카메라(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..

기본장면 만들기 - Camera

Camera 만들기 src/main.js /* Scene 만들기 */ const scene = new THREE.Scene(); /* 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); 위 내용 전체 코드 내용 import * as THREE from "three"; /* 1. Renderer 만들기 : 동적으로 캔버스 조합하기 */ // const renderer = new THREE..

기본 장면 만들기 - Renderer

패키지 설치 // 패키지 설치 npm i -D @babel/cli @babel/core @babel/preset-env babel-loader clean-webpack-plugin copy-webpack-plugin core-js cross-env html-webpack-plugin source-map-loader terser-webpack-plugin webpack webpack-cli webpack-dev-server npm i three 동적으로 캔버스 조합 html의 canvas 태그를 미리 넣어 진행하는 방법 src/index.html 파일 - canvas 태그 넣기 src/main.css 파일 body { margin: 0; } /* 스크롤 방지를 위함 */ #three-canvas { pos..