★☆ 이 글은 Three.js journey 강의를 통해 작성하게 되었습니다 ☆★   👇 1탄에서 이어지는 내용입니다 [ #9 ] ThreeJS의 Texture - 1탄★☆ 이 글은 Three.js journey 강의를 통해 작성하게 되었습니다 ☆★    🍀 Texture 이란?Texture은 간단히 말하자면,Geometry의 표면을 감싸는 이미지..! 라고 할 수 있다.하지만 이건 간단히 말한 것whrmawn123.tistory.com  🍀 Texture 변형[ 🌳 Repeat ]const colorTexture = textureLoader.load('/textures/minecraft.png');colorTexture.colorSpace = THREE.SRGBColorSpace;// Repea..

★☆ 이 글은 Three.js journey 강의를 통해 작성하게 되었습니다 ☆★    🍀 Texture 이란?Texture은 간단히 말하자면,Geometry의 표면을 감싸는 이미지..! 라고 할 수 있다.하지만 이건 간단히 말한 것이고...실제로는 다양한 타입의 Texture들이 존재하고 있다. João Paulo의 'Door Texture'를 통해 알아보쟈!Color(or Albedo)가장 간단한 TextureTexture의 픽셀만 가져와 Geometry에 적용 AlphaTexture의 흰색은 보이고, 검은색은 보이지 않는 부분임을 명시grayScale의 TextureHeightVertex를 이동하여 약간의 부조(튀어나온 느낌)를 만듦Height Texture를 활용하기 위해선, 적절한 Subdiv..

★☆ 이 글은 Three.js journey 강의를 통해 작성하게 되었습니다 ☆★   시작하기 전, 1탄을 안보신 분들이라면..꼭꼭! 보고 오십셔!! 이전 내용과 이어지니께!!👇 ThreeJS의 Debug UI - 1탄 [ #8 ] ThreeJS의 Debug UI - 1탄★☆ 이 글은 Three.js journey 강의를 통해 작성하게 되었습니다 ☆★   우리는 ThreeJS 프로젝트를 진행하면서,UI를 Debug하기 위한 방법이 절실히 필요합니다!아직 딱히 필요성을 느끼시지 못하셨whrmawn123.tistory.com  🍀 Geometry 조정우리가 Geometry를 생성할 때 사용했던 코드.. 기억 나시나요?const geometry = new THREE.BoxGeometry(1, 1, 1, 2..

★☆ 이 글은 Three.js journey 강의를 통해 작성하게 되었습니다 ☆★   우리는 ThreeJS 프로젝트를 진행하면서,UI를 Debug하기 위한 방법이 절실히 필요합니다!아직 딱히 필요성을 느끼시지 못하셨더라도,한번 알아두시면 이후에 큰 도움이 될거에요~!이를 위해 만들어진 Debug UI 라이브러리들이 있습니다!dat.GUIlil-guicontrol-panelControlKitUilTweakpaneGuifyOui위 중에서 가장 많이 사용하고, 비교적 사용법이 간단한 'lil-gui'를 사용해 봅시다!  🍀 Lil-gui 란?lil-gui에게는 부모격이 되는 라이브러리인 Dat.GUI가 있습니다실제 옛날에는 Dat.GUI가 평균적으로 많이 사용되었습니다.하지만, 유지보수를 하지 않게 되자 점..

★☆ 이 글은 Three.js journey 강의를 통해 작성하게 되었습니다 ☆★   🍀 나만의 Geometry 만들기직접 점들을 설정해서 도형을 만들고 싶다구요?BufferGeometry를 사용해보세요!하지만 꽁짜는 아닙니다..!BufferGeometry를 사용하려면 준비물이 있습니다!바로 Positions이죠! 점들!위 점들은 'float의 타입을 가진다' 라는 특징이 있습죠이를 위해서 사용해야하는 메서드가 있으니...바로 Float32Array입니다!요 친구는 오직 실수(float)만을 요소로 갖는 배열을 만들어주는 메서드입니다!또한, 배열의 길이가 고정되어 있다는 특징이 있죠..!// 메서드 호출시, 바로 값 지정const positionsArray = new Float32Array([ 0..

★☆ 이 글은 Three.js journey 강의를 통해 작성하게 되었습니다 ☆★   👇 기본 ThreeJS의 틀은 아래 게시글을 참고하세용 [ #1 ] ThreeJS의 기본 틀★☆ 이 글은 Three.js journey 강의를 통해 작성하게 되었습니다 ☆★ ThreeJS의 기본적인 틀 알아보자 호우!※ 물론 VanillaJS의 코드로..  🍀 코드코드 먼저 드리는게 인지상정// script.jsimport * as THREwhrmawn123.tistory.com  🍀 Geometry란?ThreeJS에서 Geometry는 Vertice(정점)과 Face(면)으로 이루어져 있습니다.이를 통해 ThreeJS는 3개의 Vertice를 이어 만든 Face를 칠하는 형식으로 Mesh를 만들고 있습니다.Geo..