three.js 만들어보기

Kiyun·2024년 1월 30일

js

목록 보기

15/20

전체코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three.js with GLTF Model</title>
</head>
<body>

    <!-- 3D 그래픽을 렌더링할 Canvas 엘리먼트를 생성합니다. -->
    <canvas id="canvas" width="800" height="600"></canvas>
    
    <!-- JavaScript 모듈의 import 맵을 정의합니다. -->
    <script type="importmap">  
    {
        "imports": {
          "three": "https://unpkg.com/three@0.141.0/build/three.module.js",
          "GLTFLoader" : "https://unpkg.com/three@0.141.0/examples/jsm/loaders/GLTFLoader.js",
          "OrbitControls": "https://unpkg.com/three@0.141.0/examples/jsm/controls/OrbitControls.js"
        }
    }
    </script>

    <!-- JavaScript 모듈을 사용하여 Three.js와 관련 라이브러리를 가져옵니다. -->
    <script type="module">
        // GLTFLoader, THREE 및 OrbitControls를 가져옵니다.
        import { GLTFLoader } from 'GLTFLoader';
        import * as THREE from 'three';
        import { OrbitControls } from 'OrbitControls';

        // Three.js 관련 객체들을 초기화합니다.
        let scene = new THREE.Scene();
        let renderer = new THREE.WebGLRenderer({
            canvas: document.querySelector('#canvas'),
            antialias: true
        });
        renderer.outputEncoding = THREE.sRGBEncoding;

        // 원근 카메라를 생성하고 초기 위치를 설정합니다.
        let camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 1, 1000);
        camera.position.set(0, 10, 0); // 아래에서 모델을 보기 위해 높이를 조정

        // 카메라가 모델의 아래쪽을 향하도록 설정
        camera.lookAt(new THREE.Vector3(0, 0, 0));

        // 백그라운드 색상을 흰색으로 설정합니다.
        scene.background = new THREE.Color('white');
        
        // Directional Light(햇빛 모사)를 생성하여 씬에 추가합니다.
        let light = new THREE.DirectionalLight(0xffffff, 1);
        scene.add(light);
        
        // GLTFLoader를 사용하여 glTF 모델을 로드하고 씬에 추가합니다.
        let loader = new GLTFLoader();
        loader.load('scene.gltf', function(gltf){
            scene.add(gltf.scene);
        });

        // OrbitControls를 생성하고 설정합니다. (마우스로 화면 회전, 이동 등을 가능하게 함)
        const controls = new OrbitControls(camera, renderer.domElement);
        controls.enableDamping = true;
        controls.dampingFactor = 0.25;
        controls.screenSpacePanning = false;
        controls.maxPolarAngle = Math.PI / 2;

        // 애니메이션 함수를 정의하여 화면을 렌더링하고 컨트롤을 업데이트합니다.
        function animate() {
            requestAnimationFrame(animate);
            controls.update();
            renderer.render(scene, camera);
        }
        animate();

        // 창 크기가 조정될 때 카메라 및 렌더러 크기를 동적으로 조정합니다.
        window.addEventListener('resize', () => {
            const newWidth = window.innerWidth;
            const newHeight = window.innerHeight;
            
            camera.aspect = newWidth / newHeight;
            camera.updateProjectionMatrix();

            renderer.setSize(newWidth, newHeight);
        });
    </script>
</body>
</html>

orbitContrls

// OrbitControls를 사용하여 마우스 및 터치 입력으로 3D 공간을 회전 및 이동하는 컨트롤을 설정합니다.

// enableDamping: 부드러운 감속 효과를 활성화합니다. 마우스 드래그 또는 터치 이동이 자연스럽게 감속됩니다.
controls.enableDamping = true;

// dampingFactor: enableDamping이 활성화된 경우, 이 값이 높을수록 감속 효과가 더 강력해집니다.
controls.dampingFactor = 0.25;

// screenSpacePanning: true로 설정하면 화면 고정 평면에서의 패닝이 가능해집니다. (기본값은 false)
controls.screenSpacePanning = false;

// maxPolarAngle: 카메라의 최대 위도 각도를 설정합니다. 이 값 이상으로는 카메라가 올라가지 않습니다.
// Math.PI / 2로 설정하면 상하로 90도까지만 이동이 가능합니다. (수평 기준)
controls.maxPolarAngle = Math.PI / 2;

Kiyun

이전 포스트

three.js 로 인터렉티브한 페이지 만들기

다음 포스트

three.js 만들어보기

js

전체코드

orbitContrls

three.js 로 인터렉티브한 페이지 만들기

Swiper js

0개의 댓글