본문 바로가기

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번째 시간 ※ 2020. 8. 4 : 크로스 도메인 이슈로 크레이의 웹서버에서 이미지를 불러오지 못하는 이슈가 수정되었습니다. 지난 시간에는 canvas 에서 3차원 공간의 개념에 대해 다루어 보았었지요? 그리고 예제 하나를 구경해보았었습니다. https://itadventure.tistory.com/45 3차원 공간의 개념, 캔버스와 함께하는 자바스크립트, 14번째 시간 지난 시간에는 HTML 표준 기술 캔버스에서 자바스크립트를 이용하여 3차원 모양의 정육면체를 회전시켜보는 예제를 보았었습니다 :) ​https://blog.naver.com/ephraimdrlee/221570755838 3D세계의 창조, 캔버스와.. itadventure.tistory.com 이번시간에는 물체의 좌표와 카메라 제어에 대해 살펴볼텐.. 더보기