『Firebase Storage + GLTF 3D Model import Test』

 

 

[마우스 zoom in || out, 회전 가능]

 

1 실험주제 ::

파이어베이스 storage, three.js를 활용한 gltf파일 import

 

 

2 목표 ::

1] 티스토리 블로그 & 파이어베이스 firestore간 Cors 해제

2] gltf Draco 로더파일 받기

3] three.js GLTF로더 구현

4] 블로그 html 태그에 3D뷰포트 기능 구현

 

 

3 구현 ::

3-1 라이브러리 import[블로그 특성상 CDN방식 사용]

<script src="https://firebasestorage.googleapis.com/v0/b/webgame-786ab.appspot.com/o/lib%2Fthree.js?alt=media&amp;token=6ebc35b5-2458-46e8-8186-5909ad442972"></script>
<script src="https://firebasestorage.googleapis.com/v0/b/webgame-786ab.appspot.com/o/lib%2FOrbitControls.js?alt=media&amp;token=09de455b-9bc9-43d9-8f1a-ff688a92e078"></script>
<script src="https://firebasestorage.googleapis.com/v0/b/webgame-786ab.appspot.com/o/lib%2FGLTFLoader.js?alt=media&amp;token=9edd36ec-ce16-4a5d-92d9-e8a3792da7f2"></script>
<script src="https://firebasestorage.googleapis.com/v0/b/webgame-786ab.appspot.com/o/lib%2FDRACOLoader.js?alt=media&amp;token=f7fa45b0-79af-4c30-aac0-d378dcb85e2d"></script>
<div id="loaderTest" style="width:600px; height:400px;"></div>

<script src="https://www.gstatic.com/firebasejs/7.3.0/firebase.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.3.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.3.0/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.3.0/firebase-storage.js"></script>

 

3-2 FireStorage에서 Draco 패스 설정하기

 var storage = firebase.storage();
      var storageRef = storage.ref();
      let dracoPath = storageRef.child("draco");
      let ducks = storageRef.child("test")

firebase의 Storage에서는

firebase.storage( )의 레퍼런스에 .child( )메서드를 활용해서 경로에 접근할 수 있다.

 

 

3-3 gltf  import

gltf파일을 import하는 과정은

three.js gltf로더 부분을 참고한다.

threejs.org/docs/index.html#examples/en/loaders/GLTFLoader

three.js docs

 

 

 

4 최종코드

 

<script src="https://firebasestorage.googleapis.com/v0/b/webgame-786ab.appspot.com/o/lib%2Fthree.js?alt=media&amp;token=6ebc35b5-2458-46e8-8186-5909ad442972"></script>
<script src="https://firebasestorage.googleapis.com/v0/b/webgame-786ab.appspot.com/o/lib%2FOrbitControls.js?alt=media&amp;token=09de455b-9bc9-43d9-8f1a-ff688a92e078"></script>
<script src="https://firebasestorage.googleapis.com/v0/b/webgame-786ab.appspot.com/o/lib%2FGLTFLoader.js?alt=media&amp;token=9edd36ec-ce16-4a5d-92d9-e8a3792da7f2"></script>
<script src="https://firebasestorage.googleapis.com/v0/b/webgame-786ab.appspot.com/o/lib%2FDRACOLoader.js?alt=media&amp;token=f7fa45b0-79af-4c30-aac0-d378dcb85e2d"></script>
<div id="loaderTest" style="width:600px; height:400px;"></div>

<script src="https://www.gstatic.com/firebasejs/7.3.0/firebase.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.3.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.3.0/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.3.0/firebase-storage.js"></script>
<script>
  // Your web app's Firebase configuration
  var firebaseConfig = {
   //파이어베이스 Storage Config정보 입력
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
</script>

<script>
      let scene, camera, renderer, controls, loader;
      
      var storage = firebase.storage();
      var storageRef = storage.ref();
      let dracoPath = storageRef.child("draco");
      let ducks = storageRef.child("test")
     
      let domEl = document.getElementById('loaderTest');
      init();
     function init(){
          scene= new THREE.Scene();
          scene.background = new THREE.Color(0xaaaaaa);
          
          camera = new THREE.PerspectiveCamera(55,domEl.clientWidth/domEl.clientHeight,0.01,1000);
          camera.position.set(0,3,3);
          scene.add(camera);
          console.log('드라코패스?||'+dracoPath);
        
           loader = new THREE.GLTFLoader();
           THREE.DRACOLoader.setDecoderPath(dracoPath);
                loader.setDRACOLoader(new THREE.DRACOLoader);
              
     

         loader.load(
                 'https://firebasestorage.googleapis.com/v0/b/webgame-786ab.appspot.com/o/models%2Fgltf%2Fduck%2FDuck.gltf?alt=media&token=ec69b6c0-11e4-4ee2-b393-63f7b3ea3633.gltf',
                  function(gltf){
                         scene.add(gltf.scene);
                         gltf.scene;
                         gltf.asset;
                  },
                  function(xhr){
                        console.log((xhr.loaded/xhr.total*100)+'% loaded');
                  },
                  function(error){
                          console.log('An error happend');
                  }
         )

          let directionLight1 = new THREE.DirectionalLight(0xffffff);
              directionLight1.position.set(1,2,2);
              scene.add(directionLight1);

          let geometry = new THREE.BoxGeometry(1,1,1);
          let material = new THREE.MeshLambertMaterial();
          let box1 = new THREE.Mesh(geometry,material);
              box1.position.set(2,3,2)
              scene.add(box1);    

          renderer = new THREE.WebGLRenderer();
          renderer.setSize(domEl.clientWidth, domEl.clientHeight);
          domEl.appendChild(renderer.domElement);

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

          window.addEventListener('resize',onResize,false);
          update();
   }

    function update(){
          requestAnimationFrame(update);
          renderer.render(scene,camera);
   }

   function onResize(){
          camera.aspect = domEl.clientWidth/domEl.clientHeight;
          camera.updateProjectionMatrix();
          renderer.setSize(domEl.clientWidth,domEl.clientHeight);
   }
</script>