개발 & IT 정보

[R3F] React에서 3D Model 보여주기 (feat. gltf)

[R3F] React에서 3D Model 보여주기React-three-fiber와 React-three-drei을 통해 3D 파일을 import하여 보여줄 것이다.1. 3D 파일 다운로드3D 파일이 없다면 아래 사이트에서 다운로드한다.https://sketchfab.com/feed Log in to your Sketchfab account sketchfab.com원하는 이미지 선택 -> gltf 파일 다운로드 클릭gltf를 받으면 bin, gltf포멧형식의 파일을 볼 수 있다 2. 프로젝트 생성CRA로 프로젝트를 생성한다npx create-react-app r3fProject3. 3D 파일 Public폴더에 추가생성된 프로젝트 Public 폴더에 3D파일을 넣는다bin파일명과 gltf buffers ur..

2024.05.12 - [frontend] - [three.js 기초 #2] Scene [three.js 기초 #2] Scene2024.05.12 - [frontend] - [three.js 기초 #1] Geometry [three.js 기초 #1] Geometry2024.05.12 - [frontend] - [three.js 기초 #0] 시작하기 & 환경 세팅 [three.js 기초 #0] 시작하기 & 환경 세팅※ 순수 자바스크립코드와 threeeunjitech.tistory.com[three.js 기초 #3] MaterialMaterial 종류공식문서: https://threejs.org/docs/index.html#api/en/materials/LineBasicMaterial three.js doc..

2024.05.12 - [frontend] - [three.js 기초 #1] Geometry [three.js 기초 #1] Geometry2024.05.12 - [frontend] - [three.js 기초 #0] 시작하기 & 환경 세팅 [three.js 기초 #0] 시작하기 & 환경 세팅※ 순수 자바스크립코드와 three 라이브러리를 사용한 기초 실습입니다. 유튜버 GIS DEVELOPER 님의 강eunjitech.tistory.com[three.js 기초 #2] Scene1. Scene이란Scene은 3D 장면을 구성하는 모든 요소들을 포함하는 컨테이너 역할을 합니다.3D 오브젝트, light, cameraScene 기본 생성 코드const scene = new THREE.Scene();Rendere..

2024.05.12 - [frontend] - [three.js 기초 #0] 시작하기 & 환경 세팅 [three.js 기초 #0] 시작하기 & 환경 세팅※ 순수 자바스크립코드와 three 라이브러리를 사용한 기초 실습입니다. 유튜버 GIS DEVELOPER 님의 강의(https://youtu.be/vjKuk5Vp93k?si=aoRRPljQ3pKDDJO8 )를 보고 정리한 내용입니다.1. Three.js 란?WebGL 위에 구eunjitech.tistory.com[three.js 기초 #1] Geometry1. Geometry란?Geometry는 메쉬, 선, 점 등의 기하학적 형태를 표현하는 데 사용되는 three 핵심 요소모든 정보 데이터들은 하나로 모여 GPU에 빠르게 전달됨2. Geometry 종류B..

※ 순수 자바스크립코드와 three 라이브러리를 사용한 기초 실습입니다. 유튜버 GIS DEVELOPER 님의 강의(https://youtu.be/vjKuk5Vp93k?si=aoRRPljQ3pKDDJO8 )를 보고 정리한 내용입니다.1. Three.js 란?WebGL 위에 구축된 고수준의 Javascript 라이브러리.3D 그래픽을 쉽게 웹 브라우저에 표시하고, 저수준의 WebGL을 직접 다룰 필요 없이 3D 장면, 모델, 카메라, 애니메이션 등을 구축할 수 있음.WebGLWeb Graphics Library 는 웹 브라우저에서 실시간 2D 및 3D 그래픽을 렌더링하기 위한 저수준의 그래픽 API.OpenGL ES의 웹 기반 버전으로, HTML5의 요소를 활용하여 GPU 가속을 통한 이미지와 애니메이션..

이전 글 보러가기 👉 [React Native #02] Expo 프로젝트 생성 [React Native #02] Expo 프로젝트 생성 현재 날짜 기준(2024.02.23)으로 작성된 글입니다. 버전이 다를 수 있는 점 참고 바랍니다. 이전 글 보러가기 👉 [React Native #01] React Native란 무엇일까 [React Native #01] React Native란 무엇일까 [React Native # jamjamtest.com [React Native #03] ScrollView / FlatList 이번 포스팅에는 핵심 컴포넌트의 기능 몇 가지를 소개해보고자 합니다. 1. ScrollView 스크롤 가능한 속성을 제공하며, 스크롤 영역은 부모 컴포넌트에서 제공합니다. ... //스크롤 ..

[React Native #01] 기초 React Native란? 네이티브 모바일 앱을 제작하기 위한 React 기능 기반의 오픈 소스 프레임워크 React 구성 요소와 동일한 API 구조를 사용 → React에 대한 사전지식이 있으면 유리하게 사용할 수 있음 React.js + React Native → Real Native Mobile Apps (iOS / Android) UI, 로직이 처리되는 방식 UI 요소(View, Text..): Native에 컴파일됨 로직(javascript 코드): 컴파일되지 않음 React Native 내장 컴포넌트 코드 구성 const App = preops => { return ( Hello world! ); }; 해당 코드는 Native App 코드로 컴파일되어 R..

이전 글 보러 가기 👉 [MBTI 테스트 사이트 만들기 #4] 테스트 로직 만들기 (feat. 울집 고양이) [MBTI 테스트 사이트 만들기 #5] 카카오톡 공유하기 버튼 추가하기(React) 친구에게 테스트 결과를 공유하도록 하기 위해서 카카오 공유 API를 활용하려고 합니다. 우선 카카오톡 콘솔 사이트로 가서 어떤 API가 있는지 확인해 보겠습니다. kakao developers > 문서 https://developers.kakao.com/docs/latest/ko/index Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 카카오 API를 ..

이전 글 보러 가기 👉 [MBTI 테스트 사이트 만들기 #3] 테스트 질문지 만들기 [MBTI 테스트 사이트 만들기 #4] 테스트 로직 만들기 이전 포스팅에 이어서 미리 질문과 답, 그리고 16가지 결과 페이지? 이미지를 만들었다. 처음 만든 mbti이어서 그런지 질문과 답을 구상하는 부분에서 가장 시간이 오래 걸렸다. ㅠㅠ 간단한 css를 추가한 결과물은 아래와 같다. 필요한 페이지는 모두 만들었으니, 이제 답을 선택했을 때 다음 질문으로 넘어가는 로직과, 결괏값을 통해 각 결과 페이지로 들어갈 수 있게 로직을 짜야한다. Quiz 화면 Quiz 컴포넌트에서 현재 해당하는 테스트의 정보(지금은 고양이 MBTI테스트)를 props로 받는다. props정보는 아래와 같다. export const datas ..

프론트엔드 개발 코딩 강의 사이트 추천 3(번외 사이트) 프론트엔드 개발 공부 사이트들을 정리해 보았습니다. 처음 개발 공부를 시작하시는 분들께 도움이 되기를 바랍니다! 1. 생활코딩 (https://opentutorials.org/course/1) 생활코딩 hello world 생활코딩의 세계에 오신 것을 환영합니다. 생활코딩은 일반인들에게 프로그래밍을 알려주는 무료 온라인, 오프라인 수업입니다. 어떻게 공부할 것인가를 생각해보기 전에 왜 프로그 opentutorials.org 개발 입문으로 추천하는 사이트입니다. Web, Database, 언어, 클라이언트, 서버, 데이터 과학, 개발도구, 프로젝트 관리 카테고리로 나누어져 있습니다. 모든 콘텐츠들은 무료로 제공하고 있습니다. (유튜브 영상) 유료강의..