ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • Scene(장면)에 Object(물체) 추가하기
    웹프로그래밍/THREE.js 2020. 1. 3. 15:32
    반응형

    r111

    이미지출처 : 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 OJPxbpJ by Ricon Kim (@vitneum) on CodePen.

    반응형

    '웹프로그래밍 > THREE.js' 카테고리의 다른 글

    Light(빛, 광원) 의 종류  (0) 2020.01.05
    Mesh 모델의 Material(재질) 종류  (0) 2020.01.04
    THREE.js 기본  (0) 2020.01.02
    THREE.js 기초 참고자료 링크 모음  (0) 2020.01.02
    THREE.Aoudio 에 On이벤트 연결하기  (0) 2019.12.17

    댓글

Designed by Tistory.