Scene(장면)에 Object(물체) 추가하기

이미지출처 :  https://busy.org/@clayjohn/learning-3d-graphics-with-three-js-or-dynamic-geometry

 

THREE.js 장면(Scene)안에 다양한 2D, 3D 물체(오브젝트)를 추가할 수 있습니다.

THREE.js의 기본 3D 오브젝트는 Geometry(뼈대) 와 Material(재질, 살갖)으로 구성된 Mesh Object를 기본으로 합니다.
또한 SpriteMaterial 만으로 구성된 Sprite 라는 2D 오브젝트도 제공합니다.

Geometry : 틀, 뼈대 - 기본 모양과 크기 정보.
Material : 재질, 특성 - 색상, 투명도, 텍스쳐이미지 등등..

 

 

 

장면에 3D 메쉬오브젝트 추가하기

- 가장 기본적인 박스모델(BoxGeometry) 추가해 보기

var 장면 = new THREE.Scene(); // "장면"이라는 Scene 생성

// 가로/세로/앞뒤 모두 1미터 크기의 박스 뼈대 생성
var 뼈대 = new THREE.BoxBufferGeometry( 1, 1, 1 );
// 최근의 THREE.js 에서는
// 기존의 BoxGeometry 를 대신하여 재사용이 용이한 BoxBufferGeometry를 추천하고 있다.

// 재질의 색깔을 녹색으로 생성
var 재질 = new THREE.MeshBasicMaterial( {color: 0x00ff00} );

// 뼈대와 재질을 섞어 "박스"라는 메쉬오브젝트 생성
var 박스 = new THREE.Mesh( 뼈대, 재질 );

장면.add(박스); // "장면" 에 "박스" 메쉬오브젝트 추가

 

 

THREE.js에서 기본 제공하는 Geometry 뼈대들

• 육면체
  BoxBufferGeometry(
    width : Float, // 가로 크기
    height : Float, // 세로 크기
    depth : Float, // 깊이(폭/두께) 크기
    widthSegments : Integer, // 가로 면 분할
    heightSegments : Integer, // 세로 면 분할
    depthSegments : Integer // 깊이 면 분할
  )
• 사각평면
  PlaneBufferGeometry(width : Float, height : Float, widthSegments : Integer, heightSegments : Integer)
• 원판형
  CircleBufferGeometry(radius : Float, segments : Integer,
    thetaStart : Float, // 첫 번째 세그먼트(분할면)의 시작 각도, 기본값 = 0 (3시 방향)
    thetaLength : Float // 모든 분할면의 총 각도 합. 기본값 = 2*PI (값을 줄여 부채꼴을 만들수 있다)
  )
• 평면고리형
  RingBufferGeometry(innerRadius : Float, outerRadius : Float, thetaSegments : Integer, phiSegments : Integer, thetaStart : Float, thetaLength : Float)
• 고리(원환)형
  TorusBufferGeometry(radius : Float, tube : Float, radialSegments : Integer, tubularSegments : Integer, arc : Float)
• 고리(원환) 매듭형
  TorusKnotBufferGeometry(radius : Float, tube : Float, tubularSegments : Integer, radialSegments : Integer, p : Integer, q : Integer)
• 원뿔형
  ConeBufferGeometry(radius : Float, height : Float, radialSegments : Integer, heightSegments : Integer,
    openEnded : Boolean, // 바닥면 유무. 기본값 = False(바닥있음)
    thetaStart : Float, thetaLength : Float)
• 원기둥형
  CylinderBufferGeometry(radiusTop : Float, radiusBottom : Float, height : Float, radialSegments : Integer, heightSegments : Integer, openEnded : Boolean, thetaStart : Float, thetaLength : Float)
• 구형
  SphereBufferGeometry(radius : Float, widthSegments : Integer, heightSegments : Integer, phiStart : Float, phiLength : Float, thetaStart : Float, thetaLength : Float)
• 정8면체
  OctahedronBufferGeometry(radius : Float, detail : Integer)
• 12면체
  DodecahedronBufferGeometry(radius : Float,
    detail : Integer // 기본값은 0 이며, 값이 커질수록 면수가 많아져 원구형에 가까워진다.
  )
• 정20면체
  IcosahedronBufferGeometry(radius : Float, detail : Integer)
• 돌출형(사각보석형?)
  ExtrudeBufferGeometry(shapes : Array, options : Object)
• 선반형(?)
  LatheBufferGeometry(points : Array, segments : Integer, phiStart : Float, phiLength : Float)
• 물병형(??)
  ParametricBufferGeometry(func : Function, slices : Integer, stacks : Integer)
• 튜브형
  TubeBufferGeometry(path : Curve, tubularSegments : Integer, radius : Float, radialSegments : Integer, closed : Boolean)

 

 

 

2D Sprite 오브젝트 추가하기

// TextureLoader()를 사용하여 텍스쳐로 사용할 이미지 불러오기
var 이미지 = new THREE.TextureLoader().load( "sprite.png" );

// 스프라이트 매터리얼(재질) 설정
var 재질 = new THREE.SpriteMaterial( { map: 이미지, color: 0xffffff } );

// 스프라이트 생성
var 스프라이트 = new THREE.Sprite( 재질 );

장면.add( 스프라이트 );

* 참고 :
map 으로 불려온 이미지 맵 파일은 자신의 색상값 0xFFFFF(불투명) ~ 0x0000(투명) 에 따라
color 값으로 지정한 색상으로 덧칠(맵핑)이 된다.

 

 

 

See the Pen THREE.js 오브젝트 생성 by Ricon Kim (@vitneum) on CodePen.

 

 

 

출처: https://horangi.tistory.com/403?category=821071 [노을빛호랑이의 연습장]