본문 바로가기

Three.js

(4)
[Three.js] 3. Animation Three.js를 사용할 때 애니메이션은 스톱 모션처럼 작동합니다. 오브젝트를 움직이고 렌더링을 수행합니다. 그런 다음 개체를 조금 더 이동하고 다시 렌더링을 수행합니다.이 작업이 반복적으로 수행되면서 오브젝트가 움직이는 것 처럼 보입니다. 렌더링 간에 오브젝트를 더 많이 움직일수록 오브젝트가 더 빨리 움직이는 것처럼 보입니다. 보고 있는 화면은 특정 주파수로 실행되는 데 이를 프레임 속도라고 합니다.  프레임 속도는 대부분 화면에 따라 달라지지만 컴퓨터 자체에도 한계가 있습니다. 대부분의 화면은 초당 60프레임으로 실행됩니다. 계산을 해보면 16ms마다 한 프레임씩 실행된다는 뜻입니다. 그러나 일부 화면은 훨씬 빠르게 실행될 수 있으며 컴퓨터가 처리하기 어려운 경우 더 느리게 실행됩니다. 프레임 속도에..
[Three.js] 2. 물체(Object)의 변형 position scale rotation group Scene 의 물체를 변경하는 요소는 크게 3가지가 있습니다.물체의 이동  : Position 물체의 사이즈 변형  : Scale 물체의 회전  : Rotation, Quaternion ( 사원수 )Object3D 클래스를 상속하는 모든 클래스에는 PerspectiveCamera 또는 Mesh와 같은 속성과 기타 클래스가 있습니다. 각 클래스가 어떤 클래스를 상속하는지는 Three.js 문서에서 확인할 수 있습니다. 이러한 속성은  매트릭스(matrices : 행렬)라는 이름으로 컴파일됩니다. 매트릭스는 내부적으로 Three.js, WebGL, GPU에서 사물을 변환하는 데 사용됩니다.  매트릭스를 직접 처리할 필요는 없으며 앞서 언급한 속성을 수정하면 됩니다.   0. Axes helper( 축 도우미..
[Three.js] 1. vue 로 빨간 육각면체 만들기 화면에 무언가를 그리려면 4가지 요소가 필요합니다.1. 오브젝트를 포함한 scene2. 오브젝트3. 카메라4. 랜더러1. scene scene은 컨테이너와 같습니다. 그 안에 오브젝트, 조명, 카메라 등을 배치할 수 있으며, Three.js에 해당 장면을 렌더링하도록 요청합니다import { PerspectiveCamera, Scene, BoxGeometry, MeshBasicMaterial, Mesh, WebGLRenderer} from 'three'const scene = new Scene() 특징컨테이너: 씬은 다양한 3D 객체들(메쉬, 조명, 카메라 등)을 포함하는 컨테이너로서의 역할을 합니다.조직화: 씬 내에서 객체들은 계층적으로 조직될 수 있으며, 이는 복잡한 3D 환경을 효과적으로..
[Three.js] 0. WebGL 와 Three.js 의 관계 WebGL( Web Graphics Library 의 약자)은 플러그인을 사용하지 않고 호환되는 모든 웹 브라우저에서대화형 2D 및 3D 그래픽을 렌더링하기 위한 JavaScript API입니다. 대부분의 최신 브라우저와 호환되며, 방문자의 GPU(그래픽 처리 장치)를 사용하기 때문에 속도가 빠릅니다. GPU는 수천 개의 병렬 계산을 수행할 수 있습니다.3D 모델을 렌더링하고 싶은데 이 모델이 1000개의 삼각형으로 구성되어 있다면, 모델을 렌더링하려면 GPU가 3000개의 점의 위치를 계산해야 합니다.GPU는 병렬 계산을 할 수 있기 때문에 모든 삼각형 점을 하나의 원시 데이터로 처리합니다. 모델의 포인트가 배치되면 GPU는 해당 삼각형의 보이는 각 픽셀을 그려야 합니다. 이때도 GPU는 수천, 수만 ..