『firebase Storage + fbx Loader Test』

 

 

 

1 실험주제

파이어베이스 Storage의 fbx파일과 three.js 로더 연결

 

 

2 목표

1] 파이어베이스 Storage의 fbx파일을 Cors인증을 통해 가져오기

2] three.js fbx로더실행

3] fbx모델, 텍스처 연결하기

 

 

3 구현

1] 파이어베이스 Storage api실행

<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>
<script src="https://firebasestorage.googleapis.com/v0/b/webgame-786ab.appspot.com/o/lib%2Finflate.min.js?alt=media&amp;token=cfa299bc-ea60-45fd-ba0c-ff79a105a75d"></script>
<script src="https://firebasestorage.googleapis.com/v0/b/webgame-786ab.appspot.com/o/lib%2FFBXLoader.js?alt=media&amp;token=9a866676-0286-49ae-9d27-af380e3faea3"></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>

 

2] three.js fbx로더실행

 var loader = new THREE.FBXLoader();
	      loader.load( 'https://firebasestorage.googleapis.com/v0/b/webgame-786ab.appspot.com/o/models%2Ffbx%2Fconig3.fbx?alt=media&token=5563b799-ba8d-470a-969c-f619336bca94.fbx', function ( object ) {
					scene.add( object );
                                      
                              } );

fbx파일의 특성상 텍스처 파일을 저장할 수 있다.

3D모델 제작 소프트웨어에서 텍스처를 export하는 방식으로 추출한다면,

fbx파일만 import하는 것으로 텍스처를 적용할 수 있다.

 

 

 

3] 전체코드

<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>
<script src="https://firebasestorage.googleapis.com/v0/b/webgame-786ab.appspot.com/o/lib%2Finflate.min.js?alt=media&amp;token=cfa299bc-ea60-45fd-ba0c-ff79a105a75d"></script>
<script src="https://firebasestorage.googleapis.com/v0/b/webgame-786ab.appspot.com/o/lib%2FFBXLoader.js?alt=media&amp;token=9a866676-0286-49ae-9d27-af380e3faea3"></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 = {
   //파이어베이스 api key입력
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
</script>

<script>
      let scene, camera, renderer, controls, loader;
      
      var storage = firebase.storage();
      var storageRef = storage.ref();
     
      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(1,10,40);
          scene.add(camera);
         
         var loader = new THREE.FBXLoader();
	      loader.load( 'https://firebasestorage.googleapis.com/v0/b/webgame-786ab.appspot.com/o/models%2Ffbx%2Fconig3.fbx?alt=media&token=5563b799-ba8d-470a-969c-f619336bca94.fbx', function ( object ) {
					scene.add( object );
                                      
                              } );

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

          let hemiLight1 = new THREE.HemisphereLight( 0xffffbb, 0x080820, 1);
              scene.add(hemiLight1);

          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>