three.js
-
side-project) 미래의 지구그래픽스/WebGL 2022. 10. 22. 14:50
Link https://classy-fudge-f9b073.netlify.app/ 메시지가 있는 컨텐츠를 webgl을 활용하여 만들면 재밌겠다는 생각이 들었습니다. 그래픽스 라이브러리 중 하나인 three.js를 활용한 웹페이지 제작에 대한 아이디어는 이미 공식문서 예제에 수없이 많이 나와있습니다. 그 중 내장된 메서드를 활용하여 바다와 하늘을 구현하면 유사자연(?)을 만들 수 있을 것 같아서 환경을 주제로 한 페이지 제작을 시작하게 되었습니다. 페이지에서 뭐가 꿈틀거리니 생동감도 있고 무엇보다 개발하는 입장에서 상상력을 확장시킬 수 있어서 좋은 것 같습니다. 무엇보다 해당 프로젝트를 진행하면서 그래픽스 기술에 대한 관심이 많이 생겼습니다. 그럴려면 opengl을 배우는 수밖에 없겠구나 싶어서 현재는 c..
-
react-three-fiber) 오브젝트 중복 생성 피하기그래픽스/WebGL 2022. 10. 12. 12:54
WebGL에서는 모델 하나하나가 렌더링 시 자원 소모가 때문에 오브젝트의 중복 생성을 아주 금기시하고 있습니다. props의 상태 변화가 일어날 때마다 계속 렌더링 되는 react에서는 신경 쓸 게 한두가지가 아닌 것 같습니다. 그중에 geometry, material의 중복 생성을 피하는 방법을 공식 문서에서 몇 가지 소개하고 있고 이를 적용한 예시를 보도록 하겠습니다. import React, { useRef, useState } from 'react' import { Canvas, useFrame } from '@react-three/fiber/native' function Box(props) { const mesh = useRef(null) const [hovered, setHover] = use..
-
react three fiber + typescript ) glb 애니메이션 타입 정의 오류그래픽스/WebGL 2022. 10. 11. 22:50
타입스크립트를 쓰다 보면 라이브러리 끌어다 쓸 때 매번 타입 문제가 자주 생기는데 이번에도 역시 피해 갈 수 없었습니다. react-three-fiber에서는 정말 편리하게도 glb 파일을 바로 jsx 컴포넌트로코드로 변환해주는 기능을 공식문서에서도 사용하라고 권장하고 있습니다. (npm으로도 설치 가능) https://gltf.pmnd.rs/ GLTF -> React Three Fiber gltf.pmnd.rs 파일을 업로드하고 우측 탭에서 type 체크해주면 type까지 알아서 정의해주는 아주 쿨한 기능이라 쉽게 쉽게 모델을 불러오고 화면에 띄울 수 있습니다. 그런데 바로 쓰고자 할 때 문제에 봉착하게 됩니다. 자동으로 정의해준 타입이 맞지 않다고 뜨네요. 구글링 해보니 다른 이들도 이미 2년 전부터..
-
징검다리 건너기) 프로젝트 회고그래픽스/WebGL 2022. 10. 10. 01:46
📌 바로가기 링크 https://glass-stepping-stone.netlify.app/ 대략 일주일에 걸쳐 저의 첫 번째 WebGL 토이프로젝트 '징검다리 건너기'를 완성시켰습니다. 완성이라기엔 자잘하게 고치고 싶은 부분이 많지만 일단 생각했던 기능들을 다 구현해보는 게 목표였습니다. 게임으로서의 최소한의 기능만 갖춘 후 수정은 이후 계속 공부한 내용을 바탕으로 천천히 해나가면 되니깐요. Three.js를 배운다면 만들어보고 싶었던 프로젝트 중 하나가 게임이었고 마침 인프런에서 평소 좋아하던 개발자님(1분코딩님 최고👍😎)께서 오픈하신 강의가 있어서 기초를 쌓을겸 찾아 듣게 되었습니다. canvas를 가져와 렌더링하고 scene 세팅하는 것부터 camera, light, mesh 같이 한 화면에 갖춰..