> Frontend/ThreeJS
-
TIL-2024.03.03 - 3js - Light> Frontend/ThreeJS 2024. 3. 3. 23:39
------- Light // SECTION:: Light const directionalLight = new THREE.DirectionalLight(0xf0f0f0, 1); // MeshBasicMaterial 사용 시, 안보임 directionalLight.position.set(-1,2,3); const ambientLight = new THREE.AmbientLight(0xf0f0f0, 1); // MeshBasicMaterial 사용 시, 안보임 ambientLight.position.set(-1,2,3); scene.add(directionalLight, ambientLight) // MeshBasicMaterial을 사용할 때 광원이 보이지 않음. // MeshBasicMaterial은 빛..
-
TIL-2024.03.02 - 3js - 기초 Scene, Camera, renderer> Frontend/ThreeJS 2024. 3. 2. 17:26
import * as THREE from "three"; window.addEventListener("load", () => { init(); }); const init = () => { // SECTION:: SCENE const scene = new THREE.Scene({}); // SECTION:: Camera const camera = new THREE.PerspectiveCamera( 75, //field-of-view > extent of the scene that is seen on the display at any given moment window.innerWidth / window.innerHeight, // aspect ratio > width of the element divide..
-
TIL-2024.03.01 - Three.JS 기초> Frontend/ThreeJS 2024. 3. 1. 21:50
------- Three.JS 기본 구성 요소 1) Scene(화면 구성 요소) > container that holds all the objects, lights, and cameras in a 3D environment. It serves as the canvas where you place your 3D elements. 2) Camera (카메라): 만들어진 scene을 camera에 담음 > The Camera determines the viewpoint through which you observe the scene. > There are different types of cameras, such as PerspectiveCamera and OrthographicCamera 3) Rendere..