우리가 정의할 것들을 다시 한번 생각해봅시다.three.js에 대해서 설명할 때 우리가 필요한 것들을 모두 정의한 후에 그냥 렌더링 하면 된다고 했었습니다. 그 상황을 다시 되짚어 볼까요? 오브젝트 들이 있어야 하는 장소(장미 꽃이 있는 장소), 오브젝트(장미꽃, 나무줄기, 잎), 장미를 비추는 빛, 우리의 시선 및 카메라가 필요하고, 그것들을 다 정의한 후에 렌더링 하면 된다고 했었습니다. 각각의 것들이 three.js에서는 순서대로 scene, mesh, light, camera랑 매치된다고 했었죠. 이것들만 기억하면 그 다음부터는 그냥 정의하면 됩니다.scene을 정의해봅시다.모든 것은 Init 함수안에 순서대로 정의할 예정입니다. 그리고 페이지가 로드되면 Init 함수가 실행되도록 이벤트를 지정해..
three.js 라이브러리를 다운로드 받아봅시다.공식 홈페이지에서 다운로드를 누르면 three.js - master 폴더를 다운로드 하게 됩니다. 300MB가 넘는 크기인데, 저희가 처음에 만들 튜토리얼에서는 사용하지 않는 것들이 많기 때문에 일단은 minified를 사용하도록 하겠습니다. three.min.js 소스코드 보기 해당 소스코드는 공식홈페이지 > source code를 누르시면 깃허브로 이동하게 되고, README에 나타나 있습니다. 직접 가셔서 소스코드를 보셔도 되고 간편하게 위의 링크를 클릭해주셔도 됩니다. 마우스 오른쪽 버튼을 클릭하고 "다른 이름으로 저장"을 누르면 three.min.js 로 저장할 수 있습니다. 해당 파일을 우리의 튜토리얼 폴더로 옮겨주세요. three-tutoria..
왜 컴퓨터는 2진법을 사용할까요?컴퓨터는 2진법를 사용합니다. 즉 0 또는 1로 모든 것을 표현한다는 것이죠. 왜 사용하는 지 바로 답을 내리기 전에 인간은 왜 십진법을 사용하는 지 부터 생각해보는게 좋습니다. 수에 대해서 배우기 시작할 때 가장 이용하기 좋은 도구는 손가락 입니다. 손가락을 하나씩 접어가면서 숫자를 배우기도 하고, 정확하게 계산을 하기도 하죠. 우리가 십진법(0~9를 사용하는 것)에 익숙한 것은 우리의 손가락 개수가 합쳐서 10개 인 것과 관련이 있습니다. 예전부터 손가락을 사용하는게 익숙했었기 때문이죠. 분명 인간의 손가락 개수가 10개 아니고, 좀 더 많거나 좀 더 적었다면 그 숫자에 익숙해졌을 것이라고 생각합니다.그렇다면 컴퓨터의 손가락은 2개 일까요?컴퓨터에 손가락은 없겠지만, ..
expo three를 다루기 전에 우선 three.js를 배워봅시다.expo three를 다룰 수 있게되면 여러가지 게임(앱)을 만들어 볼 수 있을 것이라고 생각해서 궁극적으로는 expo three로 간단한 게임을 만드는 튜토리얼을 "언젠가는" 올리고 싶습니다. 저도 배우고 싶은 거라 여러 가지 자료들을 찾고, 배우고 있는 중에 우선은 단계적으로 three.js에 대한 튜토리얼을 진행해보도록 하겠습니다.함께 무엇을 만들어볼까요?우선은 회전하는 정사각형을 같이 만들어보도록 하겠습니다. 예제 보러가기 우선은 회전하는 사각형을 만들고 차차 이벤트들도 추가해보면서 three.js를 이해해보도록 하겠습니다.three.js란?위에 올린 이미지처럼 웹 브라우저에 3d 형태로 나타낼 수 있게 도와주는 것이 WebGL이..