[ThreeJs] Geometry updated_at: 2025-02-13 16:38

Three.js Geometry

BoxGeometry

THREE.Bo__backgroundxGeometry(width?:number, height?:number, depth?:number, widthSegments?: number, heightSegments>: number, depthSegments>: number);

BoxBufferGeometry

@deprecated use BoxGeometry

// const geometry = new THREE.BoxBufferGeometry( 1, 1, 1 );
const geometry = new THREE.BoxGeometry ( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
const mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
mesh.position.set(100, 100, 100); // x, y, z

CubeGeometry

renamed to BoxGeometry

const headGeom = new THREE.CubeGeometry(9, 9, 5, 1);
headGeom.applyMatrix(new THREE.Matrix4().makeTranslation(0, 0, 7.5));

new THREE.BoxGeometry(9, 9, 5, 1);

CylinderGeometry

원기둥을 만들때 사용

CylinderGeometry 샘플

new THREE.CylinderGeometry(radiusTop, radiusBottom, height, radialSegments, heightSegments);
CylinderGeometry( 0.1, 0.1, 0.5);

ConeGeometry

원뿔을 만들때 사용 ConeGeometry 샘플

ConeGeometry( 0.5, 1, 8, 6);

DodecahedronGeometry

12면체 구를 만든다. [DodecahedronGeometry 샘플]

DodecahedronGeometry( 0.2, 1)

ExtrudeGeometry

path shape 로 부터 geometry 추출하여 생성한다.
path를 이용하여 사용자 모양을 만든후 이것을 기본으로 geometry를 생성함으로서 다양한 모양을 만들 수 있다.

ExtrudeGeometry(shapes?: THREE.Shape | THREE.Shape[], options?: THREE.ExtrudeGeometryOptions): THREE.ExtrudeGeometry
  • shapes — Shape or an array of shapes. Default new Shape([new Vector2(0.5, 0.5), new Vector2(-0.5, 0.5), new Vector2(-0.5, -0.5), new Vector2(0.5, -0.5)]).
  • options — Object that can contain the following parameters.

ExtrudeGeometryOptions for defaults.

  • curveSegments?: number | undefined; // Number of points on the curves. @defaultValue `12
  • steps?: number | undefined; // Number of points used for subdividing segments along the depth of the extruded spline. @defaultValue 1
  • depth?: number | undefined; // Depth to extrude the shape.@defaultValue 1
  • bevelEnabled?: boolean | undefined; // Turn on bevel. Applying beveling to the shape. @defaultValue true
  • bevelThickness?: number | undefined; // How deep into the original shape the bevel goes. @defaultValue 0.2
  • bevelSize?: number | undefined; // Distance from the shape outline that the bevel extends @defaultValue bevelThickness - 0.1
  • bevelOffset?: number | undefined; // Distance from the shape outline that the bevel starts. @defaultValue 0
  • bevelSegments?: number | undefined; // Number of bevel layers/segments. @defaultValue 3
  • extrudePath?: Curve<Vector3> | undefined; // A 3D spline path along which the shape should be extruded.
  • UVGenerator?: UVGenerator | undefined; // A object that provides UV generator functions.

예제

const shape = new THREE.Shape();

shape.moveTo( x, y + radius );
shape.lineTo( x, y + height - radius );
shape.quadraticCurveTo( x, y + height, x + radius, y + height );
..........
const geometry = new THREE.ExtrudeGeometry(
  shape,
  { depth: depth, bevelEnabled: false, curveSegments: 3 }
);

ExtrudeBufferGeometry

@deprecated use ExtrudeGeometry

PlaneGeometry

평평한 바닥을 표현할때 사용하는 Geometry이다.

PlaneGeometry(width?: number, height?: number, widthSegments?: number, heightSegments?: number): THREE.PlaneGeometry
  • width — Width along the X axis. Expects a Float. Default 1
  • height — Height along the Y axis. Expects a Float. Default 1
  • widthSegments — Number of segmented faces along the width of the sides. Expects a Integer. Default 1
  • heightSegments — Number of segmented faces along the height of the sides. Expects a Integer. Default 1

PlaneBufferGeometry

@deprecated. see PlaneGeometry

SphereGeometry

구를 만들때 사용 SphereGeometry 샘플

SphereGeometry( 26, 40, 40)
평점을 남겨주세요
평점 : 2.5
총 투표수 : 1

질문 및 답글