📖 지오메트리 (Geometry) 2

📌

✅ BoxGeometry의 args 속성

• argument의 줄임 단어 : 각 Geometry를 위한 클래스의 생성자에 대한 인자값

<boxGeometry args={[1,1,1,2,2,2]} />

// 위 코드는 내부의 Three.js에서 아래 코드로 변환된다.

new THREE.BoxGeometry(1,1,1,2,2,2)

// xSize : x축 방향에 대한 크기
// xSegments: x축 방향에 대한 분할 수

<boxGeometry args={[xSize, ySize, zSize, xSegments, ySegments, zSegments]} />

✅ SphereGeometry의 args 속성

• args 인자
  • 반지름
  • 너비 방향에 대한 분할 수 (1 이상 정수)
  • 높이 방향에 대한 분할 수 (1 이상 정수)
  • 수평 방향에 대한 시작 각도 (0 이상 360 미만 유리수)
  • 수평 방향에 대한 연장 각도 (0 이상 360 미만 유리수)
  • 높이 방향에 대한 시작 각도 (0 이상 360 미만 유리수)
  • 높이 방향에 대한 연장 각도 (0 이상 360 미만 유리수)

import { OrbitControls, Box } from "@react-three/drei";
import { useControls } from "leva";
import { useEffect, useRef } from "react";

function MyElement3D() {

    const refMesh = useRef()
    const refWireMesh = useRef()

    const { radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength } = useControls({
        radius: { value: 1, min: 0.1, max: 5, step: 0.01 },
        
        // 아래 두 값은 정수이어야 한다.
        widthSegments: { value: 32, min: 3, max: 256, step: 1 },
        heightSegments: { value: 1, min: 3, max: 256, step: 1 },

        phiStart: { value: 0, min: 0, max: 360, step: 0.1 },
        phiLength: { value: 360, min: 0, max: 360, step: 0.1 },
        
        thetaStart: { value: 0, min: 0, max: 180, step: 0.1 },
        thetaLength: { value: 180, min: 0, max: 180, step: 0.1 }
    })
 
    useEffect(() => {
        refWireMesh.current.geometry = refMesh.current.geometry
        }, [radius, widthSegments, heightSegments, phiStart, phiLength])

    return (
        <>
            <OrbitControls />

            <ambientLight intensity = {0.1} />

            <directionalLight 
                position = {[2, 1, 3]}
                intensity = {0.5}
            />
                  
            <mesh ref={refMesh}>
                <sphereGeometry args={[
                    radius, 
                    widthSegments, heightSegments, 
                    phiStart * Math.PI/180, phiLength * Math.PI/180,
                    thetaStart * Math.PI/180, thetaLength * Math.PI/180
                ]} />

                <meshStandardMaterial color="#1abc9c" />
            </mesh>

            <mesh ref={refWireMesh}>
                <meshStandardMaterial 
                    emissive = "yellow" 
                    wireframe={true}
                />
            </mesh>

            <axesHelper scale={10} />
        </>
    )
}

export default MyElement3D

✅ CylinderGeometry의 args 속성

• args 인자
  • 윗면 반지름
  • 아랫면 반지름
  • 높이
  • 방사 방향에 대한 분할 수 (1 이상 정수)
  • 높이 방향에 대한 분할 수 (1 이상 정수)
  • 윗면과 아랫면에 대한 개방 여부 (true/false)
  • 시작 각도 (0 이상 360 미만 유리수)
  • 연장 각도 (0 이상 360 미만 유리수)

import { OrbitControls, Box } from "@react-three/drei";
import { useControls } from "leva";
import { useEffect, useRef } from "react";

function MyElement3D() {

    const refMesh = useRef()
    const refWireMesh = useRef()

    const { topRadius, bottomRadius, height, radialSegments, heightSegments, bopen, thetaStart, thetaLength } = useControls({
        
        topRadius: { value: 1, min: 0.1, max: 5, step: 0.01 },
        bottomRadius: { value: 1, min: 0.1, max: 5, step: 0.01 },
        
        height: { value: 1, min: 0.1, max: 5, step: 0.01 },

        radialSegments: { value: 32, min: 1, max: 256, step: 1},
        heightSegments: { value: 1, min: 1, max: 256, step: 1 },
        bopen: { value: false},

        thetaStart: { value: 0, min: 0, max: 360, step: 0.01 },
        thetaLength: { value: 0, min: 0, max: 360, step: 0.01 }
    })
 
    useEffect(() => {

        refWireMesh.current.geometry = refMesh.current.geometry
    }, [topRadius, bottomRadius, height, radialSegments, heightSegments, bopen, thetaStart, thetaLength])

    return (
        <>
            <OrbitControls />

            <ambientLight intensity = {0.1} />

            <directionalLight 
                position = {[2, 1, 3]}
                intensity = {0.5}
            />

            <mesh ref={refMesh}>

                <cylinderGeometry args = {[
                    topRadius, bottomRadius,
                    height,
                    radialSegments, heightSegments,
                    bopen,
                    thetaStart * Math.PI/180, thetaLength * Math.PI/180
                ]} />

                <meshStandardMaterial color="#1abc9c" />
            </mesh>

            <mesh ref={refWireMesh}>

                <meshStandardMaterial 
                    emissive = "yellow" 
                    wireframe={true}
                />
            </mesh>

            <axesHelper scale={10} />
        </>
    )
}

export default MyElement3D

• 이 외에도 TorusGeometry 등, 다양하다.

• Three.js 공식문서에서 확인하고 직접 조작할 수 있다.