오늘도 조으네💜

ThreeJS

화면을 마우스로 회전하고 줌인, 줌아웃하는 방법을 알아보자! 📌 OrbitControls 임포트 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls' 📌 OrbitControls 추가 카메라 세팅 이후에 설정해야 한다. const controls = new OrbitControls(camera, renderer.domElement) 화면을 마우스로 자유자재로 움직이고 확대 축소도 할 수 있다. 줌인/줌아웃의 경우 무한정으로 계속 줌인/줌아웃이 되다보니 화면에서 사라지는 경우가 생긴다. 다음처럼 확대/축소, 줌인/줌아웃을 제한할 수 있다. // 줌인 줌아웃 각도 제한 controls.minDistance = 2 controls...

2023. 7. 31.

ThreeJS

📌 Renderer에 그림자 사용 설정하기 Three.js에서 그림자 표현을 하기 위해서는 우선 렌더러 하단에 renderer.shadowMap.enabled를 true로 설정해 주어야 한다. renderer.shadowMap.enabled = true 위 설정을 해도 아래 이미지와 같이 그림자가 표현되지는 않는다. 추가로 몇 가지를 더 설정해야 한다! 📌 그림자를 받을 오브젝트와 그림자를 표현할 오브젝트 설정하기 빛을 받아 그림자를 표현할 오브젝트에 castShadow를 적용하고, 그림자를 받을 오브젝트에 receiveShadow를 적용한다. 구 형태의 오브젝트의 그림자를 표현할 것이므로 해당 오브젝트에 castShadow를 적용한다. // 구 오브젝트 const geometry1 = new THREE..

2023. 7. 31.

ThreeJS

Three.js에서는 여러 종류의 빛을 제공한다. 그중 몇 가지를 살펴보자! 📌 AmbientLight 전역에서 비추는 빛, 그림자 개념이 없다. const ambientLight = new THREE.AmbientLight(0xffffff, 0.7) // new THREE.AmbientLight(색상코드, 강도) scene.add(ambientLight) 그림자 표현 없이 전체적으로 조명을 비추는 모습으로 표현된다. 📌 DirectionalLight 특정 방향으로 빛을 방출한다. (ex.태양) 이 빛은 그림자가 생길 수 있다. const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5) scene.add(directionalLight) 아래 이..

2023. 7. 22.

ThreeJS

이번에는 3D 도형에 질감(Texture)을 표현해 보자! 우선 구 형태의 3D 도형 네 개를 만들어 로드했다. // 구 도형 추가 const geometry1 = new THREE.SphereGeometry(0.3, 32, 16) const material1 = new THREE.MeshStandardMaterial({ color: 0xeeeeee }) const sphere1 = new THREE.Mesh(geometry1, material1) sphere1.position.x = -2 scene.add(sphere1) const geometry2 = new THREE.SphereGeometry(0.3, 32, 16) const material2 = new THREE.MeshStandardMateri..

2023. 7. 10.

ThreeJS

// 도형 여러개 추가 (생략) const geometry = new THREE.TorusGeometry(0.3, 0.15, 16, 40) const material04 = new THREE.MeshBasicMaterial({ color: 0xff7f00 }) const obj04 = new THREE.Mesh(geometry, material04) scene.add(obj04) 도넛 모양의 도형을 여러 개 추가하였다. 이 도형에 입체감을 주기 위해 빛을 추가해 보자! // 빛 const pointLight = new THREE.PointLight(0xffffff, 1) pointLight.position.set(0, 2, 12) scene.add(pointLight) 빛을 추가했는데 아무런 변화가 없다..

2023. 7. 3.

ThreeJS

Three.js에서 3D 도형을 만드는 방법은 좌표의 점을 이은 선과 면으로 이루어진 도형인 Geometry와 색상, 질감을 표현하는 재질인 Material을 합쳐서 표현한다. 📌 3D 큐브 그리기 BoxGeometry는 주어진 '너비', '높이' 및 '깊이'가 있는 직육면체의 기하학 클래스이다. 생성 시 입방체는 각 모서리가 축 중 하나와 평행한 상태에서 원점의 중심에 배치된다. const geometry = new THREE.BoxGeometry( 1, 1, 1 ); // 도형의 크기 const material = new THREE.MeshBasicMaterial( {color: 0x000000} ); // 도형의 색상 const cube = new THREE.Mesh( geometry, materi..

2023. 7. 3.

ThreeJS

아래의 소스는 보일러 플레이트를 활용하여 진행하였다. 참고 👉 https://github.com/aakatev/three-js-webpack GitHub - aakatev/three-js-webpack: Boilerplate for Three JS project Boilerplate for Three JS project. Contribute to aakatev/three-js-webpack development by creating an account on GitHub. github.com Three.js의 기본적인 사용 방법은 아래와 같다. import * as THREE from 'three' import { WEBGL } from './webgl' if (WEBGL.isWebGLAvailable()..

2023. 6. 24.

ThreeJS

Three.js를 설치하는 방법은 크게 4가지가 있다. 1️⃣ 그냥 다운로드하기 Three.js 홈페이지의 좌측 메뉴에 있는 download 버튼을 클릭하면 바로 파일이 다운 받아진다. 아래의 파일 중에 하나를 연결하여 작업하면 된다. 👉 three.js : 일반적인 라이브러리 👉 three.min.js : 압축버전 👉 three.module.js : 모듈방식으로 개발할 수 있는 라이브러리 2️⃣ CDN을 통한 설치 3️⃣ npm으로 설치하기 npm install --save three 4️⃣ 보일러 플레이트 활용 git clone https://github.com/aakatev/three-js-webpack.git https://github.com/aakatev/three-js-webpack GitHu..

2023. 6. 24.