Never give up

최근에 이것저것 토이 프로젝트를 만들어봤는데 정리할 시간이 없어서 공유를 못해드리고 있는거 같습니다 일단 작업물들 간단히 gif 보여드리고 정리 후 하나씩 업로드 해보도록 하겠습니다 작업물1. Code editor(포스트 완료) jsfiddle, codepen 등 코드 에디터 및 화면에 결과 출력, console 출력 등 기능등이 들어간 예제 1. react component string을 렌더링 2. textarea에 highlight 3. iframe console을 parent에 표시 4. +@(textarea shortcut) 정도의 작업물인데, 생각보다 고민해야될 요소가 많은거 같았습니다 작업물2. 3D Earth thrree js, fiber를 이용해서 지구 구현 및 2d - 3d 좌표 맵핑 ..

전에 언급한 Fiber를 한번 사용해봤는데 생산성이 어마어마하게 올라갈 수 있겠다는 생각이 들었습니다 그럼 바로 예제로 들어가보겠습니다 index.tsx import { Canvas } from "@react-three/fiber"; import React from "react"; import Box from "./Box"; import Camera from "./Camera"; const FiberExample = () => { return ( ); }; export default FiberExample; Fiber에 정의되어있는 Canvas 태그 내부에 Camera, light, Box(mesh) 등을 넣어주면 되는데 scene에 add하는것과 동일한 맥락으로 보시면 됩니다 Camera.tsx imp..

GLTF는 크로노스 그룹에서 만든 표준으로 모델, 애니메이션, 바이너리, 텍스쳐 등을 지정해주는 파일 포맷으로 json 형태로 되어있는 파일입니다 (링크 : https://ko.wikipedia.org/wiki/GlTF) 크로노스 그룹에서 샘플로 만들어놓은것을 토대로 한번 예제를 만들어봤습니다 (샘플 : https://github.com/KhronosGroup/glTF-Sample-Models/tree/master/2.0) use_gltf.ts import { useEffect, useRef } from "react"; import * as Three from "three"; import { OrbitControls } from "three/examples/jsm/controls/OrbitControls..

이번에는 mesh에 이벤트를 넣어주는 작업을 해봤는데 html에서 사용하던 onClick이나 mouseEnter 같은 이벤트를 따로 걸어줄 수 없어서 eventListener를 걸어서 사용했고, 3d에서는 조금 더 복잡한 방법으로 사물의 위치를 추적해야되는거 같습니다 그래서 raycaster를 사용할텐데 자세한 내용은 아래 링크를 참고해주세요 (링크 : https://threejs.org/docs/#api/en/core/Raycaster) 화면부분은 간단한 div에 ref만 할당하는 부분으로 동일합니다 use_raycasting.ts import { useEffect, useRef } from "react"; import * as Three from "three"; const useRaycasting =..

이번에는 계기판을 한번 만들어봤는데 계기판을 영어로 뭐라 표현하면 좋을까 고민하다가 그냥 게이지로 했습니다 index.tsx import React, { useEffect } from 'react'; import util from 'src/util/common_util'; import CommonBtn from 'src/components/common_btn/common_btn'; import { useGauge } from 'src/custom_hooks'; const Gauge = () => { const { ref, setValue, resetCamera } = useGauge(); useEffect(() => { const interval = setInterval(() => { setValue(u..

Three js를 다시 시작한 기념(?)으로 간단한 예제들로 시작을 했고 추후에 참고가 되기를 바라며 포스팅을 시작합니다 (사실 필자가 까먹을거 대비용으로..) 먼저 공홈에 나와있는 기본 예제+@를 시작으로 하면서 개념들을 집고 넘어갈 예정입니다 (기본 예제 링크 : https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene) index.tsx import React from 'react'; import { useBasic } from 'src/custom_hooks'; const BasicExample = () => { const { ref } = useBasic(); return ( ); }; export default Ba..