# ThreeJS
Float32Array with Threejs
Geometries 를 공부하는 중에 Float32Array 가 있어서 잠깐 살펴보게 되었다.The Float32Array typed array represents an array of 32-bit floating point numbers in the platform
Threejs - Basic
최근에 three.js 를 통해 UI/UX 를 구현하는 사이트들을 보고서 해당 라이브러리를 익혀보고자 관련 도큐를 찾아보고 샘플 코드들을 찾아보게 되었다. 이를 통해 배운 내용들을 앞으로도 블로그에 포스팅 해볼 예정이다.Three.js 는 WebGL 을 통해 좀 더 편
ThreeJS 구조와 객체, 메소드 정리
씬은 3D 오브젝트들을 배치하는 추상적인 영역이다.씬이 추상적인 이유는 직접 씬을 볼 수는 없기 때문이다.PerspectiveCamera 객체는 씬을 원근법에 기반하여 바라본다.OrthographicCamera 객체는 씬을 직교법에 기반하여 바라본다.카메라로 바라본 씬
ThreeJS Raycasting 구현
ThreeJS로 Raycasting Collision Detection을 구현한 사례를 정리해본다. 게임 개발에 있어 충돌 이벤트는 가장 기초적이다. AABB, OBB, 원 충돌 등 수 많은 충돌 구현 방법이 있지만, 그중에서도 Raycasting을 통해 구현해볼 예
앗! threejs와 React로 취업에 도움되는(?) 포트폴리오를 만들어보자. [실전편 1탄]
오늘은 드디어 orthographic camera를 이용한 포트폴리오의 간단한 세팅을 통해 threejs와 한 층 더 친숙해지는 시간을 가져볼 생각이다.바로 코딩에 착수하는 것이 아니라, 기본적으로 어떠한 구조로 만들 것인지, 또한 중요하게 공부할 만한 포인트는 어떤
앗! threejs와 React로 취업에 도움되는(?) 포트폴리오를 만들어보자. [실전편 intro]
완성된 페이지는 대략 아래와 같은 모습이 될 것이다.포트폴리오 페이지아무튼간 위의 라이브러리와 기술들과 함께 재밌게 구현해 볼 예정이다.!
blazor에서 npm install 사용하기(three js 넣기)
How to use NPM in Blazor - YouTubethree js 를 사용하기 위한 npm install 셋팅을 준비한다.우선 maui blazor 앱을 생성합니다.다음과 같은 창이 생긴다면 잘 만들어 진 것입니다.우선 three js를 사용하면 현제 프로젝
앗! 취업에 도움되는(?)Threejs를 vanila 및 react-three-fiber 버전의 예제와 함께 복습해보자. [코드편 3탄]
코드편 3탄에서는 light(조명), shadow(그림자), material의 빛과 관련된 속성에 대해서 알아보도록 하겠다. 이번에도 역시, 같은 코드를 vanila javascript와 react 두 가지 방식으로 모두 작성해보겠다. vanila javascrip
앗! 취업에 도움되는(?)Threejs를 vanila 및 react-three-fiber 버전의 예제와 함께 복습해보자. [코드편 2탄]
코드편 2탄은 여기서 마무리하고 3탄에서 계속 공부해보자!
앗! 취업에 도움되는(?)Threejs를 vanila 및 react-three-fiber 버전의 예제와 함께 복습해보자. [코드편 1탄]
Threejs를 Vanila Javascript와 React 두 가지 방식으로 모두 실습해보며 기본적인 내용을 학습할 수 있다.
앗! 취업에 도움되는(?)Threejs를 복습해보자. [개념편 3탄](마지막탄)
앞선 2탄에서는 1탄에 이어, 조금은 고급화된 촬영 기술에 대하여 공부했다. 3탄에서는, 나무 블럭 말고도 다양한 형태의 촬영 객체에 대해 알아보고, 움직이는 객체에 대한 촬영기법에 대해서도 알아보겠다. 7가지(scene, camera, renderer, mesh,
앗! 취업에 도움되는(?)Threejs를 복습해보자. [개념편 2탄]
눈 앞에 있는 키보드를 사진찍는다고 했을 때, 사진 속에 예쁘게 담기게 하려면 키보드와 '적절한 거리' 를 유지해야 할 것이며, 너무 과하지 않은 '각도(시야각)'으로 촬영해야 할 것 이다. 또한, 핸드폰을 가로로 들고 찍느냐, 세로로 들고 찍느냐에 따라서도, 가로
앗! 취업에 도움되는(?)Threejs를 복습해보자. [개념편 1탄]
정확한 설명은 자바스크립트 언어로 구현된 WebGL(Web Graphcis Library)이다.threejs가 궁금하다면, 하단의 링크를 눌러 공식문서를 다녀와 보도록하자.<a href='https://threejs.org/docs/index.htmlsc
Threejs) Getting Started
three.js로 무언가를 화면에 띄우려면 scene, camera, renderer 3가지 요소가 필요 합니다.카메라 인스턴스를 생성할 때 사용되는 4가지 인자를 살펴보겠습니다.field of view(FOV) : FOV는 시야각을 나타내며 일반적으로 45도에서 90
glb vs gltf
glb와 gltf는 3d 데이터를 webgl로 불러오는데 많이 사용되는 포맷이다.데이터가 바이너리로 되어 있다.모션 데이터가 같이 묶여있다.데이터가 json형태로 되어 있다.이런차이 때문에 둘 사이에는 용량차이가 발생한다. 사람이 보는거 아니면 glb포맷이 나을것이다.
[THREEJS] localStorage에 image(base64)저장하기
threejs에서 GLB/GLTF에 Texture로 내가 원하는 이미지 파일을 넣은 뒤 localStorage에 저장하고 해당 페이지에 다시 접속 했을 때 해당 이미지가 Texture로 저장이 안됨localStorage에 저장하는 방법localStorage에서 불러오는