TIL-2024.03.15 - 3js - 3D 공간 만들기

 

 

 

 

 

 

목표:

1. Cube Map Texture를 활용한 3차원 공간 표현
   1.1) Texture Loader
   1.2) Cube Texture Loader
2. 360도 Panorama Texture를 활용한 3차원 공간 표현 
3. envMap 

 

 

 

Cube Map Texture를 활용한 3차원 공간 표현:

   1. Texture Loader

    /* 1. Cube Map Texture 를 활용한 3차원 공간 - 1. TextureLoader */
    
    /* OrbitControls */
    const control = new OrbitControls(camera, renderer.domElement);
    control.minDistance = 5;
    control.maxDistance = 100;

    /* Texture Loader */
    const textureLoader = new THREE.TextureLoader().setPath("assets/textures/Yokohama/");
    const images = [
        "posx.jpg", "negx.jpg",
        "posy.jpg", "negy.jpg",
        "posz.jpg", "negz.jpg",
    ];
    
    /*Geometry - Box Geometry*/
    const boxGeomtry = new THREE.BoxGeometry(5000, 5000, 5000);
    const boxMaterials =  images.map(image => new THREE.MeshBasicMaterial({
        map: textureLoader.load(image),
        side: THREE.BackSide,
    }))
    const skybox = new THREE.Mesh(boxGeomtry, boxMaterials);
    scene.add(skybox);

 

 

 

 

2. Texture Loader

 

    /* 2. Cube Map Texture 를 활용한 3차원 공간 - 2. CubeTextureLoader*/
    /* OrbitControls */
    const control = new OrbitControls(camera, renderer.domElement);
    control.minDistance = 5;
    control.maxDistance = 100;

    /* Texture Loader */
    const cubeTextureLoader = new THREE.CubeTextureLoader().setPath("assets/textures/Yokohama/");
    const images = [
        "posx.jpg", "negx.jpg",
        "posy.jpg", "negy.jpg",
        "posz.jpg", "negz.jpg",
    ];

    const cubeTexture = cubeTextureLoader.load(images);
    scene.background = cubeTexture;

 

 

 

 

 

360도 Panorama Texture를 활용한 3차원 공간 표현:

 

/* 3. Panorama Texture 를 활용한 3차원 공간 */
/* OrbitControls */
const control = new OrbitControls(camera, renderer.domElement);
control.enableZoom = false;
control.enableDamping = true;
control.autoRotate = true;
control.autoRotate = 0.1;

/* TexutreLoader with EquirectangularRefractionMapping */
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load("assets/textures/village.jpeg");
// texture.mapping = THREE.EquirectangularRefractionMapping; // 굴절 효과를 시뮬레이션하는 유형의 텍스처 매핑
texture.mapping = THREE.EquirectangularReflectionMapping; // 반사 효과를 시뮬레이션하는 유형의 텍스처 매핑
scene.background = texture;

 

 

 

 

 

envMap:

 

 

// /* Sphere Geomtry */
const sphereGeomtry = new THREE.SphereGeometry(30, 50, 50);
const spehereMaterial = new THREE.MeshBasicMaterial({
    envMap: texture,
    reflectivity: 0.9,
});
const sphere = new THREE.Mesh(sphereGeomtry, spehereMaterial);
scene.add(sphere);

// /* GUI */
gui.add(texture, "mapping", {
    Reflaction: THREE.EquirectangularRefractionMapping,
    Reflection: THREE.EquirectangularReflectionMapping
}).onChange((event) => {
    spehereMaterial.needsUpdate = true;
});
gui.add(spehereMaterial, "reflectivity").min(0).max(1).step(0.01);
gui.add(spehereMaterial, "refractionRatio").min(0).max(1).step(0.01);