three.js 2편. 기본 장면 만들기

Three.js를 활용한 기본 씬 만들기

 

▷ 웹에서 3D 기본 장면 만들기

 웹에서 3D를 표현하려면 다음 5가지를 반드시 넣어야 한다. 

1) 장면(Scene)

2) 카메라(Camera)

3) 라이팅(Light)

4) 물체(geometry,material)

5) 랜더러(webgl랜더러)

 

three.js 1편에서 생성한 기본 뼈대 파일에서 아래와 같은 init( )함수를 작성해보자. 전체 코드를 실행하면 검은 배경 화면에 3D plane 지오메트리가 나타난다. 

 

---

<script>

 (function(){

     init();

})()

function init(){

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);

var renderer = new THREE.WebGLRenderer();

      renderer.setClearColor(new THREE.Color(0x000000));

      renderer.setSize(window.innerWidth*0.375,window.innerHeight*0.375);

 

var planeGeometry = new THREE.PlaneGeometry(60,20);

var planeMaterial = new THREE.MeshBasicMaterial({

            color:0xAAAAAA

})

var plane = new  THREE.Mesh(planeGeometry,planeMaterial);

     plane.rotation.x = -0.4*Math.PI;

     plane.position.set(15,0,0);

  

scene.add(plane);

 

camera.position.set(-30,40,30);

camera.lookAt(scene.position);

 

document.getElementById('webgl-output').appendChild(renderer.domElement);

renderer.render(scene,camera);

}

</script>

---

라이팅을 제외한 4가지 요소가 들어갔고, 색상별로 씬, 카메라, 랜더러, 오브젝트 순이다.

---

▷ 3D 요소를 담는 그릇 :: Scene( )

three.js에서 scene( )명령어는 카메라와 오브젝트와 같은 요소들을 담는 그릇이다. scene.add( ) 매서드를 실행하고, 괄호 안에 요소를 넣으면 scene에 각종 요소들을 추가할 수 있다. 위에서는 plane 폴리곤을 하나 생성하고, scene.add(plane)을 실행했다. 만일 box를 넣고 싶다면, new THREE.Box( )를 생성한 후에 색상과 위치를 지정한다. 간단한 box를 생성해서 넣어보자. 

---

[box 추가 코드]

var boxGeometry = new THREE.BoxGeometry(10,10,10);

var boxMaterial = new THREE.MeshBasicMaterial({

    color:0xCCBBBA

})

var box = new THREE.Mesh(boxGeometry,boxMaterial);

     box.position.set(-5,10,2);

scene.add(box);

---

three.js는 Box외에도 Sphere(구)를 포함한 여러 폴리곤을 기본으로 제공한다. threejs.org 사이트의 자료를 참조하면 wire모드로 보이거나 투명하게 만드는 각종 매서드를 받아볼 수 있다. 폴리곤을 추가하는 원리는 모두 비슷하다. 

 

1) 오브젝트 변수와 쉐이더 변수를 선언한다. 

2) 폴리곤 종류와 색상을 지정한다. 

3) 위치나 회전과 크기를 지정할 수 있는 객체를 만든다.

4) scene.add( )매서드를 통해 씬에 추가한다.

 

같은 방식으로 구를 추가해보자. 

---

var sphereGeometry = new THREE.SphereGeometry(8,20,20);

var sphereMaterial = new THREE.MeshBasicMaterial({

     color:0xACCBCA,

     wireframe:true

})

var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial);

     sphere.position.set(3,2,1);

     scene.add(sphere);

---