three.js 9편 "토성 만들기"

즐거운 three.js 9편 

 

"토성 만들기"

 

배웠으면 써먹어야 한다. 도넛과 스피어(구)로 쉽게 만들 수 있는 게 뭐가 있을까? 우주선 같은 걸 만들 수 있을 것 같다. 3D 소프트웨어에는 'parent'기능이 있는데, '배열'을 만들어 3D Geometry를 넣고, 해당 배열을 움직이면 애니메이팅이 적용되지 않을까. 하지만 three.js에서 제공하는 그룹 기능을 활용하면 굳이 배열의 모든 요소를 억지로 움직일 필요는 없을 것 같다.  

 

일단 스피어를 만들어보자. 

---

▷기본 순서

대략, 순서는 다음과 같다. 

1. 먼저 행성 가운데를 만든다. 

2. torus지오메트리를 납작하게 만들어서, sphere지오메트리 주변에 위치시킨다.

3. planet 배열을 만들어 torus들과 행성 가운데(구)를 집어넣는다.

4. init(), 함수에 행성만들기 함수를 선언한다.

5. 루프 함수를 가동한다.

 

기본 뼈대 파일을 다음과 같이 만들쟈~

let scene, camera, renderer, planet, trackballControls;  let planet_wings = [];  let createPlanet = function(){}  let init = function(){}  let render = function(){}  init()  render()

 

▷변수 생성하기

지오메트리를 동시에 한 화면에 띄우려면, group으로 묶는 방법이 있지만(뒤에서 설명) 일단 배열로 만들어서 모두 때려넣는 방식으로 진행해보쟈~ 거창한 씬이 아니기에 쉽고 빨리 만드는 게 좋댜~ planet 배열을 선언했다면 createPlanet함수를 활용해서 '구'와 '토러스'를 얼렁 배열에 넣쟈~

 

let createPlanet = function(){      let geometry = new THREE.SphereGeometry(4,30,30);      let material = new THREE.MeshBasicMaterial({color:0x8ddd24});      planet = new THREE.Mesh(geometry,material);      scene.add(planet); //위치는 중점으로        geometry = new THREE.TorusGeometry(5,0.7,2,50);      material = new THREE.MeshBasicMaterial({color:0xffe39f});      let wing = new THREE.Mesh(geometry,material);      planet_wings.push(wing);        geometry = new THREE.TorusGeometry(8,0.7,2,50);      material = new THREE.MeshBasicMaterial({color:0xffad60});      wing = new THREE.Mesh(geometry,material);      planet_wings.push(wing);        planet_wings.forEach( w => {              w.rotation.x = 2;              w.rotation.y = 0.7;              scene.add(w);     });    }

geometry, material은 계속 재사용했다. 자바스크립트의 장점은 '개'처럼 유연하다는 데에 있다. 기존의 변수값이 있더라도 그냥 또 선언해버리면 그대로 덮어쓴다. 물론 const로 선언해서 방지하는 방법이나 '엄격함'을 위에 선언해서 막을 수도 있다. 그러나 근본은 쉽게 바뀌지 않는 법! 그냥 변수 위에 또 선언해서 덮어버리쟈~ createPlanet()함수를 만들었다면, 나머지는 껌이다. 그냥 init()함수와 render()[재귀]함수를 선언하면 끝난다. 

 

let init = function(){      scene = new THREE.Scene();      camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight, 0.1, 1000);      camera.position.set(-30,40,30);      camera.lookAt(scene.position);            createPlanet();      renderer = new THREE.WebGLRenderer();      renderer.setClearColor(new THREE.Color(0x000000));      renderer.setSize(window.innerWidth*0.35, window.innerHeight*0.35);            document.getElementById('webgl-geo').appenChild(renderer.domElement);      trackballControls = initTrackballControls(camera,renderer);      clock = new THREE.Clock(); }     let render = function(){       requestAnimationFrame(render);       renderer.render(scene,camera); }   init();   render();

특별한 부분은 없다. 기존 뼈대 코드의 반복이 지속되다 보니 손가락 뼈가 아려온다;; 컨트롤러에서 특정 3D 오브젝트를 pick할 수 있다면 이런 노가다 코드는 필요없을텐데... 암튼 마우스로 pick하는 컨트롤 부분까지 진도를 나가기 전에는 어느 정도 노가다가 필요할 것 같다. 이런 과정이 있어야 훗날 진정한 한줄 코드의 소중함을 느끼지 않을까 한댜~