three.js 7편 scene 메서드 정리(안개 만들기)

three.js 7편 scene 메서드 정리(안개 만들기)

 

three.js에서 scene()은 컴퓨터의 '마더보드'와 비슷한 역할을 한다. scene()의 하위구조로 '지오메트리' , '라이팅' ,'카메라' 등.... 모두 scene() 안에서 움직인다. 단순히 3D 프로그램을 이용한다면 scene()의 메서드를 정리할 필요가 없다. 라이팅 수치값이나 모델링 제작에 심혈을 기울이는 편이 작품제작에 도움이 된다. 반면, 3D 프로그래밍을 해야 한다면, scene()은 반드시 정복해야 할 대상이다. scene()명령어를 통해서 각 요소들을 연결하고, 삽입하고, 삭제할 수 있다. 

 

이번 포스팅에서는 scene()의 기능 중에서 가장 간단한 .fog를 알아보고, 각종 메서드들을 정리해본다.

 

▷ 안개 생성하기

scene.fog = new THREE.Fog(0xffffff, 10, 100);

위의 코드 한 줄만 삽입하면, 즉시 안개를 볼 수 있다. three.js에서는 .fog와 관련된 api를 자체적으로 제공한다. 코드에서 '0xffffff'는 흰색 안개를 의미하고(색상변경 가능), 두 번째 파라미터인 '10'은 안개의 시작점을 의미한다. 마지막 파라미터인 '100'은 안개에 가려 보이지 않는 '끝점'을 의미한다. 가령, 거리 10부터 100사이에서 안개가 서서히 많아지는 상황을 연출하려면 위와 같이 10, 100을 각각 두번째, 세번째 파라미터에 넣으면 된다.

 

 

 

위의 3D 뷰에서 가운데 마우스의 움직임에 따라 안개의 가시거리가 달라진다. 이처럼 scene()을 활용하면 간단한 코드로 꽤 재미있는 화면을 만들어낼 수 있다. 지금까지 scene()과 관련된 명령어를 정리해보자. 

▷ scene 메서드 정리

매서드	내용
scene.add( )	3D 오브젝트를 해당 씬에 삽입
scene.children	해당 씬의 하위구조에 해당하는 요소들을 지칭
scene.getObjectByName( name, recursive)	해당 씬의 하위구조에 해당하는 특정 요소를 선택
scene.remove(object)	해당 object를 삭제
scene.traverse(function)	해당 씬의 하위구조를 모두 선택하고, 함수를 실행
scene.fog = new THREE.Fog(색상, start, end)	씬에서 안개를 생성 함
scene.overrideMaterial	해당 씬의 모든 오브젝트들에 같은 재질을 적용
scene.background = new THREE.Color(색상)	해당 씬의 배경 색상을 지정