[threejs] 환경 맵 만들기 / 유리 질감 구현하기

import * as THREE from "./three.module.js";

import { OrbitControls } from './three/examples/jsm/controls/OrbitControls.js';

export default function example() {

    // Create a scene, camera, and renderer

    const scene = new THREE.Scene();

    const camera = new THREE.PerspectiveCamera(

        75,

        window.innerWidth / window.innerHeight,

        0.1,

        1000

    );

    const renderer = new THREE.WebGLRenderer();

    renderer.setSize(window.innerWidth, window.innerHeight);

    document.body.appendChild(renderer.domElement);

    // Create a sphere geometry (instead of box geometry)

    const sphereGeometry = new THREE.SphereGeometry(1, 32, 32);

    // Load a cube map texture (for environment mapping)

    const cubeTextureLoader = new THREE.CubeTextureLoader();

    const cubeMapTexture = cubeTextureLoader.load([

    './assets/images/album-three-d-section/humble_ft.jpg',

    './assets/images/album-three-d-section/humble_bk.jpg',

    './assets/images/album-three-d-section/humble_up.jpg',

    './assets/images/album-three-d-section/humble_dn.jpg',

    './assets/images/album-three-d-section/humble_rt.jpg',

    './assets/images/album-three-d-section/humble_lf.jpg',

    ]);

    scene.background = cubeMapTexture;

    // Create a material with environment mapping and transparency

    const sphereMaterial = new THREE.MeshStandardMaterial({

        color: 0xffffff,

        envMap: cubeMapTexture,

        transparent: true,

        opacity: 0.5,

        metalness: 1,

        roughness: 0.1,

        side: THREE.DoubleSide

    });

    // Create a sphere mesh (instead of cube mesh)

    const sphereMesh = new THREE.Mesh(sphereGeometry, sphereMaterial);

    scene.add(sphereMesh);

    // Position the camera

    camera.position.z = 3;

    // Add lights and controls

    const light = new THREE.DirectionalLight(0xffffff, 1);

    light.position.set(0, 1, 2);

    scene.add(light);

    const controls = new OrbitControls(camera, renderer.domElement);

    // Render loop

    const animate = () => {

        requestAnimationFrame(animate);

        renderer.render(scene, camera);

    };

    // Start the rendering loop

    animate();

}

// Call the example function to start rendering

example();