three.js 12편 재질, 3D 코딩하기

즐거운 three.js 12편 

-재질 설정하기-

 

material이 재질이다. 3D에서 물체의 특징은 '재질'과 '텍스처'에 따라서 완전 달라진다. 가령, 텍스처(색칠)로 돌멩이를 사용했는데, 반사광이 엄청 많이 있으면 물에 적은 돌처럼 변한다. 적어도 CG 세계에서는 재질에 따라 물체의 성질이 달라진다. 모델링이 어떻든간에 재질과 텍스처에 따라 영상이 바뀐다는 말!

three.js에서는 아래처럼 여러가지 재질을 제공한다. 기본 재질에서부터 Sprite까지. 웬만한 CG 프로그램에서 제공하는 기본 재질을 모두 갖추고 있는데, 멘탈레이, V-ray, 아놀드와 같은 상업적 랜더러의 재질은 지원하지 않고 있다. 웹은 속도가 생명, 너무 과도한 재질은 오히려 좋지 않다. 웹에서 3D 작업이 가능한 시대가 온다면, 더욱더 텍스처빨로 밀어붙여야 할 것이다.  

재질을 설정하는 부분은 three.js API문서에 자세히 나온다. 그 중에서 필수적으로 사용하는 재질의 속성들에 관해 알아보쟈~

▷재질의 속성

재질에서 색상은 기본이다. 텍스처가 들어가면 색상은 필요없지만 그 전까지는 색상이 지분의 반을 차지한다. 색상을 지정하는 코딩은 간단하다. 3D Mesh를 생성하려면, 기본적으로 geometry와 material이 필요한데 material에 색상값이 들어간다.

let geometry = new THREE.CubeGeometry(4,4,4);  let material = new THREE.MeshLambertMaterial({                    color:0xababab })

객체의 속성값으로 'color'를 지정하고, 해당 색상값을 넣으면 된다. 재질에 따라서 들어가는 속성이 모두 다르다. 램버트 재질같은 경우 emissive(빛의 산포도,퍼지는 정도)와 transparency(투명값), wireframe 등...이 있다. phong 재질 같은 경우, shininess(반사광), specular와 같은 빛과 관련된 속성들이 있다. 

직접 코딩으로 비교해보자. 반사광이 전혀 없는 램버트로 재질을 설정한다. 아래의 기본 뼈대 파일을 생성하자.(앞의 것 복습) 

뼈대 파일의 코딩은 아래와 같다

<script> let scene,geometry, material, camera,renderer,trackballControls,clock; let add = 0.02; let createCube = function(){     geometry = new THREE.BoxGeometry(3,3,3);     material = new THREE.MeshLambertMaterial({ color:0xababab });     let cube = new THREE.Mesh(geometry,material);         cube.position.y = 3;         cube.position.x = -4;         scene.add(cube); } let createSphere = function(){     geometry = new THREE.SphereGeometry(2,20,20);     material = new THREE.MeshLambertMaterial({ color:0xababab });     let sphere = new THREE.Mesh(geometry,material);     sphere.position.y = 3;     sphere.position.x = 1;     scene.add(sphere); } let createCone = function(){     geometry = new THREE.ConeGeometry(2,3,32);     material = new THREE.MeshLambertMaterial({ color:0xababab })     let cone = new THREE.Mesh(geometry,material);     cone.position.y = 3;     cone.position.x = 6;     scene.add(cone); } let init = function(){     scene = new THREE.Scene();     scene.background = new THREE.Color(0x48535f)     camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);     camera.position.y = 30;     camera.position.z = 20;     camera.position.x = 5;     camera.lookAt(scene.position);     let pointLight = new THREE.PointLight(0xffffff);         pointLight.position.set(0,5,3);     scene.add(pointLight);     let axesHelper = new THREE.AxesHelper(10);         scene.add(axesHelper);         axesHelper.position.y = 1;          let gridHelper = new THREE.GridHelper(30,10);         scene.add(gridHelper);     createCube();     createSphere();     createCone();         renderer = new THREE.WebGLRenderer();     renderer.setSize(window.innerWidth*0.375,window.innerHeight*0.375);     document.getElementById('webgl-mat').appendChild(renderer.domElement);     trackballControls = initTrackballControls(camera,renderer);     clock = new THREE.Clock(); } let render = function(){     trackballControls.update(clock.getDelta());     requestAnimationFrame(render);     renderer.render(scene,camera); } init(); render(); </script>

이제 재질을 램버트에서 스탠다드 재질로 설정해서 '쇠'처럼 만들어 보자. 위의 코드에서 다음 부분을 MeshLambertMaterial을 MeshStandardMaterial로 변경한다. matalness의 default값은 0.5인데, 이를 1로 설정한다. metalness를 1로 하면, 라이트의 반사광이 강해져서 금속 재질로 변한다.(해당 결과물을 올렸지만, 티스토리에서 중복으로 WebGLRenderer설정이 안 되는 듯;;)

material = new THREE.MeshLambertMaterial({ color:0xababab }); -> new THREE.MeshStandardMaterial({ color:0xababab,                                                    metalness:1 })