TIL-2024.03.11 - 3js - Fonts - 2

 

목표:

1. 글자의 중앙 정렬
2. Texture  
3. Spot Light

 

------- 중앙 정렬

 

computeBoundingBox

 

    // 1. BoundingBox를 사용한 중앙 정렬
    textGeometry.computeBoundingBox(); // 객체의 경계 상자
    textGeometry.translate(
        -(textGeometry.boundingBox.max.x - textGeometry.boundingBox.min.x) * 0.5,
        -(textGeometry.boundingBox.max.y - textGeometry.boundingBox.min.y) * 0.5,
        -(textGeometry.boundingBox.max.z - textGe ometry.boundingBox.min.z) * 0.5,
    ); // 이동
    
    // 2. TextGeometry.Center 를 사용한 중앙 정렬
    textGeometry.center();

 

 

------- Texture

 

const textureLoader = new THREE.TextureLoader().setPath("./assets/textures/"); // Base-path 잡기
const textTexture = textureLoader.load("holographic.jpeg");
// const textTexture = textureLoader.load("gradient.jpg");
textMaterial.map = textTexture;

 

 

 

Texture - 질감

 

 

------- Spot Light

 

 

 

Spot Light은 원뿔 모양이다

 

const spotlight = new THREE.SpotLight(
        0xFFFFFF, // 색상
        2.5, // 빛의 강도
        30, //빛이 닺는 거리
        Math.PI * 0.15, // 퍼지는 각도
        0.2, // 빛이 감쇠하는 정도
        0.5, // 거리에 따라 빛이 어두워지는 양
    );
    
    // Spotlight 위치 및 대상 설정:
    spotlight.position.set(0, 0, 3);
    spotlight.target.position.set(0, 0, -3);
    
    // Scene에 스포트라이트 및 대상 추가:
    scene.add(spotlight);
    scene.add(spotlight.target);
    
    // 스포트라이트 헬퍼 생성 및 추가:
    const sportLightHelper = new THREE.SpotLightHelper(spotlight);
    scene.add(sportLightHelper);


    const gui = new GUI();
    
    // Spotlight 컨트롤러 폴더 생성:
    const spotLightFolder = gui.addFolder("SpotLight"); // 하나로 관리
    
    // Spotlight 속성에 대한 컨트롤러 추가:
    spotLightFolder.add(spotlight, "angle").min(0).max(Math.PI * 0.2).step(0.01); // 앵글 > 원의 넓이
    spotLightFolder.add(spotlight.position, "z").min(1).max(10).step(0.01).name("position.z"); // z > 원뿔의 위치
    spotLightFolder.add(spotlight, "distance").min(1).max(30).step(1); // 양극간의 거리 > 원뿔끝에서 원까지의 거리 
    spotLightFolder.add(spotlight, "decay").min(0).max(10).step(0.1); // 조명의 감쇠
    spotLightFolder.add(spotlight, "penumbra").min(0).max(10).step(0.1); // 그림자의 부드러운 가장자리