戻る
2021/10/21

3D floating photos 32

[実行サンプル](click)

前に、64個の画像表示を作成したが、見る人によっては長すぎる、スマホでは重すぎて異常終了することがある、ということで32個の画像にした。
 参考)3D photo floating 64

任意のサムネイル画像をクリックして中央に表示できないかとの感想があり、対処。何気ないクリック操作だが結構難儀した。

以下に実際のサンプルコードを記述しておく

html


<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta name="keywords" content=" 3d photo ,  three.js audio visualizer " />
<meta name="description" content="3d photo " />
<title> 3D photos 2 s </title>
<link rel="stylesheet" type="text/css" href="3d.css">
<style>
<!--
body { background-image: linear-gradient(45deg, #e6e6fa , #000000); width:100% ; margin:auto ;text-align:center;background-repeat: no-repeat; }
-->
</style>
</head>
<body>
<div id="root">
<div id="modoru">
<a href="#" onClick="history.back(); return false;">戻る</a>
</div>
<div id="btn_box">
  <span id="btn_g">
    <input type="button" value="Guide" onclick="clickBtng()"/>
  </span>
  <span id="btn_mm">
    <input type="button" id="manual" value="Manual" onclick="clickBtn1(this.id,this.value)">
  </span>
  <span id="btn_m1">
    <input type="button" id="music/Chopin-Nocturne-No1.mp3%music/Chopin-Nocturne-No8.mp3%music/Chopin-Nocturn-19.mp3%music/Chopin-Nocturn-20.mp3" value="Auto" onclick="clickBtn1(this.id,this.value)">
  </span>

  <span id="msgtxt1"> </span> <!-- timer -->
  <span id="msgtxt2"></span>   <!-- manual   -->
 </div>
 <div id="txt_box">
  <span id="msgtxt3"></span>    <!-- img text -->
 </div>

 <div id="canvas_container">
 <!-- 3D -->
 <canvas id="canvas3d"></canvas>
 </div>
<!-- three.jsを読み込む-->
<script src="js/three.js"></script>
<script src="js/OrbitControls.js"></script>
<script src="js/fphotos32.js"></script>
</div> 

<div style="clear:both;"></div>

</body>
</html>

3d.css


/* common body 2020.03.05 */
html {
        font-size:16px;    /* base font-size */
      }
body  {
       max-width:1500px;  
       font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
       font-weight: 500;
       width:1500px;
       height:900px;
       background-color:black;  
       margin:0;
      }
#root {
     width:100%;
     margin:0px;
     }
#select_box {
     width:98%;
     margin:2px auto 0px 10px;
     padding:0px;
     text-align:left;
     }
#btn_box {
     margin:2px auto 0px 10px;
     text-align:left;
     }
#txt_box {
     margin:2px auto;
     text-align:center;
     }
#select_box input {
     background-color: transparent;
     color:ivory;
     padding:0px;
     }
#btn_g , #btn_mm , #btn_m1 , #btn_m2 {
     border:1px ridge white;
     border-radius:5px;
     margin:0px 2px ;
     padding:0px;
     font-size:0.8rem;
    }
#canvas_container {
     width:80%;
     margin:auto ;
     }
#canvas3d {
     width:100%;
     height: calc(99vw / 1.77 );  
     margin:0px;
     padding:0px;
     }
#canvasaudio {
     width:80%;
     }
form select {
     color:black;
     }
form option value {
     background-color:green;
     }
#msgtxt1 , #msgtxt2 , #msgtxt3  {
    color : ivory ;
    font-size:1.0rem;
    text-align:left;
    }
#msgtxt1 {                               /* timer */
   margin: 0px 10px;
   }
#msgtxt3 {                              /* img text */
     border:2px ridge silver;
     border-radius:5px;
     padding:0px 2px;
     font-size:1.0rem;
     color:black;
    text-align:left;
   }

/* modoru */
#modoru {
      width:5%;
      margin:0px auto 10px 10px;
      float:left;
      text-align:center;
      font-size:0.8rem;
      padding:1px;
      }
#modoru a:link , #modoru a:visited  {
      display:block;
      text-decoration:none; 
      border:1px ridge gray;
      border-radius:5px;
      color:white;
      }
#modoru a:hover  {
      display:block;
      text-decoration:none; 
      border:1px ridge ivory;
      border-radius:5px;
      color:orange;
      }

/*------------------ mobile responsive -----------------------------*/
@media screen and (max-width: 480px) { 
#msgtxt1 , #msgtxt2 , #msgtxt3 {
    font-size:0.8rem;
   }
#canvas3d {
     width:100%;
     height:100vw ;  
    }
#modoru   {
    width:10%;
    } 

}
/* --------------------------------------------------------------------*/

fphotos32.js(全体)


