본문 바로가기

3d웹

3차원 웹, 밝은 빛을 보라, 캔버스와 함께하는 자바스크립트, 17번째 시간 지난 시간에는 3차원공간을 마우스로 자유자재로 돌려보는 예제를 살펴보았었는데요. https://itadventure.tistory.com/51 3차원 웹, 마우스로 움직이다, 캔버스와 함께하는 자바스크립트, 16번째 시간 3차원 웹 기술, 캔버스와 자바스크립트 "마우스로 움직이다" 시간입니다 :) 오늘은 우선 예제 영상을 보도록 하실까요? ​ https://youtu.be/2ECIpZvg7Og 허공에 3개의 정육면체가 있으며, 마우스로 클릭하여 드래.. itadventure.tistory.com 박스 뒷면이 너무 새까맣게 보였던 문제에 대해 잠시 거론했었지요 :) 왜 이렇게 까말까요? 그 원인은 포인트 라이트라고 만들어 놓은 3개의 조명이 모두 Z축을 따라 양수의 방향에만 있기 때문입니다. 상자 뒷면을 .. 더보기
3차원 웹, 마우스로 움직이다, 캔버스와 함께하는 자바스크립트, 16번째 시간 3차원 웹 기술, 캔버스와 자바스크립트 "마우스로 움직이다" 시간입니다 :) 오늘은 우선 예제 영상을 보도록 하실까요?​ https://youtu.be/2ECIpZvg7Og 허공에 3개의 정육면체가 있으며, 마우스로 클릭하여 드래그하니 3개의 정육면체가 동시에 돌아갑니다. 마우스 휠을 위로 돌리면, 확대되고 아래로 돌리면 축소하며, 마우스 우클릭하여 드래그할 경우 화면이 상하 좌우로 그대로 이동합니다. ​ 마우스 우클릭이 추가됨으로서 마치 가상공간을 마음껏 들여다 보는 느낌인데요. 꽤 복잡해 보일듯 하지만, 사실 이 부분은 이미 만들어져 있는 멋진 기능이 마련되어 있기 때문에 그냥 가져다가 사용하면 됩니다. ​ 이를 위해서 먼저 스크립트 라이브러리를 추가해 주어야 하는데요. 지난 소스의 여기 아래 부분에.. 더보기
3차원 웹, 이미지를 부르다, 캔버스와 함께하는 자바스크립트, 15번째 시간 지난 시간에는 canvas 에서 3차원 공간의 개념에 대해 다루어 보았었지요? 그리고 예제 하나를 구경해보았었습니다. https://itadventure.tistory.com/45 3차원 공간의 개념, 캔버스와 함께하는 자바스크립트, 14번째 시간 지난 시간에는 HTML 표준 기술 캔버스에서 자바스크립트를 이용하여 3차원 모양의 정육면체를 회전시켜보는 예제를 보았었습니다 :) ​https://blog.naver.com/ephraimdrlee/221570755838 3D세계의 창조, 캔버스와.. itadventure.tistory.com 이번시간에는 물체의 좌표와 카메라 제어에 대해 살펴볼텐데요. 지난 내용을 살펴보셨다면, 3차원 공간을 표현할 기본 틀에 대해 이해하셨을 겁니다. ​ 이제 3차원 공간을 빛.. 더보기