티스토리

૮( • ·̫ - )ა ♡₊˚

검색하기

블로그 홈

૮( • ·̫ - )ა ♡₊˚

soolovepat.tistory.com/m

Soozinyy 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

Three.js 시작하기 07 _마우스 클릭 이벤트 (좌표) const x = (e.clientX / window.innerWidth) * 2 - 1; const y = -((e.clientY / window.innerHeight) * 2 - 1); Three.js는 WebGL을 기반으로 하는데, WebGL은 절대 좌표가 아닌 정규화된 좌표를 사용하여 화면을 그리기 때문에, 클릭 또는 마우스 이동과 같은 이벤트의 좌표를 위와 같이 정규화된 값으로 변환해야 한다. const newPosition = new THREE.Vector3(0, 1, 0); const rayCaster = new THREE.Raycaster(); renderer.domElement.addEventListener("pointerdown", (e) => { const x = (e.clientX .. 공감수 0 댓글수 0 2024. 1. 16.
Three.js 시작하기 06 _모델링 파일 불러오기 (.glb 파일) .glb 파일을 불러오기 위해서 GLTFLoader를 활용한다. import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"; // ( 이하 생략 ) // GLTF 파일 업로드 const gltfLoader = new GLTFLoader(); // gltfLoader.load("/dancer.glb", (gltf) => { // const charactor = gltf.scene; // charactor.position.y = 0.8; // charactor.scale.set(0.01, 0.01, 0.01); // scene.add(charactor); // }); // 비동기 const gltf = await gltfLoader.loadAsyn.. 공감수 0 댓글수 0 2024. 1. 14.
Three.js 시작하기 05 _Shadow 그림자 생성 가능한 Light와 그림자 생성 가능한 Mesh가 만났을 때 Shadow를 만들 수 있다. 그림자가 생기지 않는 Light 3가지 - AmbientLight: 모든 객체를 동일하게 비춘다. 방향이 없다. - HemispherLight: 장면 바로 위에 위치. 하늘빛. - RectAreaLight: 직사각형 평면의 면 전체에 균일하게 빛을 방출한다. 밝은 창, 스트립 조명과 같은 광원을 시뮬레이션하는 데 사용. 또 렌더시 아래 코드가 있어야 그림자가 렌더링된다. renderer.shadowMap.enabled = true; 이외에도 다양한 shadowMap 기능이 있다. https://threejs.org/docs/index.html#api/en/renderers/WebGLRenderer.sh.. 공감수 0 댓글수 0 2024. 1. 11.
Three.js 시작하기 04 _마우스로 도형 움직이기 : OrbitControls Control 중 OrbitControls을 사용하여 도형을 움직이도록 할 것이다. OrbitControls은 정확히 말하면, 도형이 아닌 카메라가 도형 주위를 움직일 수 있도록 한다. import { OrbitControls } from "three/addons/controls/OrbitControls.js"; // 생략 const orbitControls = new OrbitControls(camera, renderer.domElement); orbitControls.update();// camera에 변화가 있다면 반드시 update() 해야 한다 // 생략 const render = () => { renderer.render(scene, camera); requestAnimationFrame(re.. 공감수 0 댓글수 0 2024. 1. 7.
Three.js 시작하기 03 _Geometries, Materials, Lights Geometries 도형에 관련된 코드는 공식 홈페이지에 자세히 나와 있으며, 시각적인 UI를 통해 조절하며 값을 정할 수 있다. three.js docs threejs.org Materials, Lights Materials 과 Lights 도 공식 홈페이지에 유형별 안내되어 있으며, 어느정도 숙지해 놓는 것이 필요할 때 찾아 쓰기 좋을 것 같다. Materials 중 Lights의 영향을 받는 것이 있고 받지 않는 것이 있는데, 영향을 받을 경우 Lights를 설정하지 않았을 때 화면에서 도형이 보이지 않는다. 당황하지 말고 Lights를 설정해보자. Object3D three.js에 있는 대부분의 개체에 대한 기본 클래스이며, 3D 공간에서 개체를 조작하기 위한 속성 및 메서드 집합을 제공한다. t.. 공감수 0 댓글수 0 2024. 1. 7.
Three.js 시작하기 02 _resize 이벤트 기본적인 세팅을 마쳤을 때 화면 조절을 하면 화면 비율이 되돌아 오지 않거나, 도형 비율이 깨지는 문제가 발생한다. 해결하기 위해 resize 이벤트 리스너를 추가해보자. window.addEventListener("resize", () => { renderer.setSize(window.innerWidth, window.innerHeight); camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); // 매개변수를 변경한 후에는 updateProjectionMatrix()를 호출하여 변경사항을 적용 renderer.render(scene, camera); }); renderer.setSize와 함께 .. 공감수 0 댓글수 0 2024. 1. 6.
Three.js 시작하기 01 _장면 만들기 scene, camera, renderer 3가지가 필수적으로 존재해야 한다. ▪️scene const scene = new THREE.Scene(); ▪️camera 1. PerspectiveCamera (: 관점카메라) const camera = new THREE.PerspectiveCamera(fieldOfView, aspectRatio, near, far); - attribute field of view : 표시되는 장면의 범위로 각도 단위의 값. aspect ratio : 항상 요소의 너비를 높이로 나눈 값을 사용. 그렇지 않으면 이미지가 찌그러져 보인다. near : camera에서 가장 가까운 object 지점. near 값보다 camera에서 더 가깝다면 렌더링 되지 않는다. far : c.. 공감수 0 댓글수 0 2023. 12. 21.
npm과 npx json-server install 에러를 해결하다가 우연히 마주친 npx에 대해 이야기해보려고 합니다. https://soolovepat.tistory.com/29 json-server: command not found #npx json 서버 첫 공부시간입니다 ! 시작하자마자 에러가 뜨고 마는데요... package.json을 보면 설치는 분명 되었는데, 왜 이런 걸까요 ? 결론은 이 명령어로 깔끔하게 해결 ! 참고자료 npx json-server --watch d soolovepat.tistory.com npm과 비슷한 npx. 도대체 뭐하는 녀석일까요? npx = '일회성 실행 도구' npx는 npm(Node Package Module) 5.2.0 버전부터 새롭게 추가된 도구입니다. 기존에는 npm.. 공감수 0 댓글수 0 2023. 7. 4.
props와 state 📌 props props 기본 개념 컴포넌트끼리의 정보교환 방식이며, 부모 컴포넌트가 자식 컴포넌트에게 물려준 데이터를 의미한다. props는 아래와 같은 특징을 가진다. 반드시 위에서 아래로 흐른다. [부모] -> [자식] 방향으로만 (단방향) 흐름 * 같은 레벨의 형제 컴포넌트에서도 데이터 공유 불가 반드시 읽기 전용으로 취급하며, 컴포넌트 내부에서 변경하지 않는다. // props 부모 -> 자식 정보 전달 // 부모로부터 정보 전달받음 function Son(props) { // props 객체 형태로 정보를 받아옴 console.log(props.motherName) // 이영애 return 나는 {props.motherName}의 아들이에요 // 나는 이영애의 아들이에요 } // 자식에게 정보.. 공감수 0 댓글수 0 2023. 6. 24.
JavaScript ES5/ES6 문법 차이 JavaScript의 ES란? JavaScript를 공부한다면 누구나 ES6라는 것을 들어봤을 것이다. 여기서 ES란 ECMAScript의 줄임말로, Ecma International이라는 기구에서 정한 표준화된 JavaScript 언어 명세. 즉 약속이다. 뒤에 붙는 숫자들을 버전을 뜻한다. 2023년 기준으로 ES14까지 나왔지만, ES6(ES2015)가 가장 화두가 되는 이유는 명세 내용에 가장 큰 변화가 있었기 때문이다. ES6(2015) 어떤 기능이 추가되었나? 1. let, const 기존의 var 키워드는 함수 레벨 스코프를 가지며 암묵적 재할당이 가능하였다. 이러한 호이스팅(hoisting) 현상으로 인해 발생되는 side effect를 최소화 하기위해 블록레벨 스코프를 가진 let, co.. 공감수 0 댓글수 1 2023. 6. 18.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.