[3D 인터랙티브 웹] glTF, glb 모델 불러오기, 애니메이션 불러오기

[ 기본 Three.js 세팅 ]

import { THREE, OrbitControls, GenerateCanvas } from "./study/settings";

const canvas = GenerateCanvas();

let renderer, scene, camera, controls;

function init() {

    renderer = new THREE.WebGLRenderer({ canvas, antialias: true });

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(

        32,

        window.innerWidth / window.innerHeight

    );

    camera.position.set(0, 0, 10);

    controls = new OrbitControls(camera, canvas);

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

    directionalLight.position.set(1, 1, 1);

    scene.add(directionalLight);

    const sphere = new THREE.SphereGeometry();

    const material = new THREE.MeshStandardMaterial();

    const mesh = new THREE.Mesh(sphere, material);

    scene.add(mesh);

    // start gltf load (type below)

    // end gltf load

    render();

}

function render() {

    requestAnimationFrame(render);

    renderer.render(scene, camera);

    controls.update();

}

init();

 

1. rocker gltf 파일 불러오기 - GTLFLoader();

;/ start gltf load (type below)

    const loader = new GLTFLoader();

    loader.load("/gltf/rocket.glb", (gltf) => {

        scene.add(gltf.scene)

    });

 

모델링 결과

 

 gltf 파일 구조 살펴보기  - Console창에서 scene -> children -> children -> Mesh 정보 확인하기

  const loader = new GLTFLoader();

    loader.load("/gltf/rocket.glb", (gltf) => {

        scene.add(gltf.scene)

        console.log(gltf); 

    });

 

GLTF scene 내의 Mesh Object 정보 바꿔주기 -> 그림자를 적용하기 위해서 Mesh Obejct들 하나하나 Shadow 설정을 true로 바꿔줘야함! 

• traverse -> gltf 파일 전체적으로 scanning , 모델링 검사 기능
• Mesh Obejct에 해당하는 것들만 수정하기  -> 그림자 활성화
• Material 정보 바꾸기 -> 그림자 texture 및 color 수정

 renderer.shadowMap.enabled = true;

 

 directionalLight.castShadow = true;

 directionalLight.shadow.mapSize.width = 2048; //그림자 해상도 올려주기

 directionalLight.shadow.mapSize.height = 2048; 

 

 

// start gltf load (type below)

    const loader = new GLTFLoader();

    loader.load("/gltf/rocket.glb", (gltf) => {

        // scene.add(gltf.scene)

        // console.log(gltf);

        const model = gltf.scene;

        model.traverse(obj => {

            if(obj.isMesh){

                console.log(obj)

                obj.castShadow = true;

                obj.receiveShadow= true;

                obj.material.metalness = 0;

            }

        })

 

모델링 결과

 

 

2. 애니메이션 불러오기

첫번째 방법 : Three.js 내에서 애니메이션 주기 -> render 함수 이용

function render() {

    requestAnimationFrame(render);

    renderer.render(scene, camera);

    controls.update();

    animate();

}

function animate() {

    gltfModel.rotation.y += 0.01;

}

 

두번째 방법 : Cinema 4D에서 작업한 Key frame animation을 그대로 Three.js에서 플레이하는 방법 -> AnimationMixer 이용해서 key frame 정보 가져오기

   mixer = new THREE.AnimationMixer(model);

        gltf.animations.forEach(clip => {

            mixer.clipAction(clip).play();

        })

 

function animate() {

    // gltfModel.rotation.y += 0.01;

    if(mixer){

        mixer.update(1/60);

    }

}

 

애니메이션 결과