BaeBox

Picking : 사용자가 터치하거나 클릭한 객체를 파악하는 프로세스. 내가 고른 객체 데이터를 가져오는 방법이라고 생각하자. 처음보면 저걸 어떻게하나 어려워 보이는데, Three.js에서 기본적으로 제공해주는 RayCasting 기능을 사용하면 굉장히 쉽게 구현이 가능하다. 아래 코드는 공식 문서에서 긁어왔다. var raycaster = new THREE.Raycaster(); var mouse = new THREE.Vector2(); function onMouseMove( event ) { // calculate mouse position in normalized device coordinates // (-1 to +1) for both components mouse.x = ( event.clien..

See the Pen globe with stars by iamdap91 (@iamdap91) on CodePen. Codepen에 옮기느라 꽤나 힘들었다. 망할 base64 최대한 기능별로 함수로 나누었으며, 앞선 글에서의 개념을 이해했다면 크게 어렵지 않으리라 생각한다. 주석으로 설명을 달아놔서 설명은 필요 없을거라고 생각한다. 0. Scene, camera, renderer 추가! 1. 조명 추가! 2. 구(지구본) 추가! 3. 별 추가! 4. animation 추가! 참 쉽다. 덤. CDN 을 이용해서는 사용이 불가능해 빼버린 기능이 있다. three.js 를 CDN 말고 직접 받아서 사용하면 된다. 바로 OrbitControl 기능이다. 이게 어떤 기능이냐면, 마우스 이동시 화면을 회젼시켜주는 ..

Object3D : three.js 에서 제공하는 대부분의 객체에 대한 기본 클래스. JAVA 의 Object 클래스를 생각하면 될 것 같다. 아래의 js 코드를 보면 var cube=newTHREE.Mesh( geometry, material ); 라는 코드가 있다. Mesh 라고 적힌 부분이 geometry(모양)과 material(재질)을 합쳐서 만들어지는 객체(Object) 이다. 정확히 Object라고 지칭하기에는 사소한 차이점이 있는데, Object 를 상속하고 있다는 점이다. See the Pen RwbpGWa by iamdap91 (@iamdap91) on CodePen. 어... 그 외엔 딱히 더 말할 거리가 없다. 억지로 쥐어짜면 그 상속 클래스는 Mesh, SkinnedMesh, Gr..

Material : 재질이다. 그게 다다. 아래 이미지를 보자. 요런 식으로 어떤 재질을 띄는지를 지정하는 것이 material 이다. 이미지 출처 : 공식문서. https://threejs.org/docs/index.html#api/en/materials/MeshBasicMaterial three.js docs threejs.org

이번엔 Geometry 에 대해 알아보자. 사실 나도 잘 몰라... 하하하 Geometry : 생성하고자 하는 객체의 기하학적 형태를 가리킨다. 즉, 모양(형태)이다. 언제나 그렇듯 간단하게 볼 것이다. 이것저것 많이 볼 정도로 내 기억력이 좋지가 않거든 geometry를 보기 전에 geometry 를 구성하는 요소들에 대해 알아보자. 용어(Terminology) 어렵지 않아요 Vertex(Vertices) 점 (모서리 사이의 교차점) Edges 선 (입방체의 가장자리) Faces 면 (면... 뭔지 다 알죠?) 지금까지 내가 본 모든 geometry(형태) 들은 위 요소들의 조합이다. 백문이 불여일견이라고 아래 링크에서 직접 geometry 를 조작해보면 '아 이거구나!' 하면서 알 수 있다. http..

만사불여튼튼이라고 했다. 기초지만 정말 중요하다. 이거 모르면 three.js 를 이용해서 아무것도 못하니까 잘 알아두자. Scene : 물체, 카메라 및 조명을 배치할 수 있는 3D 공간. 크기를 지정 가능. 그냥 화면이다. Camera : 실생활의 카메라와 같음. 카메라의 위치와 카메라가 향하는 방향에 따라 화면에 렌더링되는 부분이 결정됨. 보는 위치 및 시야각 카메라를 설정할 때 수직 시야(fov), 종횡비, 근거리 및 원거리를 전달해야 함. 이 네 개의 값은 카메라로 캡처할 수 있는 3D 공간을 나타냄. 즉, 보고자 하는 영역(범위) fov : 수직 시야 aspect : 세로를 기준으로 가로 시야를 만드는데 사용하는 가로 세로 비율 near : 카메라의 시점이 시작되는 위치 far : 카메라의 시..