youkantoe

画像を探すとき用の名前と英語メモ(創作用)

2020 / 4 / 19

建物系

名前 英語
遺跡 ruins , remains
廃墟 ruins
window
カーテン curtain
fabric , cloth
建物 building , structure
階段 stair , step
bridge
街灯 street lamp
都市 urban , town , city
工場 firm , factory
ネオン neon
flag
送電線
電信柱
電線
信号機
温泉
銭湯
鉄塔

小物系

名前 英語
umbrella
ランプ ramp , lamp
vase , jar , bottle
電球 lamp , electric lamp

自然系

名前 英語
木漏れ日 sunshine filtering through foliage
葉っぱ leafage、leaf、foliage
haze , mist , fog
smoke
grass
水滴 droplet , water droplet , drop of water
wave motion , wave
波紋 wave pattern , influence , circular slit , ripple
rain , rainfall
snow , snowfall
ぼんやりとした光 Light vague , glimmer

服系

名前 英語
マント mantle

生き物系

名前 英語
クジラ whale , blower
おばけ spook、specter、spectre、ghost
ペンギン penguin
金魚 goldfish
カラス crow
化石 fossil
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>fSpy2three.js demo</title>
  <style>
    html,body {
      margin: 0;
      padding: 0;
      height: 100%;
    }
    #myCanvas {
      width: 100%;
      height: 100%;
      background-image: url(./image.jpg);
      background-size: cover;
      background-position: center center;
      background-repeat: no-repeat;
    }
  </style>
