SG의 개발 공부로그

일단 먼저 Three.js 에서 추가하는 방법을 보자 Three.js 에서의 Mesh 추가 const geometry = new BoxGeometry(2, 2, 2); const material = new MeshStandardMaterial() const cube = new Mesh(geometry, material) scene.add(cube) BoxGeometry , MeshStandardMaterial 도 변수에 담아서 Mesh( geometry(기하학), material(재질) ) 을 넣으면서 인스턴스화한다. 그리고 scene 에 추가한다. React Three Fiber 에서의 Mesh 추가 import { Canvas } from "@react-three/fiber"; export defau..

React에서 three.js 사용하는 방법 최근 3D 웹을 구현하고 싶어서 Three.js를 접하고 배우면서 궁금점이 생겼다. Three.js를 react에서 사용하고 싶은데 방법이 어떻게 될까? React Three Fiber 활용하는 것이다. 하지만 three.js 와 사용방법이 완전히 다르다 또 다르지만, React Three fiber는 Threejs를 기반으로 하기 때문에 하기 위에서는 Three.js 를 먼저 알아야 된다. React Three Fiber를 이해하기 가장 좋은 방법은 Three.js 라이브러리와 비교하면서 어떤 일이 일어나는지 보는 것이라고 생각이 들었다. three.js 프로젝트와 React Three Fiber를 둘을 함께 작업하면서 간단하게 사용법을 비교해보기로 했다. ..

WebGL이란 무엇인가 WebGL은 놀라운 속도로 캔버스에 삼각형을 렌더링하는 JavaScript API입니다. 대부분의 최신 브라우저와 호환되며 방문자의 그래픽 처리 장치(GPU)를 사용하기 때문에 빠릅니다. WebGL은 삼각형 이상을 그릴 수 있고 2D 경험을 만드는 데 사용할 수도 있지만 과정을 위해 삼각형을 사용하는 3D 경험에 중점을 둘 것입니다. GPU는 수천 개의 병렬 계산을 수행할 수 있습니다. 3D 모델을 렌더링하려고 하는데 이 모델이 1000개의 삼각형으로 구성되어 있다고 가정해 보겠습니다. 생각해 보면 그리 많지 않습니다. 각 삼각형에는 3개의 점이 포함됩니다. 모델을 렌더링하려면 GPU가 이 3000개 지점의 위치를 ​​계산해야 합니다. GPU는 병렬 계산을 할 수 있기 때문에 하나..