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..

Matrix : Threejs가 사용하는 3D 형태를 정의하는 행렬. (위치, 회전률, 비례(크기조정?)) 모든 Object3D 객체는 위치, 회전률, 투사비율값을 가지는 matrix 를 가진다. 즉, 요놈을 update 하면 Object의 변경사항이 적용된다!! Object3D 는 세 가지의 Matrix 를 가지는데, Matrix Type Description Object3D.matrix object 자기 자신만의 상태값 가진다. 이 값은 부모값에 대하여 상대적이다. Object3D.matrixWorld object 의 global 혹은 world(즉, 전체)의 상태값을 가진다. parrent 가 없다면 world 와 같은 값을 가진다. Object3D.modelViewMatrix 카메라의 coordi..

See the Pen points by iamdap91 (@iamdap91) on CodePen. Points(구 ParticleSystems) : 다수의 점들로 이루어진 군집이다. Point 는 그에 상응하는 geometry 를 갖지 않기에, 최상위 geometry 를 사용하여 사용자가 일일히 점을 집어넣어 사용한다. 위의 예시에서는 SphereBufferGeometry 를 이용하여 구의 점을 추출하였다. 그 형태(points)에 맞는 정형적 geometry는 가지지 않지만, Points 객체(Object)는 가진다. newTHREE.Points(points_geometry, points_material) // 객체 선언 위 소스에서 material을 두 개 선언했는데, 하나는 후술할 ShaderMat..

https://bae-codebox.tistory.com/142 베지어(bezier) 곡선 베지어 곡선 : 곡선이다. 뭐? 왜? 프랑스의 자동차 제조사 르노의 기술자 피에르 베지에가 차체 디자인에 사용하면서 알려진 곡선이다. 조절점(control point) 의 갯수에 따라 2차(1개), 3차(2개) 베지어 곡선으.. bae-codebox.tistory.com 위 글을 보고오면 도움이 될 수도 있습니다. 장담은 못함. 자 이번엔 Three.js 에서 베지어 곡선을 그려볼 것이다. 다 모르겠고 함수쓸거다. 이해 못해도 괜찮다. 알아서 해준다. See the Pen bezier curve by iamdap91 (@iamdap91) on CodePen. 위의 베지어 곡선 코드를 코딱지만큼 응용하면 이런 걸 만..

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 : 카메라의 시..