어떻게 하면 주사위 값을 가져올 수 있을까 굉장히 고민을 많이 하였다.우선 우리는 모든 Object3D 에는 정점 데이터와 이를 빠르게 계산하여 위치를 표출하기 위한 matrix 데이터가 있다는 것을 알고있다(https://velog.io/@jeong_woo/

three.js 를 사용하여 만든 야추 다이스를 나만의 도메인에 배포해보고 싶었다.그래서 일단 인스턴스를 만들고 Domain 구매를 진행하였다.고정 IP 이다. 뭐 로드 밸런서를 사용하면 해당 ELB 의 고유 IP 를 가지고 사용하니 상관없지만 나는 개인 프로젝트를 하

ERROR: Top-level await is not available in the configured target environment 이 에러는 비동기 처리를 app 전반에 걸쳐서 사용했기 때문에 에러가 발생한다.

Custom follow up camera, Custom pointlock control 커스텀 카메라와 컨트롤을 만들어 PointerLockControls 에 대해 OrbitControls 과 합치고 거기에 lerp 를 주어 조금더 자연스럽게 커스텀하기 위해 각각의

🚗 Car 로 복습 1. 클래스 속성 & 생성자 함수 속성 dynamicBodies THREE.Mesh 와 Rapier.RigidBody 를 쌍으로 저장하는 2차원 배열. THREE.Mesh 의 position 와 quaternion 을 물리 엔진의 데이터( tra

Rapier ImpulseJoint Motors ImpulseJoint 바퀴나 pan 을 만들 때 주로 Body 에 revolute ImpulseJoint 를 사용하여 Joint 한다고 포스팅하였다. Rapier v0.12.0 에서 우리가 사용할 수 있는 Impul

PointerLockControls Three.js 의 PointerLockControls 은 브라우저에 내장된 Pointer Lock API 를 구현한다. PointerLockControls 은 시간 경과에 따른 마우스 움직임(즉, 델타)에 기반한 입력 방법을 제공

Rapier Debug Renderer 말 그대로 디버깅 하기위해 존재한다. Geometry에 맞게 물리 도형이나 colliders를 만들려고 할 때, dimensions, positions, rotations 을 실제로 시각화할 수 없기 때문에 만들기가 까다롭다.

Rapier Rapier 는 물리엔진이다. 강체 힘, 속도, 접촉, 제약 조건 등을 계산하는 데 사용할 수 있는 물리 엔진이다. 시간 경과에 따른 물리 속성과 이벤트만 계산하고 싶다면, 우리는 three.js 가 아닌 다른 물리엔진을 사용할 수 있다. 하지만 우

DRACO Loader DRACO Loader 는 DRACO library 를 압축한 Geometry 를 로드한다. Draco는 3D Mesh 와 point clouds 의 압축 및 압축 해제를 위한 오픈 소스 라이브러리이다. glTF 파일도 DRACO 라이브러리를

GLTF Animations 이제 GLTF 에 저장된 animation 들에 대해 알아보자. 우선 모델을 불러올 건데 원숭이 수잔 처럼 대표 모델을 일단 Mixamo 에서 받아주자. 여기서는 FBX 모델을 받으면 Blender 에서 GLB 파일로 트랜스 파일할 수 있

Makes Animation 애니메이션을 만들어보자. 우선 Lerp 를 알아보기 위한 기본적인 코드를 작성해보자. lerp() MathUtils.lerp() Linear interpolation (선형 보간)을 사용하여 애니메이션을 만들 수 있다. MathUtil

Orbit Controls 우선 Orbit Controls 은 three.js core 의 일부가 아니고 add-on 이다. 또한 three.js 에는 여러 컨트롤러들이 존재한다. camera, control 카메라 객체에는 lookAt() 메서드가, 컨트롤 객체

Raycaster raycasting 클래스는 주로 3D Scene 에서 마우스로 오브젝트를 선택하는 데 사용된다. 레이캐스팅을 사용하면 Scene의 3D Point 에서 Vector 를 생성하고 Vector 가 교차(intersect)하는 오브젝트를 감지할 수 있

GLTF Loader GLTF Loader 는 Scene 에 glTF 모델을 로드하기 위해 존재하는 로더이다. glTF 는 Scene 과 모델의 효츌적인 전송 및 로딩을 위해 특화되어있다. glTF 는 3D 에셋의 크기와 해당 에셋의 압축을 풀고 사용하는 데 필요한

Loading Assets 아래 코드를 보면 모델과 텍스쳐가 따로 로드되었다. 사실 런타임에서 실제로 이미지를 로드하여 모델에 적용하는 경우는 매우 드물다. 보통은 블렌더에서 모델을 만들고 텍스처를 적용한다. 블렌더는 이런 목적에 더 특화되어있다. image 로

Environment Maps 여기 이 Environment Map 이 앞서 언급했듯 Light 보다 StandardMaterial 에 동작에 있어 훨씬 부드럽고 사실성 있다고 언급하였다. 왜냐하면 PBR materials Physically Based Renderin

Shadows castShadows = true 코드가 존재한다면, 광원은 Camera 의 frustums(절두체) 를 관리한다. Frustum 위에서 frusum 이라는 단어가 나왔는데 이는 "시야체(절두체)" 라고 번역할 수 있다. 이는 광원이 조명을 투사하는

Lights Ambient light 엠비언트 라이트는 모든 방향을 동일하게 비춘다. 따라서 phong 과 standard 모두 어떻게 shading 을 계산해줘야할지 모른다. 따라서 MeshStandardMaterial 의 정교한 장점들을 하나도 살리지 못한다.

Materials 메테리얼의 종류는 굉장히 많다. 그리고 앞서 포스팅한 것과 같이 Material은 Geometry 객채를 만들 때 여러번 재사용이 가능하다고 했었다. 그리고 해당 Material 에 변화를 주면 모든 Geometry 도 함께 변한다고 했었다. 우선