IT & Art

Character Creator 3를 포팅합니다. Base Hair Extra Remesh Face Hair Animation Remarks Cartoon Character Designer Toon Hair - - OK - OK 125MB Yes cloth broken - solved by conforming in CC3. 90MB Kids & Teens on Campus (Cartoon Character) No OK OK OK 96MB Headshot Hair Builder - - OK OK OK hair white. 125MB Skingen - - - - failed to load. 100MB LOD - - OK skin black. 40MB Human Anatomy Prime Hair - - OK ..

Github : Demo React 메타버스 웹앱 시리즈입니다. 메타버스 앱 - 1. 3D 파일 업로드 메타버스 앱 - 2. 배경, 건물 그리고 1인칭 시점 메타버스 앱 - 3. 캐릭터 메타버스 앱에 캐릭터를 추가해 봅시다. 캐릭터 다루기는 좀 복잡한데, 먼저 간단한 소개 영상을 준비했어요. Character on Three.js 캐릭터는 Character Creator 3를 사용해서 만들어 FBX로 export했어요. 준비된 FBX가 정상 동작하는지 먼저 three.js 에디터에서 테스트해 볼 텐데요, 에디터에서 File - Import - FBX를 선택합니다. 잘 로딩되는데, 머리카락이 좀 이상하네요. 속성 중에 Depth Write를 비활성화해 보면, 아래 스크린샷처럼 헤어가 제대로 나오네요. 헤어..

Github : Demo React 메타버스 웹앱 시리즈입니다. 메타버스 앱 - 1. 3D 파일 업로드 메타버스 앱 - 2. 배경, 건물 그리고 1인칭 시점 메타버스 앱 - 3. 캐릭터 지난 시간에는 메타버스 앱에서 사용할 3D 파일을 업로드하는 기능을 만들었습니다. 이번 편에서는 업로드된 배경과 건물을 출력하고 1인칭 시점으로 돌아다녀 보겠습니다. 아래 결과처럼 말이죠. 아래와 같이 기능별로 나눈 5개 컴포넌트를 만들어 viewer/ 폴더 안에 넣고 사용해 봅시다. Viewer.js: 웹 3D를 구성하는 scene, camera, renderer 및 1인칭 시점 컨트롤러 등 전체 구성을 포괄하는 뷰어 컴포넌트 Decorator.js: 배경, 빛(조명), 바닥 등 렌더링 환경을 구성하는 컴포넌트 Worl..

Github : Demo React 메타버스 웹앱 시리즈입니다. 메타버스 앱 - 1. 3D 파일 업로드 메타버스 앱 - 2. 배경, 건물 그리고 1인칭 시점 메타버스 앱 - 3. 캐릭터 요즘 핫한 메타버스, React 웹앱으로 간단히 만들어 봅시다. 이번 편에서는 React 앱을 만들고 3D 파일을 업로드해서 로딩하는 것까지 해 볼 거에요. React 앱 준비 기초 내용이지만, 간단히 복습해 봅시다. Create-react-app으로 앱을 만들어 줍니다. $npx create-react-app metaverse UI 라이브러리 Reactstrap을 설치해 줍니다. $npm i -save reactstrap bootstrap index.js에 bootstrap.css를 import합니다. import 'b..

React 3D 웹앱 Basic 시리즈입니다. React 3D 웹앱 - 1. 개요 React 3D 웹앱 - 2. Three.js React 3D 웹앱 - 3. 3D 모델 React 3D 웹앱 - 4. 3D 뷰어 Github 지난 편에서는 3D 앱에 넣을 애셋(재료)들을 구해봤습니다. 애셋들을 이용해서 React 3D 웹앱을 만들어 봅시다. 오늘의 목표 위와 같은 구성으로 앱을 만들어 볼 텐데요, 우선 create-react-library 패키지를 사용해서 React 라이브러리를 만듭니다. create-react-library react3d 애셋들은 create-react-library로 자동 생성된 example 앱의 public 폴더 안에 넣습니다. 3D 캐릭터는 public/character/, HD..

React 3D 웹앱 Basic 시리즈입니다. React 3D 웹앱 - 1. 개요 React 3D 웹앱 - 2. Three.js React 3D 웹앱 - 3. 3D 모델 React 3D 웹앱 - 4. 3D 뷰어 Github 지난 편에서는 three.js를 이용해서 3D 박스가 나오는 간단한 웹앱을 구현해봤습니다. 이제 예쁜 배경도 넣고 멋진 건물이나 사물, 3D 캐릭터 등을 넣어볼 텐데요, 그 전에, 맛있는 음식을 만드려면 좋은 식재료가 필요하듯이, 멋진 3D 웹앱을 만드려면 먼저 앱에 넣을 3D 모델이나 배경 이미지 등이 필요하겠죠. 오늘은 기초 재료 (1)배경 이미지 (2)사물들 (3)캐릭터를 얻는 방법에 대해 소개합니다. 배경이미지 웹 3D에서 배경이미지는 사방을 여러 각도의 이미지로 둘러싼 스카이..

React 3D 웹앱 Basic 시리즈입니다. React 3D 웹앱 - 1. 개요 React 3D 웹앱 - 2. Three.js React 3D 웹앱 - 3. 3D 모델 React 3D 웹앱 - 4. 3D 뷰어 Github 이전 시간엔 React 개발 환경과 React 앱 구조에 대해 알아봤습니다. 이번 시간에는 3D를 그려봅니다. 3D 기술을 단번에 이해하기는 쉽지 않아요. 그렇다고 이론만 깊게 들여다 보면 질려버리죠. 매일 조금씩 꾸준히 공부하다 보면 질리지 않고 어느새 3D에 익숙해진 당신을 보게 될 겁니다. 저의 미흡한 시리즈를 보면서 따라하는 것도 좋은 방법이겠네요! 예제 코드(full version) Three.js 오늘의 재료는 three.js 라는 자바스크립트 라이브러리인데요, 웹에서 3D..

React 3D 웹앱 Basic 시리즈입니다. React 3D 웹앱 - 1. 개요 React 3D 웹앱 - 2. Three.js React 3D 웹앱 - 3. 3D 모델 React 3D 웹앱 - 4. 3D 뷰어 Github 빠르고 간결하게 React 기반 3D 웹앱을 만들어 봅시다. 먼저 개발환경을 설정합니다. Node.js 설치 Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 위 페이지에서 최신 LTS 설치하시면 됩니다. (v14.60.0, 2021년 3월 기준) Tip> Node.js는 자바스크립트를 실행 가능한 소프트웨어 플랫폼입니다. React는 자바스크립트 라이브러리로 알려져 있지..