모든 것을 다 정의했으니 이제 렌더링 해보겠습니다.렌더러도 여러 종류가 있지만 보통 WebGLRenderer를 사용합니다. 코드를 보시면 antialias에 true를 전달한 것이 보이시죠?예전 게임들 보시면 캐릭터 등 모양이 각져 있는 것을 볼 수 있는데, 이는 사각형 점을 찍어서 모양을 나타내기 때문입니다. antialias는 형체의 끝부분과 연결된 부분을 배경색과 형체색의 중간색으로 해서 이 각진 부분을 부드럽게 만들어 주는 것입니다. 저는 이 옵션을 사용하겠다고 전달한 것입니다. 렌더링할 사이즈(캔버스의 크기)를 설정하신 다음 body태그에 renderer.domElement를 자식으로 추가해주시면 됩니다. renderer.domElement는 우리가 그린 것들이 담겨 있는 캔버스 태그입니다. 이..
mesh는 2가지로 나눠져 있습니다.바로 형태와 재질입니다. 왜 이 두가지를 구분했을까요? 똑같은 형태지만 여러 가지의 재질 및 색깔을 사용할 수 있고, 다른 형태들이지만 동일한 재질 및 색깔을 사용하기 편하려면 둘을 구분해서 사용하는 것이 타당하겠죠? 위의 것을 three.js의 용어로 나타내면 mesh는 geometry와 material로 나눠져 있다고 할 수 있습니다. 문서에 보면 아주 많은 형태들이 나타나 있습니다. 우리가 할 건 하고 싶은 형태를 선택한 후 값을 전달하면 되는 것 뿐입니다. 가장 무난한 BoxGeometry를 선택했습니다. 너비, 높이, 깊이를 전달하면 간단하게 만들어줍니다. 재질은 (예시에서) 많이 사용되는 것을 꼽아보자면 MeshBasicMaterial, MeshLambert..
expo three를 다루기 전에 우선 three.js를 배워봅시다.expo three를 다룰 수 있게되면 여러가지 게임(앱)을 만들어 볼 수 있을 것이라고 생각해서 궁극적으로는 expo three로 간단한 게임을 만드는 튜토리얼을 "언젠가는" 올리고 싶습니다. 저도 배우고 싶은 거라 여러 가지 자료들을 찾고, 배우고 있는 중에 우선은 단계적으로 three.js에 대한 튜토리얼을 진행해보도록 하겠습니다.함께 무엇을 만들어볼까요?우선은 회전하는 정사각형을 같이 만들어보도록 하겠습니다. 예제 보러가기 우선은 회전하는 사각형을 만들고 차차 이벤트들도 추가해보면서 three.js를 이해해보도록 하겠습니다.three.js란?위에 올린 이미지처럼 웹 브라우저에 3d 형태로 나타낼 수 있게 도와주는 것이 WebGL이..