// ----------------------- float photos  ---- 2021/09/30 -----------------------
//  3D photo album : Three.js  JavaScript libraries
//  32 image , manual center display
// --------------------------------------------------------------------------------
// --------------------------------------------------------------------------------
//  manual button click
// -------------------------------------------------------------------------------
function clickBtng(){
  gtxt1 = " ・手動は「Manual」を押して小画像をクリックして下さい<br> 小画像全体を表示するには隅のどこかを押して下さい"
  gtxt2 = " ・音楽付き自動は「Auto」を押して開始して下さい"
  gtxt3 = " ・ボタンを再度押すときはその前にブラウザの丸い矢印を押して更新して下さい"
  gtxt4 = " ・古いブラウザやスマホでは正常に稼働しないことがあります"
  gtxt5 = " ・このメッセージを消すにはもう一度ボタンを押してください"
  gtxt = '<br>' + gtxt1 + '<br>' +  gtxt2 + '<br>' +  gtxt3 +  '<br>' + gtxt4 +  '<br>' + gtxt5 ;
  str0 = document.getElementById("msgtxt2").innerHTML
  if ( str0 === "" ) {str = gtxt}
  else {str = "" };
  document.getElementById("msgtxt2").innerHTML = str ;
};
// ---------------------------------------------------------------------------
//  initialize start
// ---------------------------------------------------------------------------
function clickBtn1(id , value){
  document.getElementById("btn_mm").style.backgroundColor = "gray";     // reset background of button
  document.getElementById("btn_m1").style.backgroundColor = "gray";
  document.getElementById("msgtxt3").style.backgroundColor = "white";
  // ---------------------- global const
  width  = window.innerWidth; // 画面横フルサイズ
  height = window.innerHeight; // 画面縦フルサイズ

  let resp = 0 ;
  if (width / height  < 1 ) { resp = 1 }   // smart phone
  if (value.match("Manual")) { mode = "m" ,  document.getElementById("btn_mm").style.backgroundColor = "orange";}   // manual
  if (value.match("Auto"))    { mode  = "a" ,  document.getElementById("btn_m1").style.backgroundColor = "orange";}   // auto fast

  var userAgent = window.navigator.userAgent.toLowerCase();    // get browser 

  let sst = 0
  let sst0 = 0

  const imgw = (width / 8) * 0.8    // image width
  const imgh  = imgw / 1.77   // image height
  const imgd  = 0         // image depth
  const cpx = 0 ;         // center position x
  const cpy = 0 ;         // center position y
  //  const cpz = 300 ;      // center position z    define at camera position

  let im = 1 ;           // list number of mesh image
  let cpzi = 1 ;
  let tsls = 10 ;                             // speed default
  let imsvx = 0    // mesh restore position
  let imsvy = 0    // mesh restore position
  let imsvz = 0    // mesh restore position
  let csw = 0 ;
  let endflag = 0 ;              // end flag
  let tmsh = 0   ;               // text mesh
  let audiovolume =  1.0 ;   // audio volume
 var request , source , stopflag , closeflag = 0;

  // ---------------------------------------------------------------------------
  //   read music names from html and put in array
  // ---------------------------------------------------------------------------
  if ( mode != "m") {
    playlist = id.split("%", 8);   // take music name
    var mindex = 0;
    audionext ();

    function audionext () {                        // audio setup & next
      if ( mindex < playlist.length ) {
        audiosrc = playlist[mindex]             // audio name
        console.log(audiosrc)
        playSound(audiosrc);                     // play sound
        mindex++;
        mtitle = audiosrc.replace("mp3" , "" ).replace("music/" , "").replace("." , "");     // music title
        settext(mtitle)                          // mesh text write
      }
      else {
        audiosrc = playlist[0]
        playSound(audiosrc)
        mindex = 0;
      }
    };

    // ---------------------------------------------------------------------------
    //   web audio api define  
    //      XMLHttpRequest() : Asynchronous JavaScript + XM
    //      AudioContext()      : audio-processing
    //      decodeAudioData(): decode audio data asynchronously
    // ---------------------------------------------------------------------------

    function playSound(audiosrc) {
      request = new XMLHttpRequest();
      request.open("GET", audiosrc , true);
      request.responseType = "arraybuffer";
      request.onload = completeOnLoad;
      request.send();      // request to server
    };
    function completeOnLoad() {
      context = new AudioContext();
      source  = context.createBufferSource();
      gain     = context.createGain();                                   // control gain
      context.decodeAudioData(request.response, function (buf) {
        source.buffer = buf;
        if ( userAgent.indexOf('safari') !== - 1 && userAgent.indexOf('chrome') === - 1 ) { source.loop = true }  // loop for safari
        else {source.loop = false }
        source.connect(gain)                                             // source  gain
        source.onended = function() {                                // audio end event
          closeAudioContext()
          if (endflag == 0 ) {
            audionext()
          };                                                      // next audio play
        };
      });
      source.connect(context.destination);
      gain.connect(context.destination);                 // gain destination
      gain.gain.value = audiovolume ;
      source.start(0);                                            // start audio
    };
    function playPause() {                                     // audio pause
      if (stopflag == 0) {
        context.suspend()
        stopflag = 1
      } else {
        context.resume()
        stopflag = 0
      }
    };
    function closeAudioContext() {       // audio stop
      if (closeflag == 0) {
        context.close()                          // release resource
        closeflag = 1
      }
    };
    function playVolumnDown() {         // volume gain down
      gain.gain.value = 0.1
    };
  };
  // ---------------------------------------------------------------------------
  //  read image array
  // ---------------------------------------------------------------------------

  readimg();

  // ---------------------------------------------------------------------------
  //  Three define
  //     renderer : 規定の書式に従ってデータや画像を表示させるためのプログラム
  // ---------------------------------------------------------------------------
  const canvasElement = document.querySelector('#canvas3d')                         // get canvas
  const renderer = new THREE.WebGLRenderer({ canvas: canvasElement , alpha:true});
  renderer.setSize(width, height);
  document.body.appendChild(renderer.domElement);
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.shadowMap.enabled = true;
  const scene = new THREE.Scene();      // make scene
  //   var axes = new THREE.AxesHelper(5000);
  //   scene.add(axes);

  // ---------------------------------------------------------------------------
  // camera define
  // ---------------------------------------------------------------------------
  const fov = 45;                              // 視野角
  const fovRad = (fov / 2) * (Math.PI / 180);  // 視野角をラジアンに変換
  const cposz = (height / 2) / Math.tan(fovRad); // ウィンドウぴったりのカメラ距離
  camera = new THREE.PerspectiveCamera( fov , width / height , 1 , cposz*5 );  //  視野角, アスペクト比, near, far
 
  camera.position.set(0,0, cposz);

  camera.lookAt(new THREE.Vector3(0, 0, 0));   // center direction
  let cpz = cposz * 0.86 ;                  // center position z
  if (resp == 1){cpz = cposz * 0.88 }      // mobile
 
  //  const controls = new THREE.OrbitControls(camera, renderer.domElement);    // camera controler
  // ---------------------------------------------------------------------------
  // light define
  // ---------------------------------------------------------------------------
  ambientLight = new THREE.AmbientLight(0xadd8e6 , 1.0 );  // 環境光 lightblue
  scene.add(ambientLight);

  // PointLight 色, 光の強さ, 距離, 光の減衰率
  const pointlight = new THREE.PointLight( 0x522719 , 1.0 , cposz , 0 );
  scene.add(pointlight);
  // ---------------------------------------------------------------------------
  // mouse define raycasterで画面内のobjectを得るための setup
  // ---------------------------------------------------------------------------
  const mouse = new THREE.Vector2();         // マウス座標管理用のベクトルを作成
  canvasElement.addEventListener('click', handleMouseClick);   // マウスイベントを登録
  const cameravector = new THREE.Vector3( 0, 0 , -1 );         // マウスベクトル z 軸の中心へ向ける
  const raycaster = new THREE.Raycaster(camera.position, cameravector , 1 , cposz*10  );
  // ---------------------------------------------------------------------------
  // 3d define
  // ---------------------------------------------------------------------------
  const geometry1 = new THREE.BoxGeometry(imgw,imgh,imgd);   //  geometry 幾何学
  const geometry2 = new THREE.BoxGeometry(imgw,imgh,imgd);
  const geometry3 = new THREE.BoxGeometry(imgw,imgh,imgd);
  const geometry4 = new THREE.BoxGeometry(imgw,imgh,imgd);
  const geometry5 = new THREE.BoxGeometry(imgw,imgh,imgd);
  const geometry6 = new THREE.BoxGeometry(imgw,imgh,imgd);
  const geometry7 = new THREE.BoxGeometry(imgw,imgh,imgd);
  const geometry8 = new THREE.BoxGeometry(imgw,imgh,imgd);
  const geometry9 = new THREE.BoxGeometry(imgw,imgh,imgd);
  const geometry10 = new THREE.BoxGeometry(imgw,imgh,imgd);
  const geometry11 = new THREE.BoxGeometry(imgw,imgh,imgd);
  const geometry12 = new THREE.BoxGeometry(imgw,imgh,imgd);
  const geometry13 = new THREE.BoxGeometry(imgw,imgh,imgd);
  const geometry14 = new THREE.BoxGeometry(imgw,imgh,imgd);
  const geometry15 = new THREE.BoxGeometry(imgw,imgh,imgd);
  const geometry16 = new THREE.BoxGeometry(imgw,imgh,imgd);
  const geometry17 = new THREE.BoxGeometry(imgw,imgh,imgd);
  const geometry18 = new THREE.BoxGeometry(imgw,imgh,imgd);
  const geometry19 = new THREE.BoxGeometry(imgw,imgh,imgd);
  const geometry20 = new THREE.BoxGeometry(imgw,imgh,imgd);
  const geometry21 = new THREE.BoxGeometry(imgw,imgh,imgd);
  const geometry22 = new THREE.BoxGeometry(imgw,imgh,imgd);
  const geometry23 = new THREE.BoxGeometry(imgw,imgh,imgd);
  const geometry24 = new THREE.BoxGeometry(imgw,imgh,imgd);
  const geometry25 = new THREE.BoxGeometry(imgw,imgh,imgd);
  const geometry26 = new THREE.BoxGeometry(imgw,imgh,imgd);
  const geometry27 = new THREE.BoxGeometry(imgw,imgh,imgd);
  const geometry28 = new THREE.BoxGeometry(imgw,imgh,imgd);
  const geometry29 = new THREE.BoxGeometry(imgw,imgh,imgd);
  const geometry30 = new THREE.BoxGeometry(imgw,imgh,imgd);
  const geometry31 = new THREE.BoxGeometry(imgw,imgh,imgd);
  const geometry32 = new THREE.BoxGeometry(imgw,imgh,imgd);

  const loader_b = new THREE.TextureLoader();

  const texture1 = loader_b.load( img[1].substring(0,img[1].indexOf("%")) );  //  texture : 生地質 , 手触り
  const texture2 = loader_b.load( img[2].substring(0,img[2].indexOf("%")) );
  const texture3 = loader_b.load( img[3].substring(0,img[3].indexOf("%")) );
  const texture4 = loader_b.load( img[4].substring(0,img[4].indexOf("%")) );
  const texture5 = loader_b.load( img[5].substring(0,img[5].indexOf("%")) );
  const texture6 = loader_b.load( img[6].substring(0,img[6].indexOf("%")) );
  const texture7 = loader_b.load( img[7].substring(0,img[7].indexOf("%")) );
  const texture8 = loader_b.load( img[8].substring(0,img[8].indexOf("%")) );
  const texture9 = loader_b.load( img[9].substring(0,img[9].indexOf("%")) );
  const texture10 = loader_b.load( img[10].substring(0,img[10].indexOf("%")) );
  const texture11 = loader_b.load( img[11].substring(0,img[11].indexOf("%")) );
  const texture12 = loader_b.load( img[12].substring(0,img[12].indexOf("%")) );
  const texture13 = loader_b.load( img[13].substring(0,img[13].indexOf("%")) );
  const texture14 = loader_b.load( img[14].substring(0,img[14].indexOf("%")) );
  const texture15 = loader_b.load( img[15].substring(0,img[15].indexOf("%")) );
  const texture16 = loader_b.load( img[16].substring(0,img[16].indexOf("%")) );
  const texture17 = loader_b.load( img[17].substring(0,img[17].indexOf("%")) );
  const texture18 = loader_b.load( img[18].substring(0,img[18].indexOf("%")) );
  const texture19 = loader_b.load( img[19].substring(0,img[19].indexOf("%")) );
  const texture20 = loader_b.load( img[20].substring(0,img[20].indexOf("%")) );
  const texture21 = loader_b.load( img[21].substring(0,img[21].indexOf("%")) );
  const texture22 = loader_b.load( img[22].substring(0,img[22].indexOf("%")) );
  const texture23 = loader_b.load( img[23].substring(0,img[23].indexOf("%")) );
  const texture24 = loader_b.load( img[24].substring(0,img[24].indexOf("%")) );
  const texture25 = loader_b.load( img[25].substring(0,img[25].indexOf("%")) );
  const texture26 = loader_b.load( img[26].substring(0,img[26].indexOf("%")) );
  const texture27 = loader_b.load( img[27].substring(0,img[27].indexOf("%")) );
  const texture28 = loader_b.load( img[28].substring(0,img[28].indexOf("%")) );
  const texture29 = loader_b.load( img[29].substring(0,img[29].indexOf("%")) );
  const texture30 = loader_b.load( img[30].substring(0,img[30].indexOf("%")) );
  const texture31 = loader_b.load( img[31].substring(0,img[31].indexOf("%")) );
  const texture32 = loader_b.load( img[32].substring(0,img[32].indexOf("%")) );

  const material1 = new THREE.MeshPhongMaterial({ map: texture1 });
  const material2 = new THREE.MeshPhongMaterial({ map: texture2 });
  const material3 = new THREE.MeshPhongMaterial({ map: texture3 });
  const material4 = new THREE.MeshPhongMaterial({ map: texture4 });
  const material5 = new THREE.MeshPhongMaterial({ map: texture5 });
  const material6 = new THREE.MeshPhongMaterial({ map: texture6 });
  const material7 = new THREE.MeshPhongMaterial({ map: texture7 });
  const material8 = new THREE.MeshPhongMaterial({ map: texture8 });
  const material9 = new THREE.MeshPhongMaterial({ map: texture9 });
  const material10 = new THREE.MeshPhongMaterial({ map: texture10 });
  const material11 = new THREE.MeshPhongMaterial({ map: texture11 });
  const material12 = new THREE.MeshPhongMaterial({ map: texture12 });
  const material13 = new THREE.MeshPhongMaterial({ map: texture13 });
  const material14 = new THREE.MeshPhongMaterial({ map: texture14 });
  const material15 = new THREE.MeshPhongMaterial({ map: texture15 });
  const material16 = new THREE.MeshPhongMaterial({ map: texture16 });
  const material17 = new THREE.MeshPhongMaterial({ map: texture17 });
  const material18 = new THREE.MeshPhongMaterial({ map: texture18 });
  const material19 = new THREE.MeshPhongMaterial({ map: texture19 });
  const material20 = new THREE.MeshPhongMaterial({ map: texture20 });
  const material21 = new THREE.MeshPhongMaterial({ map: texture21 });
  const material22 = new THREE.MeshPhongMaterial({ map: texture22 });
  const material23 = new THREE.MeshPhongMaterial({ map: texture23 });
  const material24 = new THREE.MeshPhongMaterial({ map: texture24 });
  const material25 = new THREE.MeshPhongMaterial({ map: texture25 });
  const material26 = new THREE.MeshPhongMaterial({ map: texture26 });
  const material27 = new THREE.MeshPhongMaterial({ map: texture27 });
  const material28 = new THREE.MeshPhongMaterial({ map: texture28 });
  const material29 = new THREE.MeshPhongMaterial({ map: texture29 });
  const material30 = new THREE.MeshPhongMaterial({ map: texture30 });
  const material31 = new THREE.MeshPhongMaterial({ map: texture31 });
  const material32 = new THREE.MeshPhongMaterial({ map: texture32 });

  const mesh1 = new THREE.Mesh(geometry1, material1);  // mesh:  網の目
  const mesh2 = new THREE.Mesh(geometry2, material2);
  const mesh3 = new THREE.Mesh(geometry3, material3);
  const mesh4 = new THREE.Mesh(geometry4, material4);
  const mesh5 = new THREE.Mesh(geometry5, material5);
  const mesh6 = new THREE.Mesh(geometry6, material6);
  const mesh7 = new THREE.Mesh(geometry7, material7);
  const mesh8 = new THREE.Mesh(geometry8, material8);
  const mesh9 = new THREE.Mesh(geometry9, material9);
  const mesh10 = new THREE.Mesh(geometry10, material10);
  const mesh11 = new THREE.Mesh(geometry11, material11);
  const mesh12 = new THREE.Mesh(geometry12, material12);
  const mesh13 = new THREE.Mesh(geometry13, material13);
  const mesh14 = new THREE.Mesh(geometry14, material14);
  const mesh15 = new THREE.Mesh(geometry15, material15);
  const mesh16 = new THREE.Mesh(geometry16, material16);
  const mesh17 = new THREE.Mesh(geometry17, material17);
  const mesh18 = new THREE.Mesh(geometry18, material18);
  const mesh19 = new THREE.Mesh(geometry19, material19);
  const mesh20 = new THREE.Mesh(geometry20, material20);
  const mesh21 = new THREE.Mesh(geometry21, material21);
  const mesh22 = new THREE.Mesh(geometry22, material22);
  const mesh23 = new THREE.Mesh(geometry23, material23);
  const mesh24 = new THREE.Mesh(geometry24, material24);
  const mesh25 = new THREE.Mesh(geometry25, material25);
  const mesh26 = new THREE.Mesh(geometry26, material26);
  const mesh27 = new THREE.Mesh(geometry27, material27);
  const mesh28 = new THREE.Mesh(geometry28, material28);
  const mesh29 = new THREE.Mesh(geometry29, material29);
  const mesh30 = new THREE.Mesh(geometry30, material30);
  const mesh31 = new THREE.Mesh(geometry31, material31);
  const mesh32 = new THREE.Mesh(geometry32, material32);

  scene.add(mesh1,mesh2,mesh3,mesh4,mesh5,mesh6,mesh7,mesh8,mesh9,mesh10,
    mesh11,mesh12,mesh13,mesh14,mesh15,mesh16,mesh17,mesh18,mesh19,mesh20,
    mesh21,mesh22,mesh23,mesh24,mesh25,mesh26,mesh27,mesh28,mesh29,mesh30,
    mesh31,mesh32
  );

  // ---------------------------------------------------------------------------
  //   text define
  // ---------------------------------------------------------------------------
  function settext(text) {
    if (tmsh == 1){scene.remove(textMesh1)}
    loadert = new THREE.FontLoader();
    loadert.load('fonts/optimer_regular.typeface.json', function(font){
      textGeometry1 = new THREE.TextGeometry(text , {
        font: font , size: 15 , height:2 , curveSegments: 5            // height 厚さ
      });
      textMaterial1 = new THREE.MeshPhongMaterial({ color: 0xffffff});
      textMesh1 = new THREE.Mesh(textGeometry1, textMaterial1);
      scene.add(textMesh1);
      textGeometry1.center();         // text on center position set
      textMesh1.position.set(0 , - 280 , 0) ;
      // textMesh1.rotation.x = -0.3
      tmsh = 1 ;
    });
  };

  // ---------------------------------------------------------------------------
  // set initial position
  // ---------------------------------------------------------------------------

  setinit();         // 初期位置

  listmesh();        // mesh を msl 配列にいれる

  backcircle()       // background circle define

  // ---------------------------------------------------------------------------
  //   start animation
  // ---------------------------------------------------------------------------
  const s1 = 5 ;                                   // end of animation stag1
  const s2 = 520 ;                                 // end of animation stag2
  const s3 = s1 +  tsls * msl.length ;       // end of animation stag3

  tick();

  // ---------------------------------------------------------------------------
  //  Tick  the time
  // ---------------------------------------------------------------------------
  function tick() {
    if ( mode != "m") {
      backcirclerange () ;   //  back circle diffusion
      sst0 += 0.0167 ;
      sst = Math.round(sst0)
      if ( sst <= s3 ) {
        str = sst + " / " + s3 ;
        document.getElementById("msgtxt1").innerHTML = str ;   // put current time on html
      };

      if ( sst >= s1) {
        if ( sst % tsls == 0 && csw == 0 && im < msl.length ) {             // loop image display
          if (im > 1 ) {msl[im-1].position.set( imsvx , imsvy , imsvz)  }     // position restore
          imsvx = msl[im].position.x           // initial position save
          imsvy = msl[im].position.y
          imsvz = msl[im].position.z
          msgtxt =  img[im].split("%",2)       // image text
          if (typeof msgtxt[1] === "undefined") {msgtxt[1] = ''}
          document.getElementById("msgtxt3").innerHTML = msgtxt[1]
          cpxi = msl[im].position.x
          cpyi = msl[im].position.y
          cpzi = msl[im].position.z
          csw = 1 ;
        };
        if ( csw ==1 ) {
          cpxi = cpxi * 0.990 , cpyi =  cpyi * 0.95
        };

        if (cpzi <= cpz && csw ==1 ) {     // moving z
          cpzi += 1.8 ; 
          msl[im].position.set ( cpxi  , cpyi , cpzi )
          msl[im].rotation.y += Math.PI / 4 * 0.01    // rotation y
        }
        else if ( cpzi >= cpz && csw ==1 ) {
          msl[im].rotation.set ( 0 , 0 , 0 )          // rotation restore
          msl[im].position.set ( cpx , cpy , cpzi )   // display center position
          im += 1   // set next image
          csw = 0                                                 // next image sw
        };
      };

      if (sst >= s3 - 5 ) {                          // volume down before 5 sec
        playVolumnDown()
      };

      if (sst >  s3 && endflag ===0 ) {    // ending process
        endflag = 1
        endproc()       // end proc
      };

    };   // not mnual mode end

    renderer.render(scene, camera);                           // レンダリング

    if ( endflag == 0 ) {
      tickreq = requestAnimationFrame(tick);
    };
  };    //  tick end

  // ---------------------------------------------------------------------------
  // end process
  // ---------------------------------------------------------------------------
  function endproc() {
    //    document.getElementById("msgtxt1").innerHTML = "end ...";
    //    document.getElementById("msgtxt3").innerHTML = "2回目以降はブラウザを更新してください。" ;
    cancelAnimationFrame(tickreq) ;
    setinit();
    source.stop(3);           // audio stop after 3 seconds
    closeAudioContext()    // release audio resource
   };

  // ---------------------------------------------------------------------------
  //  initial position set
  // ---------------------------------------------------------------------------
  function setinit() {
    const xwd = imgw;        // image width
    const yht = imgh ;       // image height
 
    xpos = - xwd * 8 / 2 + xwd / 2  ;  // initial position
    ypos = yht * 8 / 2 ,  mesh1.position.set(xpos,ypos,0) ;
    xpos = xpos + xwd , mesh2.position.set(xpos,ypos,0) ;
    xpos = xpos + xwd , mesh3.position.set(xpos,ypos,0) ;
    xpos = xpos + xwd , mesh4.position.set(xpos,ypos,0) ;
    xpos = xpos + xwd , mesh5.position.set(xpos,ypos,0) ;
    xpos = xpos + xwd , mesh6.position.set(xpos,ypos,0) ;
    xpos = xpos + xwd , mesh7.position.set(xpos,ypos,0) ;
    xpos = xpos + xwd , mesh8.position.set(xpos,ypos,0) ;
    xpos = - xwd * 8 / 2 + xwd / 2  ;
    ypos = ypos - yht ,  mesh9.position.set(xpos,ypos,0) ;
    xpos = xpos + xwd , mesh10.position.set(xpos,ypos,0) ;
    xpos = xpos + xwd , mesh11.position.set(xpos,ypos,0) ;
    xpos = xpos + xwd , mesh12.position.set(xpos,ypos,0) ;
    xpos = xpos + xwd , mesh13.position.set(xpos,ypos,0) ;
    xpos = xpos + xwd , mesh14.position.set(xpos,ypos,0) ;
    xpos = xpos + xwd , mesh15.position.set(xpos,ypos,0) ;
    xpos = xpos + xwd , mesh16.position.set(xpos,ypos,0) ;
    xpos = - xwd * 8 / 2 + xwd / 2 ;
    ypos = ypos - yht ,  mesh17.position.set(xpos,ypos,0) ;
    xpos = xpos + xwd , mesh18.position.set(xpos,ypos,0) ;
    xpos = xpos + xwd , mesh19.position.set(xpos,ypos,0) ;
    xpos = xpos + xwd , mesh20.position.set(xpos,ypos,0) ;
    xpos = xpos + xwd , mesh21.position.set(xpos,ypos,0) ;
    xpos = xpos + xwd , mesh22.position.set(xpos,ypos,0) ;
    xpos = xpos + xwd , mesh23.position.set(xpos,ypos,0) ;
    xpos = xpos + xwd , mesh24.position.set(xpos,ypos,0) ;
    xpos = - xwd * 8 / 2 + xwd / 2 ;
    ypos = ypos - yht , mesh25.position.set(xpos,ypos,0) ;
    xpos = xpos + xwd , mesh26.position.set(xpos,ypos,0) ;
    xpos = xpos + xwd , mesh27.position.set(xpos,ypos,0) ;
    xpos = xpos + xwd , mesh28.position.set(xpos,ypos,0) ;
    xpos = xpos + xwd , mesh29.position.set(xpos,ypos,0) ;
    xpos = xpos + xwd , mesh30.position.set(xpos,ypos,0) ;
    xpos = xpos + xwd , mesh31.position.set(xpos,ypos,0) ;
    xpos = xpos + xwd , mesh32.position.set(xpos,ypos,0) ;
 
  };

  // ---------------------------------------------------------------------------
  //  read image
  // ---------------------------------------------------------------------------
  function readimg() {
    img = new Array();
    // 2021-09-29 17:22:01
    img[1] = 'img2021/P1063380.jpg%2021/01/06 トモエガモ 町田市薬師池公園';
    img[2] = 'img2021/P1130090.jpg%2021/01/13 結氷の朝 町田市薬師池公園';
    img[3] = 'img2021/P1292587.jpg%2021/01/29 キセキレイ 町田市薬師池公園';
    img[4] = 'img2021/P1312708.jpg%2021/01/31 エナガ 町田市薬師池公園';
    img[5] = 'img2021/P2184347.jpg%2021/02/18   シジュウカラ 町田市薬師池公園';
    img[6] = 'img2021/P2184403.jpg%2021/02/18 紅梅 町田市薬師池公園';
    img[7] = 'img2021/P2244999.png%2021/02/24 モズ (百舌鳥) 町田市薬師池公園';
    img[8] = 'img2021/P2245235.png%2021/02/24 ジョウビタキ 町田市薬師池公園';
    img[9] = 'img2021/P3035862.jpg%2021/03/03  ツグミ 町田市薬師池公園';
    img[10] = 'img2021/P3106909.jpg%2021/03/10 ヤマガラ 町田市薬師池公園';
    img[11] = 'img2021/P3117024.jpg%2021/03/11 メジロ 町田市薬師池公園';
    img[12] = 'img2021/P3117436.jpg%2021/03/11 ヒヨドリ 町田市薬師池公園';
    img[13] = 'img2021/P3240512.jpg%2021/03/24 白梅 町田市薬師池公園';
    img[14] = 'img2021/P3240526.jpg%2021/03/24 山桜 町田市薬師池公園';
    img[15] = 'img2021/P3301006.jpg%2021/03/30 八重桜 町田市下小山田町尾根緑道';
    img[16] = 'img2021/P3311129.jpg%2021/03/31 桜 町田市恩田川';
    img[17] = 'img2021/P4021418.jpg%2021/04/02 御衣黄 町田市ぼたん園';
    img[18] = 'img2021/P4071628.jpg%2021/04/07 ムラサキハナナ 町田市七国山';
    img[19] = 'img2021/P4071799.jpg%2021/04/10 ウワミズザクラ(上溝桜) 町田市薬師池公園';
    img[20] = 'img2021/P4182512.jpg%2021/04/18 カイツブリ 町田市薬師池公園';
    img[21] = 'img2021/P4212542.jpg%2021/04/21  エビネ 町田えびね苑';
    img[22] = 'img2021/P4212552.jpg%2021/04/21  クマガイソウ 町田えびね苑';
    img[23] = 'img2021/P4232661.jpg%2021/04/23   フジ 町田市薬師池公園';
    img[24] = 'img2021/P4232695.jpg%2021/04/23 イチハツ 町田市薬師池公園';
    img[25] = 'img2021/P4272723.jpg%2021/04/27 ハンカチの木 町田市薬師池公園';
    img[26] = 'img2021/P4272884.jpg%2021/04/27 カワセミ 町田市薬師池公園';
    img[27] = 'img2021/P5063457.jpg%2021/05/06 ホオノキ (朴の木) 町田市薬師池公園';
    img[28] = 'img2021/P5145063.jpg%2021/05/14 ミドリセイボウ (緑青蜂) 町田市薬師池公園';
    img[29] = 'img2021/P5290179.jpg%2021/05/19 ラ・フランス 町田市野津田公園ばら広場';
    img[30] = 'img2021/P5216248.jpg%2021/05/21 オオヤマレンゲ 町田市薬師池公園';
    img[31] = 'img2021/P5226460.jpg%2021/05/22 センダン 町田市薬師池公園';
    img[32] = 'img2021/P6020839.jpg%2021/06/02 花菖蒲 町田市薬師池公園';
  };
  // ---------------------------------------------------------------------------
  //  mesh array define
  // ---------------------------------------------------------------------------
  function listmesh () {
    msl  = new Array();
    msl [0] = mesh1
    msl [1] = mesh1 ,  msl [2] = mesh2 , msl [3] = mesh3 ,  msl [4] = mesh4 ,  msl [5] = mesh5
    msl [6] = mesh6 ,  msl [7] = mesh7 , msl [8] = mesh8 ,  msl [9] = mesh9 ,  msl [10] = mesh10
    msl [11] = mesh11 , msl [12] = mesh12 , msl [13] = mesh13 , msl [14] = mesh14 , msl [15] = mesh15
    msl [16] = mesh16 , msl [17] = mesh17 , msl [18] = mesh18 , msl [19] = mesh19 , msl [20] = mesh20
    msl [21] = mesh21 , msl [22] = mesh22 , msl [23] = mesh23 , msl [24] = mesh24 , msl [25] = mesh25
    msl [26] = mesh26 , msl [27] = mesh27 , msl [28] = mesh28 , msl [29] = mesh29 , msl [30] = mesh30
    msl [31] = mesh31 , msl [32] = mesh32
  };

  // ---------------------------------------------------------------------------
  //  back circle define
  // ---------------------------------------------------------------------------
  function backcircle() {
    if (resp == 1) { crads = 25 }  // for smart phone radius
    else { crads = 30 } ;
    const opcc = 0.2 ;             // opacity value
    const ccolor1 = 0x444444 ;   // color1
    const ccolor2 = 0xffffff ;   // color2
    const ccolor3 = 0x222222 ;   // color3
    radius_c1 = radius_c2 = radius_c3 = crads ;
    segments_c1 = segments_c2 = segments_c3 = crads ;
    radius_c4 = radius_c5 = radius_c6 = crads / 0.8 ;
    segments_c4 = segments_c5 = segments_c6 = crads / 0.8 ;
    radius_c7 = radius_c8 = radius_c9 = crads / 0.6 ;
    segments_c7 = segments_c8 = segments_c9 = crads / 0.6 ;
    radius_c10 = radius_c11 = radius_c12 = crads / 0.4 ;
    segments_c10 = segments_c11 = segments_c12 = crads / 0.4 ;
    radius_c13 = radius_c14 = radius_c15 = crads ;
    segments_c13 = segments_c14 = segments_c15 = crads ;
    radius_c16 = radius_c17 = radius_c18 = crads ;
    segments_c16 = segments_c17 = segments_c18 = crads ;
    radius_c19 = radius_c20 = radius_c21 = crads / 0.8 ;
    segments_c19 = segments_c20 = segments_c21 = crads / 0.8 ;
    radius_c22 = radius_c23 = radius_c24 = crads / 0.6 ;
    segments_c22 = segments_c23 = segments_c24 = crads / 0.6 ;
    radius_c25 = radius_c26 = radius_c27 = crads / 0.6 ;
    segments_c25 = segments_c26 = segments_c27 = crads / 0.6 ;
    radius_c28 = radius_c29 = radius_c30 = crads / 0.4 ;
    segments_c28 = segments_c29 = segments_c30 = crads / 0.2 ;

    mva = 0.01 ;    // adjust speed
    const bmc  = 1 ;
    thsw   =   bmc * width     // width  limit
    thsh   =   bmc * height    // height limit
    const geometry_c1 = new THREE.CircleGeometry ( radius_c1, segments_c1 ) ;
    const geometry_c2 = new THREE.CircleGeometry ( radius_c2, segments_c2 ) ;
    const geometry_c3 = new THREE.CircleGeometry ( radius_c3, segments_c3 ) ;
    const geometry_c4 = new THREE.CircleGeometry ( radius_c4, segments_c4 ) ;
    const geometry_c5 = new THREE.CircleGeometry ( radius_c5, segments_c5 ) ;
    const geometry_c6 = new THREE.CircleGeometry ( radius_c6, segments_c6 ) ;
    const geometry_c7 = new THREE.CircleGeometry ( radius_c7, segments_c7 ) ;
    const geometry_c8 = new THREE.CircleGeometry ( radius_c8, segments_c8 ) ;
    const geometry_c9 = new THREE.CircleGeometry ( radius_c9, segments_c9 ) ;
    const geometry_c10 = new THREE.CircleGeometry ( radius_c10, segments_c10 ) ;
    const geometry_c11 = new THREE.CircleGeometry ( radius_c11, segments_c11 ) ;
    const geometry_c12 = new THREE.CircleGeometry ( radius_c12, segments_c12 ) ;
    const geometry_c13 = new THREE.CircleGeometry ( radius_c13, segments_c13 ) ;
    const geometry_c14 = new THREE.CircleGeometry ( radius_c14, segments_c14 ) ;
    const geometry_c15 = new THREE.CircleGeometry ( radius_c15, segments_c15 ) ;
    const geometry_c16 = new THREE.CircleGeometry ( radius_c16, segments_c16 ) ;
    const geometry_c17 = new THREE.CircleGeometry ( radius_c17, segments_c17 ) ;
    const geometry_c18 = new THREE.CircleGeometry ( radius_c18, segments_c18 ) ;
    const geometry_c19 = new THREE.CircleGeometry ( radius_c19, segments_c19 ) ;
    const geometry_c20 = new THREE.CircleGeometry ( radius_c20, segments_c20 ) ;
    const geometry_c21 = new THREE.CircleGeometry ( radius_c21, segments_c21 ) ;
    const geometry_c22 = new THREE.CircleGeometry ( radius_c22, segments_c22 ) ;
    const geometry_c23 = new THREE.CircleGeometry ( radius_c23, segments_c23 ) ;
    const geometry_c24 = new THREE.CircleGeometry ( radius_c24, segments_c24 ) ;
    const geometry_c25 = new THREE.CircleGeometry ( radius_c25, segments_c25 ) ;
    const geometry_c26 = new THREE.CircleGeometry ( radius_c26, segments_c26 ) ;
    const geometry_c27 = new THREE.CircleGeometry ( radius_c27, segments_c27 ) ;
    const geometry_c28 = new THREE.CircleGeometry ( radius_c28, segments_c28 ) ;
    const geometry_c29 = new THREE.CircleGeometry ( radius_c29, segments_c29 ) ;
    const geometry_c30 = new THREE.CircleGeometry ( radius_c30, segments_c30 ) ;
    const material_c1 = new THREE.MeshLambertMaterial({ color: ccolor1 ,  opacity : opcc , transparent: true,});
    const material_c2 = new THREE.MeshLambertMaterial({ color: ccolor2 ,  opacity : opcc , transparent: true,});
    const material_c3 = new THREE.MeshLambertMaterial({ color: ccolor3 ,  opacity : opcc , transparent: true,});
    const material_c4 = new THREE.MeshLambertMaterial({ color: ccolor1 ,  opacity : opcc , transparent: true,});
    const material_c5 = new THREE.MeshLambertMaterial({ color: ccolor2 ,  opacity : opcc , transparent: true,});
    const material_c6 = new THREE.MeshLambertMaterial({ color: ccolor3 ,  opacity : opcc , transparent: true,});
    const material_c7 = new THREE.MeshLambertMaterial({ color: ccolor1 ,  opacity : opcc , transparent: true,});
    const material_c8 = new THREE.MeshLambertMaterial({ color: ccolor2 ,  opacity : opcc , transparent: true,});
    const material_c9 = new THREE.MeshLambertMaterial({ color: ccolor3 ,  opacity : opcc , transparent: true,});
    const material_c10 = new THREE.MeshLambertMaterial({ color: ccolor1 ,  opacity : opcc , transparent: true,});
    const material_c11 = new THREE.MeshLambertMaterial({ color: ccolor2 ,  opacity : opcc , transparent: true,});
    const material_c12 = new THREE.MeshLambertMaterial({ color: ccolor3 ,  opacity : opcc , transparent: true,});
    const material_c13 = new THREE.MeshLambertMaterial({ color: ccolor3 ,  opacity : opcc , transparent: true,});
    const material_c14 = new THREE.MeshLambertMaterial({ color: ccolor1 ,  opacity : opcc , transparent: true,});
    const material_c15 = new THREE.MeshLambertMaterial({ color: ccolor2 ,  opacity : opcc , transparent: true,});
    const material_c16 = new THREE.MeshLambertMaterial({ color: ccolor3 ,  opacity : opcc , transparent: true,});
    const material_c17 = new THREE.MeshLambertMaterial({ color: ccolor1 ,  opacity : opcc , transparent: true,});
    const material_c18 = new THREE.MeshLambertMaterial({ color: ccolor2 ,  opacity : opcc , transparent: true,});
    const material_c19 = new THREE.MeshLambertMaterial({ color: ccolor3 ,  opacity : opcc , transparent: true,});
    const material_c20 = new THREE.MeshLambertMaterial({ color: ccolor1 ,  opacity : opcc , transparent: true,});
    const material_c21 = new THREE.MeshLambertMaterial({ color: ccolor2 ,  opacity : opcc , transparent: true,});
    const material_c22 = new THREE.MeshLambertMaterial({ color: ccolor3 ,  opacity : opcc , transparent: true,});
    const material_c23 = new THREE.MeshLambertMaterial({ color: ccolor3 ,  opacity : opcc , transparent: true,});
    const material_c24 = new THREE.MeshLambertMaterial({ color: ccolor1 ,  opacity : opcc , transparent: true,});
    const material_c25 = new THREE.MeshLambertMaterial({ color: ccolor2 ,  opacity : opcc , transparent: true,});
    const material_c26 = new THREE.MeshLambertMaterial({ color: ccolor3 ,  opacity : opcc , transparent: true,});
    const material_c27 = new THREE.MeshLambertMaterial({ color: ccolor1 ,  opacity : opcc , transparent: true,});
    const material_c28 = new THREE.MeshLambertMaterial({ color: ccolor2 ,  opacity : opcc , transparent: true,});
    const material_c29 = new THREE.MeshLambertMaterial({ color: ccolor3 ,  opacity : opcc , transparent: true,});
    const material_c30 = new THREE.MeshLambertMaterial({ color: ccolor1 ,  opacity : opcc , transparent: true,});
    mesh_c1 = new THREE.Mesh(geometry_c1 , material_c1 );
    mesh_c2 = new THREE.Mesh(geometry_c2 , material_c2 );
    mesh_c3 = new THREE.Mesh(geometry_c3 , material_c3 );
    mesh_c4 = new THREE.Mesh(geometry_c4 , material_c4 );
    mesh_c5 = new THREE.Mesh(geometry_c5 , material_c5 );
    mesh_c6 = new THREE.Mesh(geometry_c6 , material_c6);
    mesh_c7 = new THREE.Mesh(geometry_c7 , material_c7 );
    mesh_c8 = new THREE.Mesh(geometry_c8 , material_c8 );
    mesh_c9 = new THREE.Mesh(geometry_c9 , material_c9 );
    mesh_c10 = new THREE.Mesh(geometry_c10 , material_c10 );
    mesh_c11 = new THREE.Mesh(geometry_c11 , material_c11 );
    mesh_c12 = new THREE.Mesh(geometry_c12 , material_c12 );
    mesh_c13 = new THREE.Mesh(geometry_c13 , material_c13 );
    mesh_c14 = new THREE.Mesh(geometry_c14 , material_c14 );
    mesh_c15 = new THREE.Mesh(geometry_c15 , material_c15 );
    mesh_c16 = new THREE.Mesh(geometry_c16 , material_c16);
    mesh_c17 = new THREE.Mesh(geometry_c17 , material_c17 );
    mesh_c18 = new THREE.Mesh(geometry_c18 , material_c18 );
    mesh_c19 = new THREE.Mesh(geometry_c19 , material_c19 );
    mesh_c20 = new THREE.Mesh(geometry_c20 , material_c20 );
    mesh_c21 = new THREE.Mesh(geometry_c21 , material_c21 );
    mesh_c22 = new THREE.Mesh(geometry_c22 , material_c22 );
    mesh_c23 = new THREE.Mesh(geometry_c23 , material_c23 );
    mesh_c24 = new THREE.Mesh(geometry_c24 , material_c24 );
    mesh_c25 = new THREE.Mesh(geometry_c25 , material_c25 );
    mesh_c26 = new THREE.Mesh(geometry_c26 , material_c26);
    mesh_c27 = new THREE.Mesh(geometry_c27 , material_c27 );
    mesh_c28 = new THREE.Mesh(geometry_c28 , material_c28 );
    mesh_c29 = new THREE.Mesh(geometry_c29 , material_c29 );
    mesh_c30 = new THREE.Mesh(geometry_c30 , material_c30 );
    scene.add( mesh_c1 , mesh_c2 , mesh_c3 , mesh_c4 , mesh_c5 , mesh_c6 , mesh_c7 , mesh_c8 , mesh_c9 , mesh_c10 , mesh_c11 , mesh_c12 );
    scene.add( mesh_c13 , mesh_c14 , mesh_c15 , mesh_c16 , mesh_c17 , mesh_c18 , mesh_c19 , mesh_c20 , mesh_c21 , mesh_c22 );
    scene.add( mesh_c23 , mesh_c24 , mesh_c25 , mesh_c26 , mesh_c27 , mesh_c28 , mesh_c29 , mesh_c30 );

    mvx1 = mva * Math.random() * 11 ,  mvy1 = mva * Math.random() * 11 ;
    mvx2 = mva * Math.random() * 11 ,  mvy2 = mva * Math.random() * 11 ;
    mvx3 = mva * Math.random() * 11 ,  mvy3 = mva * Math.random() * 11 ;
    mvx4 = mva * Math.random() * 11 ,  mvy4 = mva * Math.random() * 11 ;
    mvx5 = mva * Math.random() * 11 ,  mvy5 = mva * Math.random() * 11 ;
    mvx6 = mva * Math.random() * 11 ,  mvy6 = mva * Math.random() * 11 ;
    mvx7 = mva * Math.random() * 11 ,  mvy7 = mva * Math.random() * 11 ;
    mvx8 = mva * Math.random() * 11 ,  mvy8 = mva * Math.random() * 11 ;
    mvx9 = mva * Math.random() * 11 ,  mvy9 = mva * Math.random() * 11 ;
    mvx10 = mva * Math.random() * 11 , mvy10 = mva * Math.random() * 11 ;
    mvx11 = mva * Math.random() * 11 , mvy11 = mva * Math.random() * 11 ;
    mvx12 = mva * Math.random() * 11 , mvy12 = mva * Math.random() * 11 ;
    mvx13 = mva * Math.random() * 11 , mvy13 = mva * Math.random() * 11 ;
    mvx14 = mva * Math.random() * 11 , mvy14 = mva * Math.random() * 11 ;
    mvx15 = mva * Math.random() * 11 , mvy15 = mva * Math.random() * 11 ;
    mvx16 = mva * Math.random() * 11 , mvy16 = mva * Math.random() * 11 ;
    mvx17 = mva * Math.random() * 11 , mvy17 = mva * Math.random() * 11 ;
    mvx18 = mva * Math.random() * 11 ,  mvy18 = mva * Math.random() * 11 ;
    mvx19 = mva * Math.random() * 11 ,  mvy19 = mva * Math.random() * 11 ;
    mvx20 = mva * Math.random() * 11 ,  mvy20 = mva * Math.random() * 11 ;
    mvx21 = mva * Math.random() * 11 ,  mvy21 = mva * Math.random() * 11 ;
    mvx22 = mva * Math.random() * 11 ,  mvy22 = mva * Math.random() * 11 ;
    mvx23 = mva * Math.random() * 11 ,  mvy23 = mva * Math.random() * 11 ;
    mvx24 = mva * Math.random() * 11 ,  mvy24 = mva * Math.random() * 11 ;
    mvx25 = mva * Math.random() * 11 ,  mvy25 = mva * Math.random() * 11 ;
    mvx26 = mva * Math.random() * 11,   mvy26 = mva * Math.random() * 11 ;
    mvx27 = mva * Math.random() * 11 ,  mvy27 = mva * Math.random() * 11 ;
    mvx28 = mva * Math.random() * 11 ,  mvy28 = mva * Math.random() * 11 ;
    mvx29 = mva * Math.random() * 11 ,  mvy29 = mva * Math.random() * 11 ;
    mvx30 = mva * Math.random() * 11 ,  mvy30 = mva * Math.random() * 11 ;

    const mvz =  - 100
    mesh_c1.position.z = mvz , mesh_c2.position.z = mvz , mesh_c3.position.z = mvz
    mesh_c4.position.z = mvz , mesh_c5.position.z = mvz , mesh_c6.position.z = mvz
    mesh_c7.position.z = mvz , mesh_c8.position.z = mvz , mesh_c9.position.z = mvz
    mesh_c10.position.z = mvz , mesh_c11.position.z = mvz , mesh_c12.position.z = mvz
    mesh_c13.position.z = mvz , mesh_c14.position.z = mvz , mesh_c15.position.z = mvz
    mesh_c16.position.z = mvz , mesh_c17.position.z = mvz , mesh_c18.position.z = mvz
    mesh_c19.position.z = mvz , mesh_c20.position.z = mvz , mesh_c21.position.z = mvz
    mesh_c22.position.z = mvz , mesh_c23.position.z = mvz , mesh_c24.position.z = mvz
    mesh_c25.position.z = mvz , mesh_c26.position.z = mvz , mesh_c27.position.z = mvz
    mesh_c28.position.z = mvz , mesh_c29.position.z = mvz , mesh_c30.position.z = mvz

  };
  // ---------------------------------------------------------------------------
  // back circle  position
  // ---------------------------------------------------------------------------
  function backcirclerange () {
    mesh_c1.position.x +=  mvx1 ;
    if (mesh_c1.position.x >thsw | mesh_c1.position.x < - thsw ) {mvx1 = mvx1 * -1};
    mesh_c1.position.y +=  mvy1 ;
    if (mesh_c1.position.y > thsh | mesh_c1.position.y < - thsh ) {mvy1 = mvy1 * -1};
    mesh_c2.position.x -=  mvx2 ;
    if (mesh_c2.position.x >thsw | mesh_c2.position.x < - thsw ) {mvx2 = mvx2 * -1};
    mesh_c2.position.y +=  mvy2 ;
    if (mesh_c2.position.y > thsh | mesh_c2.position.y < - thsh ) {mvy2 = mvy2 * -1};
    mesh_c3.position.x +=  mvx3 ;
    if (mesh_c3.position.x >thsw | mesh_c3.position.x < - thsw ) {mvx3 = mvx3 * -1};
    mesh_c3.position.y -=  mvy3 ;
    if (mesh_c3.position.y > thsh | mesh_c3.position.y < - thsh ) {mvy3 = mvy3 * -1};
    mesh_c4.position.x -=  mvx4;
    if (mesh_c4.position.x >thsw | mesh_c4.position.x < - thsw ) {mvx4 = mvx4 * -1};
    mesh_c4.position.y -=  mvy4;
    if (mesh_c4.position.y > thsh | mesh_c4.position.y < - thsh ) {mvy4 = mvy4 * -1};
    mesh_c5.position.x +=  mvx5;
    if (mesh_c5.position.x >thsw | mesh_c5.position.x < - thsw ) {mvx5 = mvx5 * -1};
    mesh_c5.position.y +=  mvy5;
    if (mesh_c5.position.y > thsh | mesh_c5.position.y < - thsh ) {mvy5 = mvy5 * -1};
    mesh_c6.position.x +=  mvx6;
    if (mesh_c6.position.x >thsw | mesh_c6.position.x < - thsw ) {mvx6 = mvx6 * -1};
    mesh_c6.position.y -=  mvy6;
    if (mesh_c6.position.y > thsh | mesh_c6.position.y < - thsh ) {mvy6 = mvy6 * -1};
    mesh_c7.position.x -=  mvx7;
    if (mesh_c7.position.x >thsw | mesh_c7.position.x < - thsw ) {mvx7 = mvx7 * -1};
    mesh_c7.position.y +=  mvy7;
    if (mesh_c7.position.y > thsh | mesh_c7.position.y < - thsh ) {mvy7 = mvy7 * -1};
    mesh_c8.position.x -=  mvx8;
    if (mesh_c8.position.x >thsw | mesh_c8.position.x < - thsw ) {mvx8 = mvx8 * -1};
    mesh_c8.position.y -=  mvy8;
    if (mesh_c8.position.y > thsh | mesh_c8.position.y < - thsh ) {mvy8 = mvy8 * -1};
    mesh_c9.position.x +=  mvx9;
    if (mesh_c9.position.x >thsw | mesh_c9.position.x < - thsw ) {mvx9 = mvx9 * -1};
    mesh_c9.position.y +=  mvy9;
    if (mesh_c9.position.y > thsh | mesh_c9.position.y < - thsh ) {mvy9 = mvy9 * -1};
    mesh_c10.position.x +=  mvx10;
    if (mesh_c10.position.x >thsw | mesh_c10.position.x < - thsw ) {mvx10 = mvx10 * -1};
    mesh_c10.position.y -=  mvy10;
    if (mesh_c10.position.y > thsh | mesh_c10.position.y < - thsh ) {mvy10 = mvy10 * -1};
    mesh_c11.position.x -=  mvx11;
    if (mesh_c11.position.x >thsw | mesh_c11.position.x < - thsw ) {mvx11 = mvx11 * -1};
    mesh_c11.position.y +=  mvy11;
    if (mesh_c11.position.y > thsh | mesh_c11.position.y < - thsh ) {mvy11 = mvy11 * -1};
    mesh_c12.position.x -=  mvx12;
    if (mesh_c12.position.x >thsw | mesh_c12.position.x < - thsw ) {mvx12 = mvx12 * -1};
    mesh_c12.position.y -=  mvy12;
    if (mesh_c12.position.y > thsh | mesh_c12.position.y < - thsh ) {mvy12 = mvy12 * -1};
    mesh_c13.position.x +=  mvx13 ;
    if (mesh_c13.position.x >thsw | mesh_c13.position.x < - thsw ) {mvx13 = mvx13 * -1};
    mesh_c13.position.y -=  mvy13 ;
    if (mesh_c13.position.y > thsh | mesh_c13.position.y < - thsh ) {mvy13 = mvy13 * -1};
    mesh_c14.position.x -=  mvx14;
    if (mesh_c14.position.x >thsw | mesh_c14.position.x < - thsw ) {mvx14 = mvx14 * -1};
    mesh_c14.position.y -=  mvy14;
    if (mesh_c14.position.y > thsh | mesh_c14.position.y < - thsh ) {mvy14 = mvy14 * -1};
    mesh_c15.position.x +=  mvx15;
    if (mesh_c15.position.x >thsw | mesh_c15.position.x < - thsw ) {mvx15 = mvx15 * -1};
    mesh_c15.position.y +=  mvy15;
    if (mesh_c15.position.y > thsh | mesh_c15.position.y < - thsh ) {mvy15 = mvy15 * -1};
    mesh_c16.position.x +=  mvx16;
    if (mesh_c16.position.x >thsw | mesh_c16.position.x < - thsw ) {mvx16 = mvx16 * -1};
    mesh_c16.position.y -=  mvy16;
    if (mesh_c16.position.y > thsh | mesh_c16.position.y < - thsh ) {mvy16 = mvy16 * -1};
    mesh_c17.position.x -=  mvx17;
    if (mesh_c17.position.x >thsw | mesh_c17.position.x < - thsw ) {mvx17 = mvx17 * -1};
    mesh_c17.position.y +=  mvy17;
    if (mesh_c17.position.y > thsh | mesh_c17.position.y < - thsh ) {mvy17 = mvy17 * -1};
    mesh_c18.position.x -=  mvx18;
    if (mesh_c18.position.x >thsw | mesh_c18.position.x < - thsw ) {mvx18 = mvx18 * -1};
    mesh_c18.position.y -=  mvy18;
    if (mesh_c18.position.y > thsh | mesh_c18.position.y < - thsh ) {mvy18 = mvy18 * -1};
    mesh_c19.position.x +=  mvx19;
    if (mesh_c19.position.x >thsw | mesh_c19.position.x < - thsw ) {mvx19 = mvx19 * -1};
    mesh_c19.position.y +=  mvy19;
    if (mesh_c19.position.y > thsh | mesh_c19.position.y < - thsh ) {mvy19 = mvy19 * -1};
    mesh_c20.position.x +=  mvx20;
    if (mesh_c20.position.x >thsw | mesh_c20.position.x < - thsw ) {mvx20 = mvx20 * -1};
    mesh_c20.position.y -=  mvy20;
    if (mesh_c20.position.y > thsh | mesh_c20.position.y < - thsh ) {mvy20 = mvy20 * -1};
    mesh_c21.position.x -=  mvx21;
    if (mesh_c21.position.x >thsw | mesh_c21.position.x < - thsw ) {mvx21 = mvx21 * -1};
    mesh_c21.position.y +=  mvy21;
    if (mesh_c21.position.y > thsh | mesh_c21.position.y < - thsh ) {mvy21 = mvy21 * -1};
    mesh_c22.position.x -=  mvx22;
    if (mesh_c22.position.x >thsw | mesh_c22.position.x < - thsw ) {mvx22 = mvx22 * -1};
    mesh_c22.position.y -=  mvy22;
    if (mesh_c22.position.y > thsh | mesh_c22.position.y < - thsh ) {mvy22 = mvy22 * -1};
    mesh_c23.position.x +=  mvx23 ;
    if (mesh_c23.position.x >thsw | mesh_c23.position.x < - thsw ) {mvx23 = mvx23 * -1};
    mesh_c23.position.y -=  mvy23 ;
    if (mesh_c23.position.y > thsh | mesh_c23.position.y < - thsh ) {mvy23 = mvy23 * -1};
    mesh_c24.position.x -=  mvx24;
    if (mesh_c24.position.x >thsw | mesh_c24.position.x < - thsw ) {mvx24 = mvx24 * -1};
    mesh_c24.position.y -=  mvy24;
    if (mesh_c24.position.y > thsh | mesh_c24.position.y < - thsh ) {mvy24 = mvy24 * -1};
    mesh_c25.position.x +=  mvx25;
    if (mesh_c25.position.x >thsw | mesh_c25.position.x < - thsw ) {mvx25 = mvx25 * -1};
    mesh_c25.position.y +=  mvy25;
    if (mesh_c25.position.y > thsh | mesh_c25.position.y < - thsh ) {mvy25 = mvy25 * -1};
    mesh_c26.position.x +=  mvx26;
    if (mesh_c26.position.x >thsw | mesh_c26.position.x < - thsw ) {mvx26 = mvx26 * -1};
    mesh_c26.position.y -=  mvy26;
    if (mesh_c26.position.y > thsh | mesh_c26.position.y < - thsh ) {mvy26 = mvy26 * -1};
    mesh_c27.position.x -=  mvx27;
    if (mesh_c27.position.x >thsw | mesh_c27.position.x < - thsw ) {mvx27 = mvx27 * -1};
    mesh_c27.position.y +=  mvy27;
    if (mesh_c27.position.y > thsh | mesh_c27.position.y < - thsh ) {mvy27 = mvy27 * -1};
    mesh_c28.position.x -=  mvx28;
    if (mesh_c28.position.x >thsw | mesh_c28.position.x < - thsw ) {mvx28 = mvx28 * -1};
    mesh_c28.position.y -=  mvy28;
    if (mesh_c28.position.y > thsh | mesh_c28.position.y < - thsh ) {mvy28 = mvy28 * -1};
    mesh_c29.position.x +=  mvx29;
    if (mesh_c29.position.x >thsw | mesh_c29.position.x < - thsw ) {mvx29 = mvx29 * -1};
    mesh_c29.position.y +=  mvy29;
    if (mesh_c29.position.y > thsh | mesh_c29.position.y < - thsh ) {mvy29 = mvy29 * -1};
    mesh_c30.position.x +=  mvx30;
    if (mesh_c30.position.x >thsw | mesh_c30.position.x < - thsw ) {mvx30 = mvx30 * -1};
    mesh_c30.position.y -=  mvy30;
    if (mesh_c30.position.y > thsh | mesh_c30.position.y < - thsh ) {mvy30 = mvy30 * -1};

  }; // function end

    // ------------------  mouse handling -----------------------------
    // マウスを動かしたとき
    function handleMouseClick(e) {
      if ( endflag == 0 && mode != "m" ) { return ; }
      // マウス位置を取得
      // 0~画面サイズの値を、-1~1の値に変換。
      mouseX = (e.offsetX - (window.innerWidth / 2)) / window.innerWidth * 2;
      mouseY = (-e.offsetY + (window.innerHeight / 2)) / window.innerHeight * 2;

      // マウスの位置ベクトル
      var pos = new THREE.Vector3(mouseX, mouseY, 1);
      // pos はスクリーン座標系なので、オブジェクトの座標系に変換
      pos.unproject(camera);
      // 始点、向きベクトルを渡してレイを作成
      // Raycastとは、ある場所から透明な光線ベクトルを放ち、光線に当たったオブジェクトの情報を得る機能のことです。
      // .sub():ベクトルの引き算
      // .normalize():単位ベクトル作成。
      var ray = new THREE.Raycaster(camera.position, pos.sub(camera.position).normalize());
      // 交差判定
      // 引数は取得対象となるMeshの配列を渡す。
      objs = ray.intersectObjects(msl , true );           //  mesh arrayをターゲット
      setinit();
      render() ;
      function render() {
        requestAnimationFrame(render);
        if (objs.length > 0) {
          // clickしたオブジェクトを配列で得る。
          objs[0].object.position.set(0,0,cpz)
          for ( i = 1; i <= msl.length; i++) {
            if (objs[0].object.uuid == msl[i].uuid) { break ;}  // image textを表示するため uuidを比較して hitしたmeshを得る
          };
          msgtxt =  img[i].split("%",2)   // image text  表示
          document.getElementById("msgtxt3").innerHTML = msgtxt[1] ;   
        };
      };
      renderer.render(scene, camera);

    };

    // -------------------- initialize on resize
    onResize();
    window.addEventListener('resize', onResize);
    function onResize() {
      width  = window.innerWidth; // 画面横フルサイズ
      height = window.innerHeight; // 画面縦フルサイズ
      renderer.setPixelRatio(window.devicePixelRatio);
      renderer.setSize(width, height);
      camera.aspect = width / height ;
      camera.updateProjectionMatrix();
    };

  }; //  init



