고독한 쵸이의 도쿄생활

이번 글에서는 일반적으로 잘 사용되지는 않지만, VR/AR개발 등에서 주로 사용되는 StereoCamera에 대해 알아보자. 이전 글은 아래를 참고해 주세요. 【React Three Fiber】#03 카메라: Orthographic Camera, OrbitControls 【React Three Fiber】#03 카메라: Orthographic Camera, OrbitControls 이번 글에서는 React Three Fiber의 카메라 중 Orthographic Camera, 그리고 카메라를 제어할 수 있는 OrbitControls에 대해 작성해보고자 한다. 이전 글은 아래를 참고해 주세요. 【React Three Fiber】#02 카메라: Pe solitary-choi.tistory.com 서론 이번 ..

이번 글에서는 React Three Fiber의 카메라 중 Orthographic Camera, 그리고 카메라를 제어할 수 있는 OrbitControls에 대해 작성해보고자 한다. 이전 글은 아래를 참고해 주세요. 【React Three Fiber】#02 카메라: Perspective Camera 【React Three Fiber】#02 카메라: Perspective Camera 이번 글에서는 React Three Fiber의 카메라 중 Perspective Camera에 대해 알아보고자 한다. 이전 글은 아래를 참고해 주세요. 【React Three Fiber】#01 초기설정, 튜토리얼 【React Three Fiber】#01 초기설정, 튜토 solitary-choi.tistory.com Orthogr..

이번 글에서는 React Three Fiber의 카메라 중 Perspective Camera에 대해 알아보고자 한다. 이전 글은 아래를 참고해 주세요. 【React Three Fiber】#01 초기설정, 튜토리얼 【React Three Fiber】#01 초기설정, 튜토리얼 React Three Fiber를 선택한 이유 현재 일본 파견회사에서 약 4년 정도 일하고 있는데, 안 그래도 낮은 연봉이 인상도 잘 안될뿐더러, 한심한 사장을 보고 앞으로의 비전도 없다고 느꼈기 때문에 (대 solitary-choi.tistory.com Perspective Camera 원근 카메라. 사람의 시야에 가장 근접한 카메라이며, 카메라에서 멀리 떨어져 있을수록 물체가 작게 보인다. React Three Fiber에서 원근 ..

React Three Fiber를 선택한 이유 현재 일본 파견회사에서 약 4년 정도 일하고 있는데, 안 그래도 낮은 연봉이 인상도 잘 안될뿐더러, 한심한 사장을 보고 앞으로의 비전도 없다고 느꼈기 때문에 (대부분의 파견회사가 여기에 해당되겠지만) 전직을 준비하려고 웹 포트폴리오를 작성하는 중이다. 그런데 어떻게 포트폴리오를 작성하면 될까 하고 구글링을 하던 중 아래 사이트를 발견했다. https://bruno-simon.com/ Bruno Simon - Creative developer Creative developer living in Paris, freelancer, former lead developer at Immersive Garden, former developer at Uzik and tea..

오늘은 React Three Fiber에서 리사이징하는 방법에 대해서 작성해보고자 한다. 이전 글은 아래를 참조해주세요. 【React Three Fiber】#05 카메라 설정&제어하기(Orthographic Camera, OrbitControls) 이번 글에서는 React Three Fiber의 카메라 중 Orthographic Camera, 그리고 카메라를 제어할 수 있는 OrbitControls에 대해 작성해보고자 한다. 이전 글은 아래를 참고해 주세요. 【React Three Fiber】#04 카메.. solitary-choi.tistory.com 브라우저 화면 크기에 맞춰 렌더링 하기 일단 App.tsx에서는 현재 화면 크기를 useState 초기값으로 설정한 후, Resizing 컴포넌트에 넘긴..

이번 글에서는 React Three Fiber를 이용해 간단한 애니메이션을 구현해보자. 이전 글은 아래를 참고해주세요. 【React Three Fiber】#02 오브젝트 변형하기 이전 글은 아래를 참고해주세요. 【React Three Fiber】#01 시작하기(초기 설정, 정육면체 렌더링) 【React Three Fiber】#01 시작하기(초기 설정, 정육면체 렌더링) 현재 일본 파견회사에서 3년 이상(4년 차) solitary-choi.tistory.com 2편과 마찬가지로, 이번에도 1편에서 작성했던 Basic.tsx을 복사해 컴포넌트명만 변경해준다. Animation.tsx /* eslint-disable react/no-unknown-property */ import { Canvas } from ..

이번에는 React Three Fiber를 이용해 오브젝트를 이동, 변형하는 방법에 대해 알아보자. 이전 글은 아래를 참고해주세요. 【React Three Fiber】#01 시작하기(초기 설정, 정육면체 렌더링) 현재 일본 파견회사에서 3년 이상(4년 차) 일하고 있는데, 안 그래도 낮은 연봉이 인상도 잘 안될뿐더러, 한심한 사장을 보고 앞으로의 비전도 없다고 느꼈기 때문에 (대부분의 파견회사가 여기 solitary-choi.tistory.com 1편에서 작성했던 Basic.tsx을 복사해, 컴포넌트명만 변경해준다. TransformObject.tsx /* eslint-disable react/no-unknown-property */ import { Canvas } from "@react-three/fi..