</head>
<body>
  <canvas id="myCanvas"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/109/three.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
  <script>
    // window.addEventListener('load',init);

    /**
     * fSpyのjsonデータからthree.jsのカメラを作成するクラス 
     * 
     */
    class FSpyCamera {
      constructor( jsonPathOrjsonData , renderer , callback = null , options = {} ) {

        /**
         * 第一引数で取得したjson or jsonへのパス or jsonから生成したオブジェクトを格納する 
         * @param {string|object}
         */
        this.inputData = jsonPathOrjsonData;

        /**
         * fSpyから取得データのアスペクトを収納 
         * @type {number|null}
         */
        this.fspyRatio = null;

        /**
         * fSpyから取得したjsonオブジェクトを格納
         * @type {object|null}
         */
        this.cameraData = null;

        /**
         * 行列オブジェクト
         * @type {THREE.Matrix4}
         */
        this.matrix = new THREE.Matrix4();

        /**
         * ウィンドウの幅
         * @type {number}
         */
        this.winWidth = window.innerWidth;

        /**
         * ウィンドウの高さ 
         * @type {number}
         */
        this.winHeight = window.innerHeight;

        /**
         * windowの幅と高さの比率をここに収納 
         * @type {number}
         */
         this.winRatio = this.winWidth / this.winHeight;

        /**
         * three.jsのカメラ
         * @type {THREE.PerspectiveCamera|null}
         */
        this.camera = null;

        /**
         * three.jsのWebGLRendererオブジェクト
         * @type {THREE.WebGLRenderer}
         */
        this.renderer = renderer;

        /**
         * fSpyから取得したデータのうちのcameraTransform.rowsが入ります
         * @type {array}
         */
        this.cameraTransforms = [];

        /**
         * カメラ取得後のコールバック関数
         * @type {object|null}
         */
        this.callback = callback || null;

        /**
         * 引数でもらった jsonPathOrjsonData の型を収納
         * @type {string}
         */
        this.jsonType = this._getType(this.inputData);

        this._init();

      }

      _init() {

        if( this.jsonType === "string" ){
          this._loadJson(this.inputData);
        }else if( this.jsonType === "object" ){
          this.cameraData = this.inputData;
          this._onLoadJson();
        }else {
          console.error("第一引数にfSpyのjsonのパスか、jsonをパースしたものを入れてください");
          return;
        }

      }

      /**
       * fSpyのjsonデータを取得する関数
       * @param {string} name カメラデータのパス
       * @return {void}
       */
      _loadJson(name) {
        axios.get(name).then( res => {
          this.cameraData = res.data;
          this._onLoadJson()
        })
      }


      /**
       * fSpyのjsonデータを読み込んだあとに実行される関数
       * @return {void}
       */
      _onLoadJson() {

        this.cameraTransforms = this.cameraData.cameraTransform.rows;
        this.fspyRatio = this._getFSpyRatio();
        this._setMatrix();
        this._createCamera();
        this._setRendererSettings();
        window.addEventListener('resize',this.onResize.bind(this));
        this._runCallback.bind(this)();

      }

      /**
       * マトリックスオブジェクトに数字をセットする 
       * @return {THREE.Matrix4} パラメータがセットされたMatrix4を返す
       */ 
      _setMatrix() {

        /**
         * fSpyのカメラのtransformの配列データ
         * @type {Array}
         */
        const mtxArray = this.cameraTransforms;
        /**
         * fSpyの多次元配列を一次元配列に変換 
         * @type {Array}
         */ 
        const matrixArray = mtxArray.reduce((pre,curernt) => {
          pre.push(...curernt);
          return pre;
        },[]);
        this.matrix.set(...matrixArray);

        return this.matrix;

      }

      /**
       * windowのアスペクト比を取得する関数 
       * @return {number}
       */
      _getWinRatio() {
        const w = window.innerWidth;
        const h = window.innerHeight;

        return w / h;
      }

      /**
       * fSpyのJSONから取得したもともとの画像のアスペクト比を返す
       * @return {number}
       */ 
      _getFSpyRatio() {

        const w = this.cameraData.imageWidth;
        const h = this.cameraData.imageHeight;

        return w / h;

      }

      _setRendererSettings() {

        this.renderer.alpha = true;
        // this.renderer.setSize(this.winWidth, this.winWidth / this.fspyRatio);
        this.renderer.setSize(this.winWidth, this.winHeight);
        console.log(this.winWidth);
        console.log(this.winWidth / this.fspyRatio);
        this.renderer.setClearColor( 0x000000 , 0 );

      }

      /**
       * three.jsのカメラを作成する関数
       * @return {void}
       */
      _createCamera() {

        /**
         * fSpyのカメラのtransformの配列データ
         * @type {Array}
         */
         const mtxArray = this.cameraTransforms;

        this.camera = new THREE.PerspectiveCamera(45, this.winWidth / this.winHeight , 0.01 , 10000 );
        this.camera.position.set( -0.6959172306086093 , -4.4653045032151235 , 9.234054171727681  );
        // this.camera.position.set( mtxArray[0][3] , mtxArray[1][3] , mtxArray[2][3] );
        console.log(  mtxArray[0][3] );
        console.log(  mtxArray[1][3] );
        console.log(  mtxArray[2][3] );
        console.log(this.matrix);
        this.camera.setRotationFromMatrix( this.matrix );
        console.log(this.camera.rotation);
        
      }

      onResize() {

        this.winWidth = window.innerWidth;
        this.winHeight = window.innerHeight;
        if( this.winWidth/ this.winHeight <= modelCameraAspect ){
            renderer.setSize( this.winWidth ,  this.winHeight );
            camera.aspect = this.winWidth /  this.winHeight;
            camera.zoom = 1;
        }else{
            renderer.setSize( this.winWidth ,  this.winHeight );
            camera.aspect = this.winWidth /  this.winHeight;
            camera.zoom = this.winWidth /  this.winHeight / modelCameraAspect;
        }
        this.renderer.render( scene , camera );
        this.camera.updateProjectionMatrix();

      }

      /**
       * コールバックを実行する関数 
       * @return {void}
       */
      _runCallback() {

        if( this._getType( this.callback ) === "function" ){
          this.callback(this);
        }

      }

      /**
       * 型情報を取得すための関数
       * @param {any} 型を調べたいもの
       * @return {string} 型情報
       * 
       */
      _getType(obj) {

        const toString = Object.prototype.toString;
        return toString.call(obj).slice(8, -1).toLowerCase();

      }

    }

    const renderer = new THREE.WebGLRenderer({
        canvas: document.querySelector('#myCanvas'),
        alpha: true,
    });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setClearColor( 0x000000 , 0 );

    const camera = new FSpyCamera("camera.json" , renderer , (ts) => {

      console.log(ts);


      const scene = new THREE.Scene();
      const camera = ts.camera;

      console.log(2.5);

      const geometry = new THREE.BoxGeometry(3,3,3);
      const material = new THREE.MeshNormalMaterial();
      const box = new THREE.Mesh(geometry, material);
      scene.add(box);

      console.log(box);

      console.log(renderer);
      // camera.lookAt(0,0,0);

      anim();

      function anim() {
        requestAnimationFrame(anim);
        renderer.render( scene , camera );
        box.rotation.y += 0.01;
        // console.log(box);
        // console.log("a");
      }

    });




    // function init(){
    //   const width = 1013 * 0.25;
    //   const height = 756 * 0.25;

    //   const m = new THREE.Matrix4();

    //   m.set(
    //     -0.9734138207025481,
    //     0.04196681158657723,
    //     -0.22517619854355045,
    //     -0.6959172306086093,

    //     0.0965054651828195,
    //     -0.8164170790874036,
    //     -0.5693415918095569,
    //     -4.4653045032151235,

    //     -0.2077311456068041,
    //     -0.5759357079567556,
    //     0.7906616415668815,
    //     9.234054171727681,

    //     0,
    //     0,
    //     0,
    //     1,

    //   );

    //   const renderer = new THREE.WebGLRenderer({
    //     canvas: document.querySelector('#myCanvas'),
    //     alpha: true,
    //   });
    //   renderer.setPixelRatio(window.devicePixelRatio);
    //   renderer.setSize(width, height);
    //   renderer.setClearColor( 0x000000 , 0 );
    //   const scene = new THREE.Scene();
    //   const camera = new THREE.PerspectiveCamera(45, width / height);
    //   camera.position.set( -0.6959172306086093 , -4.4653045032151235 , 9.234054171727681 );
    //   camera.setRotationFromMatrix( m );

    //   const geometry = new THREE.BoxGeometry(3,3,3);
    //   const material = new THREE.MeshNormalMaterial();
    //   const box = new THREE.Mesh(geometry, material);
    //   scene.add(box);

    //   anim();

    //   function anim() {
    //     requestAnimationFrame(anim);
    //     renderer.render( scene , camera );
    //     box.rotation.y += 0.01;
    //   }
    // }
  </script>
</body>
</html>