以下、fphotos32.js を分けて説明

①ボタンからの情報


// --------------------------------------------------------------------------------
//  manual button click
// -------------------------------------------------------------------------------
function clickBtng(){
  gtxt1 = " ・手動は「Manual」を押して小画像をクリックして下さい<br> 小画像全体を表示するには隅のどこかを押して下さい"
  gtxt2 = " ・音楽付き自動は「Auto」を押して開始して下さい"
  gtxt3 = " ・ボタンを再度押すときはその前にブラウザの丸い矢印を押して更新して下さい"
  gtxt4 = " ・古いブラウザやスマホでは正常に稼働しないことがあります"
  gtxt5 = " ・このメッセージを消すにはもう一度ボタンを押してください"
  gtxt = '<br>' + gtxt1 + '<br>' +  gtxt2 + '<br>' +  gtxt3 +  '<br>' + gtxt4 +  '<br>' + gtxt5 ;

  str0 = document.getElementById("msgtxt2").innerHTML
  if ( str0 === "" ) {str = gtxt}
  else {str = "" };
  document.getElementById("msgtxt2").innerHTML = str ;
};


// ---------------------------------------------------------------------------
//  initialize start
// ---------------------------------------------------------------------------
function clickBtn1(id , value){
  document.getElementById("btn_mm").style.backgroundColor = "gray";     // reset background of button
  document.getElementById("btn_m1").style.backgroundColor = "gray";
  document.getElementById("msgtxt3").style.backgroundColor = "white";
  // ---------------------- global const
  width  = window.innerWidth; // 画面横フルサイズ
  height = window.innerHeight; // 画面縦フルサイズ

  let resp = 0 ;
  if (width / height  < 1 ) { resp = 1 }   // smart phone
  if (value.match("Manual")) { mode = "m" ,  document.getElementById("btn_mm").style.backgroundColor = "orange";}   // manual
  if (value.match("Auto"))    { mode  = "a" ,  document.getElementById("btn_m1").style.backgroundColor = "orange";}   // auto fast

  var userAgent = window.navigator.userAgent.toLowerCase();    // get browser 

  let sst = 0
  let sst0 = 0

  const imgw = (width / 8) * 0.8    // image width
  const imgh  = imgw / 1.77   // image height
  const imgd  = 0         // image depth
  const cpx = 0 ;         // center position x
  const cpy = 0 ;         // center position y
  //  const cpz = 300 ;      // center position z    define at camera position

  let im = 1 ;           // list number of mesh image
  let cpzi = 1 ;
  let tsls = 10 ;                             // speed default
  let imsvx = 0    // mesh restore position
  let imsvy = 0    // mesh restore position
  let imsvz = 0    // mesh restore position
  let csw = 0 ;
  let endflag = 0 ;              // end flag
  let tmsh = 0   ;               // text mesh
  let audiovolume =  1.0 ;   // audio volume
  var request , source , stopflag , closeflag = 0;

②audio(音楽)の処理


  // ---------------------------------------------------------------------------
  //   read music names from html and put in array
  // ---------------------------------------------------------------------------
  if ( mode != "m") {
    playlist = id.split("%", 8);   // take music name
    var mindex = 0;
    audionext ();

    function audionext () {                        // audio setup & next
      if ( mindex < playlist.length ) {
        audiosrc = playlist[mindex]             // audio name
        console.log(audiosrc)
        playSound(audiosrc);                     // play sound
        mindex++;
        mtitle = audiosrc.replace("mp3" , "" ).replace("music/" , "").replace("." , "");     // music title
        settext(mtitle)                          // mesh text write
      }
      else {
        audiosrc = playlist[0]
        playSound(audiosrc)
        mindex = 0;
      }
    };

    // ---------------------------------------------------------------------------
    //   web audio api define  
    //      XMLHttpRequest() : Asynchronous JavaScript + XM
    //      AudioContext()      : audio-processing
    //      decodeAudioData(): decode audio data asynchronously
    // ---------------------------------------------------------------------------
    function playSound(audiosrc) {
      request = new XMLHttpRequest();
      request.open("GET", audiosrc , true);
      request.responseType = "arraybuffer";
      request.onload = completeOnLoad;
      request.send();      // request to server
    };
    function completeOnLoad() {
      context = new AudioContext();
      source  = context.createBufferSource();
      gain     = context.createGain();                                   // control gain
      context.decodeAudioData(request.response, function (buf) {
        source.buffer = buf;
        if ( userAgent.indexOf('safari') !== - 1 && userAgent.indexOf('chrome') === - 1 ) { source.loop = true }  // loop for safari
        else {source.loop = false }
        source.connect(gain)                                             // source  gain
        source.onended = function() {                                // audio end event
          closeAudioContext()
          if (endflag == 0 ) {
            audionext()
          };                                                      // next audio play
        };
      });
      source.connect(context.destination);
      gain.connect(context.destination);                 // gain destination
      gain.gain.value = audiovolume ;
      source.start(0);                                            // start audio
    };
    function playPause() {                                     // audio pause
      if (stopflag == 0) {
        context.suspend()
        stopflag = 1
      } else {
        context.resume()
        stopflag = 0
      }
    };
    function closeAudioContext() {       // audio stop
      if (closeflag == 0) {
        context.close()                          // release resource
        closeflag = 1
      }
    };
    function playVolumnDown() {         // volume gain down
      gain.gain.value = 0.1
    };
  };

③three.jsを使って3Dコンテンツを定義


  // ---------------------------------------------------------------------------
  //  read image array
  // ---------------------------------------------------------------------------

  readimg();

  // ---------------------------------------------------------------------------
  //  Three define
  //     renderer : 規定の書式に従ってデータや画像を表示させるためのプログラム
  // ---------------------------------------------------------------------------
  const canvasElement = document.querySelector('#canvas3d')                         // get canvas
  const renderer = new THREE.WebGLRenderer({ canvas: canvasElement , alpha:true});
  renderer.setSize(width, height);
  document.body.appendChild(renderer.domElement);
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.shadowMap.enabled = true;
  const scene = new THREE.Scene();      // make scene
  //   var axes = new THREE.AxesHelper(5000);
  //   scene.add(axes);

  // ---------------------------------------------------------------------------
  // camera define
  // ---------------------------------------------------------------------------
  const fov = 45;                              // 視野角
  const fovRad = (fov / 2) * (Math.PI / 180);  // 視野角をラジアンに変換
  const cposz = (height / 2) / Math.tan(fovRad); // ウィンドウぴったりのカメラ距離
  camera = new THREE.PerspectiveCamera( fov , width / height , 1 , cposz*5 );  //  視野角, アスペクト比, near, far
 
  camera.position.set(0,0, cposz);

  camera.lookAt(new THREE.Vector3(0, 0, 0));   // center direction
  let cpz = cposz * 0.86 ;                  // center position z
  if (resp == 1){cpz = cposz * 0.88 }      // mobile
 
  //  const controls = new THREE.OrbitControls(camera, renderer.domElement);    // camera controler
  // ---------------------------------------------------------------------------
  // light define
  // ---------------------------------------------------------------------------
  ambientLight = new THREE.AmbientLight(0xadd8e6 , 1.0 );  // 環境光 lightblue
  scene.add(ambientLight);

  // PointLight 色, 光の強さ, 距離, 光の減衰率
  const pointlight = new THREE.PointLight( 0x522719 , 1.0 , cposz , 0 );
  scene.add(pointlight);
  // ---------------------------------------------------------------------------
  // mouse define raycasterで画面内のobjectを得るための setup
  // ---------------------------------------------------------------------------
  const mouse = new THREE.Vector2();         // マウス座標管理用のベクトルを作成
  canvasElement.addEventListener('click', handleMouseClick);   // マウスイベントを登録
  const cameravector = new THREE.Vector3( 0, 0 , -1 );         // マウスベクトル z 軸の中心へ向ける
  const raycaster = new THREE.Raycaster(camera.position, cameravector , 1 , cposz*10  );
  // ---------------------------------------------------------------------------
  // 3d define
  // ---------------------------------------------------------------------------
  const geometry1 = new THREE.BoxGeometry(imgw,imgh,imgd);   //  geometry 幾何学
  const geometry2 = new THREE.BoxGeometry(imgw,imgh,imgd);
  const geometry3 = new THREE.BoxGeometry(imgw,imgh,imgd);
  const geometry4 = new THREE.BoxGeometry(imgw,imgh,imgd);
  const geometry5 = new THREE.BoxGeometry(imgw,imgh,imgd);
  const geometry6 = new THREE.BoxGeometry(imgw,imgh,imgd);
  const geometry7 = new THREE.BoxGeometry(imgw,imgh,imgd);
  const geometry8 = new THREE.BoxGeometry(imgw,imgh,imgd);
  const geometry9 = new THREE.BoxGeometry(imgw,imgh,imgd);
  const geometry10 = new THREE.BoxGeometry(imgw,imgh,imgd);
  const geometry11 = new THREE.BoxGeometry(imgw,imgh,imgd);
  const geometry12 = new THREE.BoxGeometry(imgw,imgh,imgd);
  const geometry13 = new THREE.BoxGeometry(imgw,imgh,imgd);
  const geometry14 = new THREE.BoxGeometry(imgw,imgh,imgd);
  const geometry15 = new THREE.BoxGeometry(imgw,imgh,imgd);
  const geometry16 = new THREE.BoxGeometry(imgw,imgh,imgd);
  const geometry17 = new THREE.BoxGeometry(imgw,imgh,imgd);
  const geometry18 = new THREE.BoxGeometry(imgw,imgh,imgd);
  const geometry19 = new THREE.BoxGeometry(imgw,imgh,imgd);
  const geometry20 = new THREE.BoxGeometry(imgw,imgh,imgd);
  const geometry21 = new THREE.BoxGeometry(imgw,imgh,imgd);
  const geometry22 = new THREE.BoxGeometry(imgw,imgh,imgd);
  const geometry23 = new THREE.BoxGeometry(imgw,imgh,imgd);
  const geometry24 = new THREE.BoxGeometry(imgw,imgh,imgd);
  const geometry25 = new THREE.BoxGeometry(imgw,imgh,imgd);
  const geometry26 = new THREE.BoxGeometry(imgw,imgh,imgd);
  const geometry27 = new THREE.BoxGeometry(imgw,imgh,imgd);
  const geometry28 = new THREE.BoxGeometry(imgw,imgh,imgd);
  const geometry29 = new THREE.BoxGeometry(imgw,imgh,imgd);
  const geometry30 = new THREE.BoxGeometry(imgw,imgh,imgd);
  const geometry31 = new THREE.BoxGeometry(imgw,imgh,imgd);
  const geometry32 = new THREE.BoxGeometry(imgw,imgh,imgd);

  const loader_b = new THREE.TextureLoader();

  const texture1 = loader_b.load( img[1].substring(0,img[1].indexOf("%")) );  //  texture : 生地質 , 手触り
  const texture2 = loader_b.load( img[2].substring(0,img[2].indexOf("%")) );
  const texture3 = loader_b.load( img[3].substring(0,img[3].indexOf("%")) );
  const texture4 = loader_b.load( img[4].substring(0,img[4].indexOf("%")) );
  const texture5 = loader_b.load( img[5].substring(0,img[5].indexOf("%")) );
  const texture6 = loader_b.load( img[6].substring(0,img[6].indexOf("%")) );
  const texture7 = loader_b.load( img[7].substring(0,img[7].indexOf("%")) );
  const texture8 = loader_b.load( img[8].substring(0,img[8].indexOf("%")) );
  const texture9 = loader_b.load( img[9].substring(0,img[9].indexOf("%")) );
  const texture10 = loader_b.load( img[10].substring(0,img[10].indexOf("%")) );
  const texture11 = loader_b.load( img[11].substring(0,img[11].indexOf("%")) );
  const texture12 = loader_b.load( img[12].substring(0,img[12].indexOf("%")) );
  const texture13 = loader_b.load( img[13].substring(0,img[13].indexOf("%")) );
  const texture14 = loader_b.load( img[14].substring(0,img[14].indexOf("%")) );
  const texture15 = loader_b.load( img[15].substring(0,img[15].indexOf("%")) );
  const texture16 = loader_b.load( img[16].substring(0,img[16].indexOf("%")) );
  const texture17 = loader_b.load( img[17].substring(0,img[17].indexOf("%")) );
  const texture18 = loader_b.load( img[18].substring(0,img[18].indexOf("%")) );
  const texture19 = loader_b.load( img[19].substring(0,img[19].indexOf("%")) );
  const texture20 = loader_b.load( img[20].substring(0,img[20].indexOf("%")) );
  const texture21 = loader_b.load( img[21].substring(0,img[21].indexOf("%")) );
  const texture22 = loader_b.load( img[22].substring(0,img[22].indexOf("%")) );
  const texture23 = loader_b.load( img[23].substring(0,img[23].indexOf("%")) );
  const texture24 = loader_b.load( img[24].substring(0,img[24].indexOf("%")) );
  const texture25 = loader_b.load( img[25].substring(0,img[25].indexOf("%")) );
  const texture26 = loader_b.load( img[26].substring(0,img[26].indexOf("%")) );
  const texture27 = loader_b.load( img[27].substring(0,img[27].indexOf("%")) );
  const texture28 = loader_b.load( img[28].substring(0,img[28].indexOf("%")) );
  const texture29 = loader_b.load( img[29].substring(0,img[29].indexOf("%")) );
  const texture30 = loader_b.load( img[30].substring(0,img[30].indexOf("%")) );
  const texture31 = loader_b.load( img[31].substring(0,img[31].indexOf("%")) );
  const texture32 = loader_b.load( img[32].substring(0,img[32].indexOf("%")) );

  const material1 = new THREE.MeshPhongMaterial({ map: texture1 });
  const material2 = new THREE.MeshPhongMaterial({ map: texture2 });
  const material3 = new THREE.MeshPhongMaterial({ map: texture3 });
  const material4 = new THREE.MeshPhongMaterial({ map: texture4 });
  const material5 = new THREE.MeshPhongMaterial({ map: texture5 });
  const material6 = new THREE.MeshPhongMaterial({ map: texture6 });
  const material7 = new THREE.MeshPhongMaterial({ map: texture7 });
  const material8 = new THREE.MeshPhongMaterial({ map: texture8 });
  const material9 = new THREE.MeshPhongMaterial({ map: texture9 });
  const material10 = new THREE.MeshPhongMaterial({ map: texture10 });
  const material11 = new THREE.MeshPhongMaterial({ map: texture11 });
  const material12 = new THREE.MeshPhongMaterial({ map: texture12 });
  const material13 = new THREE.MeshPhongMaterial({ map: texture13 });
  const material14 = new THREE.MeshPhongMaterial({ map: texture14 });
  const material15 = new THREE.MeshPhongMaterial({ map: texture15 });
  const material16 = new THREE.MeshPhongMaterial({ map: texture16 });
  const material17 = new THREE.MeshPhongMaterial({ map: texture17 });
  const material18 = new THREE.MeshPhongMaterial({ map: texture18 });
  const material19 = new THREE.MeshPhongMaterial({ map: texture19 });
  const material20 = new THREE.MeshPhongMaterial({ map: texture20 });
  const material21 = new THREE.MeshPhongMaterial({ map: texture21 });
  const material22 = new THREE.MeshPhongMaterial({ map: texture22 });
  const material23 = new THREE.MeshPhongMaterial({ map: texture23 });
  const material24 = new THREE.MeshPhongMaterial({ map: texture24 });
  const material25 = new THREE.MeshPhongMaterial({ map: texture25 });
  const material26 = new THREE.MeshPhongMaterial({ map: texture26 });
  const material27 = new THREE.MeshPhongMaterial({ map: texture27 });
  const material28 = new THREE.MeshPhongMaterial({ map: texture28 });
  const material29 = new THREE.MeshPhongMaterial({ map: texture29 });
  const material30 = new THREE.MeshPhongMaterial({ map: texture30 });
  const material31 = new THREE.MeshPhongMaterial({ map: texture31 });
  const material32 = new THREE.MeshPhongMaterial({ map: texture32 });

  const mesh1 = new THREE.Mesh(geometry1, material1);  // mesh:  網の目
  const mesh2 = new THREE.Mesh(geometry2, material2);
  const mesh3 = new THREE.Mesh(geometry3, material3);
  const mesh4 = new THREE.Mesh(geometry4, material4);
  const mesh5 = new THREE.Mesh(geometry5, material5);
  const mesh6 = new THREE.Mesh(geometry6, material6);
  const mesh7 = new THREE.Mesh(geometry7, material7);
  const mesh8 = new THREE.Mesh(geometry8, material8);
  const mesh9 = new THREE.Mesh(geometry9, material9);
  const mesh10 = new THREE.Mesh(geometry10, material10);
  const mesh11 = new THREE.Mesh(geometry11, material11);
  const mesh12 = new THREE.Mesh(geometry12, material12);
  const mesh13 = new THREE.Mesh(geometry13, material13);
  const mesh14 = new THREE.Mesh(geometry14, material14);
  const mesh15 = new THREE.Mesh(geometry15, material15);
  const mesh16 = new THREE.Mesh(geometry16, material16);
  const mesh17 = new THREE.Mesh(geometry17, material17);
  const mesh18 = new THREE.Mesh(geometry18, material18);
  const mesh19 = new THREE.Mesh(geometry19, material19);
  const mesh20 = new THREE.Mesh(geometry20, material20);
  const mesh21 = new THREE.Mesh(geometry21, material21);
  const mesh22 = new THREE.Mesh(geometry22, material22);
  const mesh23 = new THREE.Mesh(geometry23, material23);
  const mesh24 = new THREE.Mesh(geometry24, material24);
  const mesh25 = new THREE.Mesh(geometry25, material25);
  const mesh26 = new THREE.Mesh(geometry26, material26);
  const mesh27 = new THREE.Mesh(geometry27, material27);
  const mesh28 = new THREE.Mesh(geometry28, material28);
  const mesh29 = new THREE.Mesh(geometry29, material29);
  const mesh30 = new THREE.Mesh(geometry30, material30);
  const mesh31 = new THREE.Mesh(geometry31, material31);
  const mesh32 = new THREE.Mesh(geometry32, material32);

  scene.add(mesh1,mesh2,mesh3,mesh4,mesh5,mesh6,mesh7,mesh8,mesh9,mesh10,
    mesh11,mesh12,mesh13,mesh14,mesh15,mesh16,mesh17,mesh18,mesh19,mesh20,
    mesh21,mesh22,mesh23,mesh24,mesh25,mesh26,mesh27,mesh28,mesh29,mesh30,
    mesh31,mesh32
  );

  // ---------------------------------------------------------------------------
  //   text define
  // ---------------------------------------------------------------------------
  function settext(text) {
    if (tmsh == 1){scene.remove(textMesh1)}
    loadert = new THREE.FontLoader();
    loadert.load('fonts/optimer_regular.typeface.json', function(font){
      textGeometry1 = new THREE.TextGeometry(text , {
        font: font , size: 15 , height:2 , curveSegments: 5            // height 厚さ
      });
      textMaterial1 = new THREE.MeshPhongMaterial({ color: 0xffffff});
      textMesh1 = new THREE.Mesh(textGeometry1, textMaterial1);
      scene.add(textMesh1);
      textGeometry1.center();         // text on center position set
      textMesh1.position.set(0 , - 280 , 0) ;
      // textMesh1.rotation.x = -0.3
      tmsh = 1 ;
    });
  };


④アニメーション(3dコンテンツを表示・動かす)


  // ---------------------------------------------------------------------------
  // set initial position
  // ---------------------------------------------------------------------------

  setinit();         // 初期位置

  listmesh();        // mesh を msl 配列にいれる

  backcircle()       // background circle define

  // ---------------------------------------------------------------------------
  //   start animation
  // ---------------------------------------------------------------------------
  const s1 = 5 ;                                   // end of animation stag1
  const s2 = 520 ;                                 // end of animation stag2
  const s3 = s1 +  tsls * msl.length ;       // end of animation stag3

  tick();

  // ---------------------------------------------------------------------------
  //  Tick  the time
  // ---------------------------------------------------------------------------
  function tick() {
    if ( mode != "m") {
      backcirclerange () ;   //  back circle diffusion
      sst0 += 0.0167 ;
      sst = Math.round(sst0)
      if ( sst <= s3 ) {
        str = sst + " / " + s3 ;
        document.getElementById("msgtxt1").innerHTML = str ;   // put current time on html
      };

      if ( sst >= s1) {
        if ( sst % tsls == 0 && csw == 0 && im < msl.length ) {             // loop image display
          if (im > 1 ) {msl[im-1].position.set( imsvx , imsvy , imsvz)  }     // position restore
          imsvx = msl[im].position.x           // initial position save
          imsvy = msl[im].position.y
          imsvz = msl[im].position.z
          msgtxt =  img[im].split("%",2)       // image text
          if (typeof msgtxt[1] === "undefined") {msgtxt[1] = ''}
          document.getElementById("msgtxt3").innerHTML = msgtxt[1]
          cpxi = msl[im].position.x
          cpyi = msl[im].position.y
          cpzi = msl[im].position.z
          csw = 1 ;
        };
        if ( csw ==1 ) {
          cpxi = cpxi * 0.990 , cpyi =  cpyi * 0.95
        };

        if (cpzi <= cpz && csw ==1 ) {     // moving z
          cpzi += 1.8 ; 
          msl[im].position.set ( cpxi  , cpyi , cpzi )
          msl[im].rotation.y += Math.PI / 4 * 0.01    // rotation y
        }
        else if ( cpzi >= cpz && csw ==1 ) {
          msl[im].rotation.set ( 0 , 0 , 0 )          // rotation restore
          msl[im].position.set ( cpx , cpy , cpzi )   // display center position
          im += 1   // set next image
          csw = 0                                                 // next image sw
        };
      };

      if (sst >= s3 - 5 ) {                          // volume down before 5 sec
        playVolumnDown()
      };

      if (sst >  s3 && endflag ===0 ) {    // ending process
        endflag = 1
        endproc()       // end proc
      };

    };   // not mnual mode end

    renderer.render(scene, camera);                           // レンダリング

    if ( endflag == 0 ) {
      tickreq = requestAnimationFrame(tick);
    };
  };    //  tick end

⑤終了処理


  // ---------------------------------------------------------------------------
  // end process
  // ---------------------------------------------------------------------------
  function endproc() {
    //    document.getElementById("msgtxt1").innerHTML = "end ...";
    //    document.getElementById("msgtxt3").innerHTML = "2回目以降はブラウザを更新してください。" ;
    cancelAnimationFrame(tickreq) ;
    setinit();
    source.stop(3);           // audio stop after 3 seconds
    closeAudioContext()    // release audio resource
   };



⑥meshを初期位置に整列


  // ---------------------------------------------------------------------------
  //  initial position set
  // ---------------------------------------------------------------------------
  function setinit() {
    const xwd = imgw;        // image width
    const yht = imgh ;       // image height
 
    xpos = - xwd * 8 / 2 + xwd / 2  ;  // initial position
    ypos = yht * 8 / 2 ,  mesh1.position.set(xpos,ypos,0) ;
    xpos = xpos + xwd , mesh2.position.set(xpos,ypos,0) ;
    xpos = xpos + xwd , mesh3.position.set(xpos,ypos,0) ;
    xpos = xpos + xwd , mesh4.position.set(xpos,ypos,0) ;
    xpos = xpos + xwd , mesh5.position.set(xpos,ypos,0) ;
    xpos = xpos + xwd , mesh6.position.set(xpos,ypos,0) ;
    xpos = xpos + xwd , mesh7.position.set(xpos,ypos,0) ;
    xpos = xpos + xwd , mesh8.position.set(xpos,ypos,0) ;
    xpos = - xwd * 8 / 2 + xwd / 2  ;
    ypos = ypos - yht ,  mesh9.position.set(xpos,ypos,0) ;
    xpos = xpos + xwd , mesh10.position.set(xpos,ypos,0) ;
    xpos = xpos + xwd , mesh11.position.set(xpos,ypos,0) ;
    xpos = xpos + xwd , mesh12.position.set(xpos,ypos,0) ;
    xpos = xpos + xwd , mesh13.position.set(xpos,ypos,0) ;
    xpos = xpos + xwd , mesh14.position.set(xpos,ypos,0) ;
    xpos = xpos + xwd , mesh15.position.set(xpos,ypos,0) ;
    xpos = xpos + xwd , mesh16.position.set(xpos,ypos,0) ;
    xpos = - xwd * 8 / 2 + xwd / 2 ;
    ypos = ypos - yht ,  mesh17.position.set(xpos,ypos,0) ;
    xpos = xpos + xwd , mesh18.position.set(xpos,ypos,0) ;
    xpos = xpos + xwd , mesh19.position.set(xpos,ypos,0) ;
    xpos = xpos + xwd , mesh20.position.set(xpos,ypos,0) ;
    xpos = xpos + xwd , mesh21.position.set(xpos,ypos,0) ;
    xpos = xpos + xwd , mesh22.position.set(xpos,ypos,0) ;
    xpos = xpos + xwd , mesh23.position.set(xpos,ypos,0) ;
    xpos = xpos + xwd , mesh24.position.set(xpos,ypos,0) ;
    xpos = - xwd * 8 / 2 + xwd / 2 ;
    ypos = ypos - yht , mesh25.position.set(xpos,ypos,0) ;
    xpos = xpos + xwd , mesh26.position.set(xpos,ypos,0) ;
    xpos = xpos + xwd , mesh27.position.set(xpos,ypos,0) ;
    xpos = xpos + xwd , mesh28.position.set(xpos,ypos,0) ;
    xpos = xpos + xwd , mesh29.position.set(xpos,ypos,0) ;
    xpos = xpos + xwd , mesh30.position.set(xpos,ypos,0) ;
    xpos = xpos + xwd , mesh31.position.set(xpos,ypos,0) ;
    xpos = xpos + xwd , mesh32.position.set(xpos,ypos,0) ;
 
  };


⑦画像データを配列に入れる


  // ---------------------------------------------------------------------------
  //  read image
  // ---------------------------------------------------------------------------
  function readimg() {
    img = new Array();
    // 2021-09-29 17:22:01
    img[1] = 'img2021/P1063380.jpg%2021/01/06 トモエガモ 町田市薬師池公園';
    img[2] = 'img2021/P1130090.jpg%2021/01/13 結氷の朝 町田市薬師池公園';
    img[3] = 'img2021/P1292587.jpg%2021/01/29 キセキレイ 町田市薬師池公園';
    img[4] = 'img2021/P1312708.jpg%2021/01/31 エナガ 町田市薬師池公園';
    img[5] = 'img2021/P2184347.jpg%2021/02/18   シジュウカラ 町田市薬師池公園';
    img[6] = 'img2021/P2184403.jpg%2021/02/18 紅梅 町田市薬師池公園';
    img[7] = 'img2021/P2244999.png%2021/02/24 モズ (百舌鳥) 町田市薬師池公園';
    img[8] = 'img2021/P2245235.png%2021/02/24 ジョウビタキ 町田市薬師池公園';
    img[9] = 'img2021/P3035862.jpg%2021/03/03  ツグミ 町田市薬師池公園';
    img[10] = 'img2021/P3106909.jpg%2021/03/10 ヤマガラ 町田市薬師池公園';
    img[11] = 'img2021/P3117024.jpg%2021/03/11 メジロ 町田市薬師池公園';
    img[12] = 'img2021/P3117436.jpg%2021/03/11 ヒヨドリ 町田市薬師池公園';
    img[13] = 'img2021/P3240512.jpg%2021/03/24 白梅 町田市薬師池公園';
    img[14] = 'img2021/P3240526.jpg%2021/03/24 山桜 町田市薬師池公園';
    img[15] = 'img2021/P3301006.jpg%2021/03/30 八重桜 町田市下小山田町尾根緑道';
    img[16] = 'img2021/P3311129.jpg%2021/03/31 桜 町田市恩田川';
    img[17] = 'img2021/P4021418.jpg%2021/04/02 御衣黄 町田市ぼたん園';
    img[18] = 'img2021/P4071628.jpg%2021/04/07 ムラサキハナナ 町田市七国山';
    img[19] = 'img2021/P4071799.jpg%2021/04/10 ウワミズザクラ(上溝桜) 町田市薬師池公園';
    img[20] = 'img2021/P4182512.jpg%2021/04/18 カイツブリ 町田市薬師池公園';
    img[21] = 'img2021/P4212542.jpg%2021/04/21  エビネ 町田えびね苑';
    img[22] = 'img2021/P4212552.jpg%2021/04/21  クマガイソウ 町田えびね苑';
    img[23] = 'img2021/P4232661.jpg%2021/04/23   フジ 町田市薬師池公園';
    img[24] = 'img2021/P4232695.jpg%2021/04/23 イチハツ 町田市薬師池公園';
    img[25] = 'img2021/P4272723.jpg%2021/04/27 ハンカチの木 町田市薬師池公園';
    img[26] = 'img2021/P4272884.jpg%2021/04/27 カワセミ 町田市薬師池公園';
    img[27] = 'img2021/P5063457.jpg%2021/05/06 ホオノキ (朴の木) 町田市薬師池公園';
    img[28] = 'img2021/P5145063.jpg%2021/05/14 ミドリセイボウ (緑青蜂) 町田市薬師池公園';
    img[29] = 'img2021/P5290179.jpg%2021/05/19 ラ・フランス 町田市野津田公園ばら広場';
    img[30] = 'img2021/P5216248.jpg%2021/05/21 オオヤマレンゲ 町田市薬師池公園';
    img[31] = 'img2021/P5226460.jpg%2021/05/22 センダン 町田市薬師池公園';
    img[32] = 'img2021/P6020839.jpg%2021/06/02 花菖蒲 町田市薬師池公園';
  // ---------------------------------------------------------------------------
  //  mesh array define
  // ---------------------------------------------------------------------------
  function listmesh () {
    msl  = new Array();
    msl [0] = mesh1
    msl [1] = mesh1 ,  msl [2] = mesh2 , msl [3] = mesh3 ,  msl [4] = mesh4 ,  msl [5] = mesh5
    msl [6] = mesh6 ,  msl [7] = mesh7 , msl [8] = mesh8 ,  msl [9] = mesh9 ,  msl [10] = mesh10
    msl [11] = mesh11 , msl [12] = mesh12 , msl [13] = mesh13 , msl [14] = mesh14 , msl [15] = mesh15
    msl [16] = mesh16 , msl [17] = mesh17 , msl [18] = mesh18 , msl [19] = mesh19 , msl [20] = mesh20
    msl [21] = mesh21 , msl [22] = mesh22 , msl [23] = mesh23 , msl [24] = mesh24 , msl [25] = mesh25
    msl [26] = mesh26 , msl [27] = mesh27 , msl [28] = mesh28 , msl [29] = mesh29 , msl [30] = mesh30
    msl [31] = mesh31 , msl [32] = mesh32
  };


⑧バックの円模様の定義と処理


  // ---------------------------------------------------------------------------
  //  back circle define
  // ---------------------------------------------------------------------------
  function backcircle() {
    if (resp == 1) { crads = 25 }  // for mobile phone radius
    else { crads = 30 } ;
    const opcc = 0.2 ;             // opacity value
    const ccolor1 = 0x444444 ;   // color1
    const ccolor2 = 0xffffff ;   // color2
    const ccolor3 = 0x222222 ;   // color3
    radius_c1 = radius_c2 = radius_c3 = crads ;
    segments_c1 = segments_c2 = segments_c3 = crads ;
    radius_c4 = radius_c5 = radius_c6 = crads / 0.8 ;
    segments_c4 = segments_c5 = segments_c6 = crads / 0.8 ;
    radius_c7 = radius_c8 = radius_c9 = crads / 0.6 ;
    segments_c7 = segments_c8 = segments_c9 = crads / 0.6 ;
    radius_c10 = radius_c11 = radius_c12 = crads / 0.4 ;
    segments_c10 = segments_c11 = segments_c12 = crads / 0.4 ;
    radius_c13 = radius_c14 = radius_c15 = crads ;
    segments_c13 = segments_c14 = segments_c15 = crads ;
    radius_c16 = radius_c17 = radius_c18 = crads ;
    segments_c16 = segments_c17 = segments_c18 = crads ;
    radius_c19 = radius_c20 = radius_c21 = crads / 0.8 ;
    segments_c19 = segments_c20 = segments_c21 = crads / 0.8 ;
    radius_c22 = radius_c23 = radius_c24 = crads / 0.6 ;
    segments_c22 = segments_c23 = segments_c24 = crads / 0.6 ;
    radius_c25 = radius_c26 = radius_c27 = crads / 0.6 ;
    segments_c25 = segments_c26 = segments_c27 = crads / 0.6 ;
    radius_c28 = radius_c29 = radius_c30 = crads / 0.4 ;
    segments_c28 = segments_c29 = segments_c30 = crads / 0.2 ;

    mva = 0.01 ;    // adjust speed
    const bmc  = 1 ;
    thsw   =   bmc * width     // width  limit
    thsh   =   bmc * height    // height limit
    const geometry_c1 = new THREE.CircleGeometry ( radius_c1, segments_c1 ) ;
    const geometry_c2 = new THREE.CircleGeometry ( radius_c2, segments_c2 ) ;
    const geometry_c3 = new THREE.CircleGeometry ( radius_c3, segments_c3 ) ;
    const geometry_c4 = new THREE.CircleGeometry ( radius_c4, segments_c4 ) ;
    const geometry_c5 = new THREE.CircleGeometry ( radius_c5, segments_c5 ) ;
    const geometry_c6 = new THREE.CircleGeometry ( radius_c6, segments_c6 ) ;
    const geometry_c7 = new THREE.CircleGeometry ( radius_c7, segments_c7 ) ;
    const geometry_c8 = new THREE.CircleGeometry ( radius_c8, segments_c8 ) ;
    const geometry_c9 = new THREE.CircleGeometry ( radius_c9, segments_c9 ) ;
    const geometry_c10 = new THREE.CircleGeometry ( radius_c10, segments_c10 ) ;
    const geometry_c11 = new THREE.CircleGeometry ( radius_c11, segments_c11 ) ;
    const geometry_c12 = new THREE.CircleGeometry ( radius_c12, segments_c12 ) ;
    const geometry_c13 = new THREE.CircleGeometry ( radius_c13, segments_c13 ) ;
    const geometry_c14 = new THREE.CircleGeometry ( radius_c14, segments_c14 ) ;
    const geometry_c15 = new THREE.CircleGeometry ( radius_c15, segments_c15 ) ;
    const geometry_c16 = new THREE.CircleGeometry ( radius_c16, segments_c16 ) ;
    const geometry_c17 = new THREE.CircleGeometry ( radius_c17, segments_c17 ) ;
    const geometry_c18 = new THREE.CircleGeometry ( radius_c18, segments_c18 ) ;
    const geometry_c19 = new THREE.CircleGeometry ( radius_c19, segments_c19 ) ;
    const geometry_c20 = new THREE.CircleGeometry ( radius_c20, segments_c20 ) ;
    const geometry_c21 = new THREE.CircleGeometry ( radius_c21, segments_c21 ) ;
    const geometry_c22 = new THREE.CircleGeometry ( radius_c22, segments_c22 ) ;
    const geometry_c23 = new THREE.CircleGeometry ( radius_c23, segments_c23 ) ;
    const geometry_c24 = new THREE.CircleGeometry ( radius_c24, segments_c24 ) ;
    const geometry_c25 = new THREE.CircleGeometry ( radius_c25, segments_c25 ) ;
    const geometry_c26 = new THREE.CircleGeometry ( radius_c26, segments_c26 ) ;
    const geometry_c27 = new THREE.CircleGeometry ( radius_c27, segments_c27 ) ;
    const geometry_c28 = new THREE.CircleGeometry ( radius_c28, segments_c28 ) ;
    const geometry_c29 = new THREE.CircleGeometry ( radius_c29, segments_c29 ) ;
    const geometry_c30 = new THREE.CircleGeometry ( radius_c30, segments_c30 ) ;
    const material_c1 = new THREE.MeshLambertMaterial({ color: ccolor1 ,  opacity : opcc , transparent: true,});
    const material_c2 = new THREE.MeshLambertMaterial({ color: ccolor2 ,  opacity : opcc , transparent: true,});
    const material_c3 = new THREE.MeshLambertMaterial({ color: ccolor3 ,  opacity : opcc , transparent: true,});
    const material_c4 = new THREE.MeshLambertMaterial({ color: ccolor1 ,  opacity : opcc , transparent: true,});
    const material_c5 = new THREE.MeshLambertMaterial({ color: ccolor2 ,  opacity : opcc , transparent: true,});
    const material_c6 = new THREE.MeshLambertMaterial({ color: ccolor3 ,  opacity : opcc , transparent: true,});
    const material_c7 = new THREE.MeshLambertMaterial({ color: ccolor1 ,  opacity : opcc , transparent: true,});
    const material_c8 = new THREE.MeshLambertMaterial({ color: ccolor2 ,  opacity : opcc , transparent: true,});
    const material_c9 = new THREE.MeshLambertMaterial({ color: ccolor3 ,  opacity : opcc , transparent: true,});
    const material_c10 = new THREE.MeshLambertMaterial({ color: ccolor1 ,  opacity : opcc , transparent: true,});
    const material_c11 = new THREE.MeshLambertMaterial({ color: ccolor2 ,  opacity : opcc , transparent: true,});
    const material_c12 = new THREE.MeshLambertMaterial({ color: ccolor3 ,  opacity : opcc , transparent: true,});
    const material_c13 = new THREE.MeshLambertMaterial({ color: ccolor3 ,  opacity : opcc , transparent: true,});
    const material_c14 = new THREE.MeshLambertMaterial({ color: ccolor1 ,  opacity : opcc , transparent: true,});
    const material_c15 = new THREE.MeshLambertMaterial({ color: ccolor2 ,  opacity : opcc , transparent: true,});
    const material_c16 = new THREE.MeshLambertMaterial({ color: ccolor3 ,  opacity : opcc , transparent: true,});
    const material_c17 = new THREE.MeshLambertMaterial({ color: ccolor1 ,  opacity : opcc , transparent: true,});
    const material_c18 = new THREE.MeshLambertMaterial({ color: ccolor2 ,  opacity : opcc , transparent: true,});
    const material_c19 = new THREE.MeshLambertMaterial({ color: ccolor3 ,  opacity : opcc , transparent: true,});
    const material_c20 = new THREE.MeshLambertMaterial({ color: ccolor1 ,  opacity : opcc , transparent: true,});
    const material_c21 = new THREE.MeshLambertMaterial({ color: ccolor2 ,  opacity : opcc , transparent: true,});
    const material_c22 = new THREE.MeshLambertMaterial({ color: ccolor3 ,  opacity : opcc , transparent: true,});
    const material_c23 = new THREE.MeshLambertMaterial({ color: ccolor3 ,  opacity : opcc , transparent: true,});
    const material_c24 = new THREE.MeshLambertMaterial({ color: ccolor1 ,  opacity : opcc , transparent: true,});
    const material_c25 = new THREE.MeshLambertMaterial({ color: ccolor2 ,  opacity : opcc , transparent: true,});
    const material_c26 = new THREE.MeshLambertMaterial({ color: ccolor3 ,  opacity : opcc , transparent: true,});
    const material_c27 = new THREE.MeshLambertMaterial({ color: ccolor1 ,  opacity : opcc , transparent: true,});
    const material_c28 = new THREE.MeshLambertMaterial({ color: ccolor2 ,  opacity : opcc , transparent: true,});
    const material_c29 = new THREE.MeshLambertMaterial({ color: ccolor3 ,  opacity : opcc , transparent: true,});
    const material_c30 = new THREE.MeshLambertMaterial({ color: ccolor1 ,  opacity : opcc , transparent: true,});
    mesh_c1 = new THREE.Mesh(geometry_c1 , material_c1 );
    mesh_c2 = new THREE.Mesh(geometry_c2 , material_c2 );
    mesh_c3 = new THREE.Mesh(geometry_c3 , material_c3 );
    mesh_c4 = new THREE.Mesh(geometry_c4 , material_c4 );
    mesh_c5 = new THREE.Mesh(geometry_c5 , material_c5 );
    mesh_c6 = new THREE.Mesh(geometry_c6 , material_c6);
    mesh_c7 = new THREE.Mesh(geometry_c7 , material_c7 );
    mesh_c8 = new THREE.Mesh(geometry_c8 , material_c8 );
    mesh_c9 = new THREE.Mesh(geometry_c9 , material_c9 );
    mesh_c10 = new THREE.Mesh(geometry_c10 , material_c10 );
    mesh_c11 = new THREE.Mesh(geometry_c11 , material_c11 );
    mesh_c12 = new THREE.Mesh(geometry_c12 , material_c12 );
    mesh_c13 = new THREE.Mesh(geometry_c13 , material_c13 );
    mesh_c14 = new THREE.Mesh(geometry_c14 , material_c14 );
    mesh_c15 = new THREE.Mesh(geometry_c15 , material_c15 );
    mesh_c16 = new THREE.Mesh(geometry_c16 , material_c16);
    mesh_c17 = new THREE.Mesh(geometry_c17 , material_c17 );
    mesh_c18 = new THREE.Mesh(geometry_c18 , material_c18 );
    mesh_c19 = new THREE.Mesh(geometry_c19 , material_c19 );
    mesh_c20 = new THREE.Mesh(geometry_c20 , material_c20 );
    mesh_c21 = new THREE.Mesh(geometry_c21 , material_c21 );
    mesh_c22 = new THREE.Mesh(geometry_c22 , material_c22 );
    mesh_c23 = new THREE.Mesh(geometry_c23 , material_c23 );
    mesh_c24 = new THREE.Mesh(geometry_c24 , material_c24 );
    mesh_c25 = new THREE.Mesh(geometry_c25 , material_c25 );
    mesh_c26 = new THREE.Mesh(geometry_c26 , material_c26);
    mesh_c27 = new THREE.Mesh(geometry_c27 , material_c27 );
    mesh_c28 = new THREE.Mesh(geometry_c28 , material_c28 );
    mesh_c29 = new THREE.Mesh(geometry_c29 , material_c29 );
    mesh_c30 = new THREE.Mesh(geometry_c30 , material_c30 );
    scene.add( mesh_c1 , mesh_c2 , mesh_c3 , mesh_c4 , mesh_c5 , mesh_c6 , mesh_c7 , mesh_c8 , mesh_c9 , mesh_c10 , mesh_c11 , mesh_c12 );
    scene.add( mesh_c13 , mesh_c14 , mesh_c15 , mesh_c16 , mesh_c17 , mesh_c18 , mesh_c19 , mesh_c20 , mesh_c21 , mesh_c22 );
    scene.add( mesh_c23 , mesh_c24 , mesh_c25 , mesh_c26 , mesh_c27 , mesh_c28 , mesh_c29 , mesh_c30 );

    mvx1 = mva * Math.random() * 11 ,  mvy1 = mva * Math.random() * 11 ;
    mvx2 = mva * Math.random() * 11 ,  mvy2 = mva * Math.random() * 11 ;
    mvx3 = mva * Math.random() * 11 ,  mvy3 = mva * Math.random() * 11 ;
    mvx4 = mva * Math.random() * 11 ,  mvy4 = mva * Math.random() * 11 ;
    mvx5 = mva * Math.random() * 11 ,  mvy5 = mva * Math.random() * 11 ;
    mvx6 = mva * Math.random() * 11 ,  mvy6 = mva * Math.random() * 11 ;
    mvx7 = mva * Math.random() * 11 ,  mvy7 = mva * Math.random() * 11 ;
    mvx8 = mva * Math.random() * 11 ,  mvy8 = mva * Math.random() * 11 ;
    mvx9 = mva * Math.random() * 11 ,  mvy9 = mva * Math.random() * 11 ;
    mvx10 = mva * Math.random() * 11 , mvy10 = mva * Math.random() * 11 ;
    mvx11 = mva * Math.random() * 11 , mvy11 = mva * Math.random() * 11 ;
    mvx12 = mva * Math.random() * 11 , mvy12 = mva * Math.random() * 11 ;
    mvx13 = mva * Math.random() * 11 , mvy13 = mva * Math.random() * 11 ;
    mvx14 = mva * Math.random() * 11 , mvy14 = mva * Math.random() * 11 ;
    mvx15 = mva * Math.random() * 11 , mvy15 = mva * Math.random() * 11 ;
    mvx16 = mva * Math.random() * 11 , mvy16 = mva * Math.random() * 11 ;
    mvx17 = mva * Math.random() * 11 , mvy17 = mva * Math.random() * 11 ;
    mvx18 = mva * Math.random() * 11 ,  mvy18 = mva * Math.random() * 11 ;
    mvx19 = mva * Math.random() * 11 ,  mvy19 = mva * Math.random() * 11 ;
    mvx20 = mva * Math.random() * 11 ,  mvy20 = mva * Math.random() * 11 ;
    mvx21 = mva * Math.random() * 11 ,  mvy21 = mva * Math.random() * 11 ;
    mvx22 = mva * Math.random() * 11 ,  mvy22 = mva * Math.random() * 11 ;
    mvx23 = mva * Math.random() * 11 ,  mvy23 = mva * Math.random() * 11 ;
    mvx24 = mva * Math.random() * 11 ,  mvy24 = mva * Math.random() * 11 ;
    mvx25 = mva * Math.random() * 11 ,  mvy25 = mva * Math.random() * 11 ;
    mvx26 = mva * Math.random() * 11,   mvy26 = mva * Math.random() * 11 ;
    mvx27 = mva * Math.random() * 11 ,  mvy27 = mva * Math.random() * 11 ;
    mvx28 = mva * Math.random() * 11 ,  mvy28 = mva * Math.random() * 11 ;
    mvx29 = mva * Math.random() * 11 ,  mvy29 = mva * Math.random() * 11 ;
    mvx30 = mva * Math.random() * 11 ,  mvy30 = mva * Math.random() * 11 ;

    const mvz =  - 100
    mesh_c1.position.z = mvz , mesh_c2.position.z = mvz , mesh_c3.position.z = mvz
    mesh_c4.position.z = mvz , mesh_c5.position.z = mvz , mesh_c6.position.z = mvz
    mesh_c7.position.z = mvz , mesh_c8.position.z = mvz , mesh_c9.position.z = mvz
    mesh_c10.position.z = mvz , mesh_c11.position.z = mvz , mesh_c12.position.z = mvz
    mesh_c13.position.z = mvz , mesh_c14.position.z = mvz , mesh_c15.position.z = mvz
    mesh_c16.position.z = mvz , mesh_c17.position.z = mvz , mesh_c18.position.z = mvz
    mesh_c19.position.z = mvz , mesh_c20.position.z = mvz , mesh_c21.position.z = mvz
    mesh_c22.position.z = mvz , mesh_c23.position.z = mvz , mesh_c24.position.z = mvz
    mesh_c25.position.z = mvz , mesh_c26.position.z = mvz , mesh_c27.position.z = mvz
    mesh_c28.position.z = mvz , mesh_c29.position.z = mvz , mesh_c30.position.z = mvz

  };
  // ---------------------------------------------------------------------------
  // back circle  position
  // ---------------------------------------------------------------------------
  function backcirclerange () {
    mesh_c1.position.x +=  mvx1 ;
    if (mesh_c1.position.x >thsw | mesh_c1.position.x < - thsw ) {mvx1 = mvx1 * -1};
    mesh_c1.position.y +=  mvy1 ;
    if (mesh_c1.position.y > thsh | mesh_c1.position.y < - thsh ) {mvy1 = mvy1 * -1};
    mesh_c2.position.x -=  mvx2 ;
    if (mesh_c2.position.x >thsw | mesh_c2.position.x < - thsw ) {mvx2 = mvx2 * -1};
    mesh_c2.position.y +=  mvy2 ;
    if (mesh_c2.position.y > thsh | mesh_c2.position.y < - thsh ) {mvy2 = mvy2 * -1};
    mesh_c3.position.x +=  mvx3 ;
    if (mesh_c3.position.x >thsw | mesh_c3.position.x < - thsw ) {mvx3 = mvx3 * -1};
    mesh_c3.position.y -=  mvy3 ;
    if (mesh_c3.position.y > thsh | mesh_c3.position.y < - thsh ) {mvy3 = mvy3 * -1};
    mesh_c4.position.x -=  mvx4;
    if (mesh_c4.position.x >thsw | mesh_c4.position.x < - thsw ) {mvx4 = mvx4 * -1};
    mesh_c4.position.y -=  mvy4;
    if (mesh_c4.position.y > thsh | mesh_c4.position.y < - thsh ) {mvy4 = mvy4 * -1};
    mesh_c5.position.x +=  mvx5;
    if (mesh_c5.position.x >thsw | mesh_c5.position.x < - thsw ) {mvx5 = mvx5 * -1};
    mesh_c5.position.y +=  mvy5;
    if (mesh_c5.position.y > thsh | mesh_c5.position.y < - thsh ) {mvy5 = mvy5 * -1};
    mesh_c6.position.x +=  mvx6;
    if (mesh_c6.position.x >thsw | mesh_c6.position.x < - thsw ) {mvx6 = mvx6 * -1};
    mesh_c6.position.y -=  mvy6;
    if (mesh_c6.position.y > thsh | mesh_c6.position.y < - thsh ) {mvy6 = mvy6 * -1};
    mesh_c7.position.x -=  mvx7;
    if (mesh_c7.position.x >thsw | mesh_c7.position.x < - thsw ) {mvx7 = mvx7 * -1};
    mesh_c7.position.y +=  mvy7;
    if (mesh_c7.position.y > thsh | mesh_c7.position.y < - thsh ) {mvy7 = mvy7 * -1};
    mesh_c8.position.x -=  mvx8;
    if (mesh_c8.position.x >thsw | mesh_c8.position.x < - thsw ) {mvx8 = mvx8 * -1};
    mesh_c8.position.y -=  mvy8;
    if (mesh_c8.position.y > thsh | mesh_c8.position.y < - thsh ) {mvy8 = mvy8 * -1};
    mesh_c9.position.x +=  mvx9;
    if (mesh_c9.position.x >thsw | mesh_c9.position.x < - thsw ) {mvx9 = mvx9 * -1};
    mesh_c9.position.y +=  mvy9;
    if (mesh_c9.position.y > thsh | mesh_c9.position.y < - thsh ) {mvy9 = mvy9 * -1};
    mesh_c10.position.x +=  mvx10;
    if (mesh_c10.position.x >thsw | mesh_c10.position.x < - thsw ) {mvx10 = mvx10 * -1};
    mesh_c10.position.y -=  mvy10;
    if (mesh_c10.position.y > thsh | mesh_c10.position.y < - thsh ) {mvy10 = mvy10 * -1};
    mesh_c11.position.x -=  mvx11;
    if (mesh_c11.position.x >thsw | mesh_c11.position.x < - thsw ) {mvx11 = mvx11 * -1};
    mesh_c11.position.y +=  mvy11;
    if (mesh_c11.position.y > thsh | mesh_c11.position.y < - thsh ) {mvy11 = mvy11 * -1};
    mesh_c12.position.x -=  mvx12;
    if (mesh_c12.position.x >thsw | mesh_c12.position.x < - thsw ) {mvx12 = mvx12 * -1};
    mesh_c12.position.y -=  mvy12;
    if (mesh_c12.position.y > thsh | mesh_c12.position.y < - thsh ) {mvy12 = mvy12 * -1};
    mesh_c13.position.x +=  mvx13 ;
    if (mesh_c13.position.x >thsw | mesh_c13.position.x < - thsw ) {mvx13 = mvx13 * -1};
    mesh_c13.position.y -=  mvy13 ;
    if (mesh_c13.position.y > thsh | mesh_c13.position.y < - thsh ) {mvy13 = mvy13 * -1};
    mesh_c14.position.x -=  mvx14;
    if (mesh_c14.position.x >thsw | mesh_c14.position.x < - thsw ) {mvx14 = mvx14 * -1};
    mesh_c14.position.y -=  mvy14;
    if (mesh_c14.position.y > thsh | mesh_c14.position.y < - thsh ) {mvy14 = mvy14 * -1};
    mesh_c15.position.x +=  mvx15;
    if (mesh_c15.position.x >thsw | mesh_c15.position.x < - thsw ) {mvx15 = mvx15 * -1};
    mesh_c15.position.y +=  mvy15;
    if (mesh_c15.position.y > thsh | mesh_c15.position.y < - thsh ) {mvy15 = mvy15 * -1};
    mesh_c16.position.x +=  mvx16;
    if (mesh_c16.position.x >thsw | mesh_c16.position.x < - thsw ) {mvx16 = mvx16 * -1};
    mesh_c16.position.y -=  mvy16;
    if (mesh_c16.position.y > thsh | mesh_c16.position.y < - thsh ) {mvy16 = mvy16 * -1};
    mesh_c17.position.x -=  mvx17;
    if (mesh_c17.position.x >thsw | mesh_c17.position.x < - thsw ) {mvx17 = mvx17 * -1};
    mesh_c17.position.y +=  mvy17;
    if (mesh_c17.position.y > thsh | mesh_c17.position.y < - thsh ) {mvy17 = mvy17 * -1};
    mesh_c18.position.x -=  mvx18;
    if (mesh_c18.position.x >thsw | mesh_c18.position.x < - thsw ) {mvx18 = mvx18 * -1};
    mesh_c18.position.y -=  mvy18;
    if (mesh_c18.position.y > thsh | mesh_c18.position.y < - thsh ) {mvy18 = mvy18 * -1};
    mesh_c19.position.x +=  mvx19;
    if (mesh_c19.position.x >thsw | mesh_c19.position.x < - thsw ) {mvx19 = mvx19 * -1};
    mesh_c19.position.y +=  mvy19;
    if (mesh_c19.position.y > thsh | mesh_c19.position.y < - thsh ) {mvy19 = mvy19 * -1};
    mesh_c20.position.x +=  mvx20;
    if (mesh_c20.position.x >thsw | mesh_c20.position.x < - thsw ) {mvx20 = mvx20 * -1};
    mesh_c20.position.y -=  mvy20;
    if (mesh_c20.position.y > thsh | mesh_c20.position.y < - thsh ) {mvy20 = mvy20 * -1};
    mesh_c21.position.x -=  mvx21;
    if (mesh_c21.position.x >thsw | mesh_c21.position.x < - thsw ) {mvx21 = mvx21 * -1};
    mesh_c21.position.y +=  mvy21;
    if (mesh_c21.position.y > thsh | mesh_c21.position.y < - thsh ) {mvy21 = mvy21 * -1};
    mesh_c22.position.x -=  mvx22;
    if (mesh_c22.position.x >thsw | mesh_c22.position.x < - thsw ) {mvx22 = mvx22 * -1};
    mesh_c22.position.y -=  mvy22;
    if (mesh_c22.position.y > thsh | mesh_c22.position.y < - thsh ) {mvy22 = mvy22 * -1};
    mesh_c23.position.x +=  mvx23 ;
    if (mesh_c23.position.x >thsw | mesh_c23.position.x < - thsw ) {mvx23 = mvx23 * -1};
    mesh_c23.position.y -=  mvy23 ;
    if (mesh_c23.position.y > thsh | mesh_c23.position.y < - thsh ) {mvy23 = mvy23 * -1};
    mesh_c24.position.x -=  mvx24;
    if (mesh_c24.position.x >thsw | mesh_c24.position.x < - thsw ) {mvx24 = mvx24 * -1};
    mesh_c24.position.y -=  mvy24;
    if (mesh_c24.position.y > thsh | mesh_c24.position.y < - thsh ) {mvy24 = mvy24 * -1};
    mesh_c25.position.x +=  mvx25;
    if (mesh_c25.position.x >thsw | mesh_c25.position.x < - thsw ) {mvx25 = mvx25 * -1};
    mesh_c25.position.y +=  mvy25;
    if (mesh_c25.position.y > thsh | mesh_c25.position.y < - thsh ) {mvy25 = mvy25 * -1};
    mesh_c26.position.x +=  mvx26;
    if (mesh_c26.position.x >thsw | mesh_c26.position.x < - thsw ) {mvx26 = mvx26 * -1};
    mesh_c26.position.y -=  mvy26;
    if (mesh_c26.position.y > thsh | mesh_c26.position.y < - thsh ) {mvy26 = mvy26 * -1};
    mesh_c27.position.x -=  mvx27;
    if (mesh_c27.position.x >thsw | mesh_c27.position.x < - thsw ) {mvx27 = mvx27 * -1};
    mesh_c27.position.y +=  mvy27;
    if (mesh_c27.position.y > thsh | mesh_c27.position.y < - thsh ) {mvy27 = mvy27 * -1};
    mesh_c28.position.x -=  mvx28;
    if (mesh_c28.position.x >thsw | mesh_c28.position.x < - thsw ) {mvx28 = mvx28 * -1};
    mesh_c28.position.y -=  mvy28;
    if (mesh_c28.position.y > thsh | mesh_c28.position.y < - thsh ) {mvy28 = mvy28 * -1};
    mesh_c29.position.x +=  mvx29;
    if (mesh_c29.position.x >thsw | mesh_c29.position.x < - thsw ) {mvx29 = mvx29 * -1};
    mesh_c29.position.y +=  mvy29;
    if (mesh_c29.position.y > thsh | mesh_c29.position.y < - thsh ) {mvy29 = mvy29 * -1};
    mesh_c30.position.x +=  mvx30;
    if (mesh_c30.position.x >thsw | mesh_c30.position.x < - thsw ) {mvx30 = mvx30 * -1};
    mesh_c30.position.y -=  mvy30;
    if (mesh_c30.position.y > thsh | mesh_c30.position.y < - thsh ) {mvy30 = mvy30 * -1};

  }; // function end


⑨mouse処理


    // ------------------  mouse handling -----------------------------
    // マウスを動かしたとき
    function handleMouseClick(e) {
      if ( endflag == 0 && mode != "m" ) { return ; }
      // マウス位置を取得
      // 0~画面サイズの値を、-1~1の値に変換。
      mouseX = (e.offsetX - (window.innerWidth / 2)) / window.innerWidth * 2;
      mouseY = (-e.offsetY + (window.innerHeight / 2)) / window.innerHeight * 2;

      // マウスの位置ベクトル
      var pos = new THREE.Vector3(mouseX, mouseY, 1);
      // pos はスクリーン座標系なので、オブジェクトの座標系に変換
      pos.unproject(camera);
      // 始点、向きベクトルを渡してレイを作成
      // Raycastとは、ある場所から透明な光線ベクトルを放ち、光線に当たったオブジェクトの情報を得る機能のことです。
      // .sub():ベクトルの引き算
      // .normalize():単位ベクトル作成。
      var ray = new THREE.Raycaster(camera.position, pos.sub(camera.position).normalize());
      // 交差判定
      // 引数は取得対象となるMeshの配列を渡す。
      objs = ray.intersectObjects(msl , true );           //  mesh arrayをターゲット
      setinit();
      render() ;
      function render() {
        requestAnimationFrame(render);
        if (objs.length > 0) {
          // clickしたオブジェクトを配列で得る。
          objs[0].object.position.set(0,0,cpz)
          for ( i = 1; i <= msl.length; i++) {
            if (objs[0].object.uuid == msl[i].uuid) { break ;}  // image textを表示するため uuidを比較して hitしたmeshを得る
          };
          msgtxt =  img[i].split("%",2)   // image text  表示
          document.getElementById("msgtxt3").innerHTML = msgtxt[1] ;   
        };
      };
      renderer.render(scene, camera);

    };


⑩リサイズした時の再設定


   // -------------------- initialize on resize
    onResize();
    window.addEventListener('resize', onResize);
    function onResize() {
      width  = window.innerWidth; // 画面横フルサイズ
      height = window.innerHeight; // 画面縦フルサイズ
      renderer.setPixelRatio(window.devicePixelRatio);
      renderer.setSize(width, height);
      camera.aspect = width / height ;
      camera.updateProjectionMatrix();
    };


番外・コーデングの効率化



# ----------- html out ---------------------------------- 
# input : img_file  -- image file folder 
# output : out.txt -- javascript text 
# --------------------------------------------------------
import os
import datetime
dt_now = datetime.datetime.now()
dt = dt_now.strftime('%Y-%m-%d %H:%M:%S')
dt_ymd = dt_now.strftime('%Y%m%d')
print (dt)
# --- input file 
in_folder = 'img_file'
# --- output file 
out_folder = 'out.txt'
# --- java tag 

#--- img folder out path
i_file = 'img2021'
# --- read directry 
files = os.listdir(in_folder)
# print(files)        

# --- write 
with open(out_folder, mode='w') as f_w:
       f_w.write('// ' + dt)
       i = 0
       for i_name in files:
             wline =  '\n' + '       ' + 'img[' + str(i) +  '] = ' + '\'' + i_file + '/' + i_name + '%2021/00/00        薬師池公園' + '\';' 
             f_w.write(wline)
             i += 1 
             print(wline)


// 結果
       img[0] = 'img2021/P1063380.jpg%2021/01/06 トモエガモ  薬師池公園';
       img[1] = 'img2021/P1130090.jpg%2021/01/13 結氷の朝    薬師池公園';
       img[2] = 'img2021/P1292587.jpg%2021/01/29 キセキレイ 薬師池公園';
       img[3] = 'img2021/P1312708.jpg%2021/01/31 エナガ 薬師池公園';
       img[4] = 'img2021/P2184347.jpg%2021/02/18   シジュウカラ 薬師池公園';
       ..............................