2021/10/10
3D floating photos
Three.jsというJavaScriptプログラムを使うと3Dが使えることを知って、検索すると、three.jsは、ウェブブラウザ上でリアルタイムレンダリングによる3次元コンピュータグラフィックスを描画する、クロスブラウザ対応の軽量なJavaScriptライブラリおよびAPIである。 HTML5のcanvas要素、Scalable Vector Graphics、WebGLとの組み合わせが可能である。ソースコードはGitHubでホストされている。 (Wikipedia)という。
3Dといっても実際はパソコンの画面なので画像などに影を付けたり回転させたりして立体に見せるということ。
3D画像を表示する方法を色々試し多数の写真を動かして全体として調和するようにもしてみたが、原点に戻って写真一枚一枚を丁寧に表示することもしたいと思っていた。
写真をサムネイル風に数十個を並べて表示し、そこから順次一枚ずつ大きく表示することは前から考えていて、Three.jsの使い方を色々学んで今回実現できた。
画像の表示と並んで音楽も重要な役割をする。これまでは画像表示数に合った長さの音楽を選んだが、今回はweb audio apiを使い、複数の音楽を繰り返すことで長さの制限を考えなくてもよいようにした。
- 要件
画像の表示時間を短いものと長いものと2種類のボタンを用意する。
audioを複数準備
64個のサムネイル画像を最初に表示し順次カメラ方向に動かす
3種類のライト
写真毎のコメントを上部に表示する
実際のサンプルコードを記述しておく
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</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="select_box">
<span id="btn_g">
<input type="button" value="Manual" onclick="clickBtng()"/>
</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="Start (fast)" onclick="clickBtn1(this.id,this.value)">
</span>
<span id="btn_m2">
<input type="button" id="music/Johann-Strauss-2-The-Blue-Danube.mp3%music/Johann-Strauss2-Fruhlingsstimmen.mp3%music/Beethoven-MoonlightSonata-1.mp3" value="Start (slow)" onclick="clickBtn1(this.id,this.value)">
</span>
<span id="msgtxt1"> </span> <!-- timer -->
<span id="msgtxt3"></span> <!-- img text -->
<br>
<span id="msgtxt2"></span> <!-- manual -->
</div>
<div id="canvas_container">
<!-- 3D -->
<canvas id="canvas3d"></canvas>
</div>
<div id="modoru">
<a href="#" onClick="history.back(); return false;">戻る</a>
</div>
</div>
<br>
<!-- three.jsを読み込む-->
<script src="js/three.js"></script>
<script src="js/OrbitControls.js"></script>
<script src="js/fphotos.js"></script>
</body>
</html>
-
キャンバスidはcanvas3d
clickBtng()
ガイドを表示する
fastとslowの2種類のボタンを用意する clickBtn1(this.id,this.value)音楽名とボタン名を渡す
three.jsのバージョンは 132 OrbitControls.jsマウス操作でカメラを制御する。今回はjsではコメントアウトにしている
3d.css
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:100%;
background-color:black;
margin:0;
}
#root {
width:100%;
margin:0px auto;
}
#select_box {
width:98%;
margin:2px auto 0px 10px;
padding:0px;
text-align:left;
}
#select_box input {
border:0px solid red;
background-color: transparent;
color:ivory;
padding:0px;
}
#btn_g , #btn_m1 , #btn_m2 {
border:1px ridge white;
border-radius:5px;
margin:0px 2px ;
padding:0px;
font-size:0.8rem;
}
#canvas_container {
width:100%;
margin:auto ;
}
#canvas3d {
width:100%;
height: calc(99vw / 2.1 );
margin:0px auto ;
padding:0px;
}
#canvasaudio {
width:80%;
}
form select {
color:black;
}
form option value {
background-color:green;
}
#msgtxt1 , #msgtxt2 , #msgtxt3 {
color : ivory ;
font-size:1.0rem;
}
#msgtxt1 { /* timer */
margin: 0px 10px;
}
#msgtxt3 { /* img text */
border:2px ridge silver;
border-radius:5px;
margin:0px 2px;
padding:0px 2px;
font-size:1.2rem;
}
/* modoru */
#modoru {
width:5%;
margin:0px auto 10px 10px;
float:left;
text-align:center;
font-size:1.0rem;
padding:2px;
}
#modoru a:link , #modoru a:visited {
display:block;
text-decoration:none;
border:1px ridge gray;
border-radius:5px;
color:gray;
}
#modoru a:hover {
display:block;
text-decoration:none;
border:1px ridge ivory;
border-radius:5px;
color:white;
}
/*------------------ mobile responsive -----------------------------*/
@media screen and (max-width: 480px) {
#msgtxt1 , #msgtxt2 , #msgtxt3 {
font-size:0.8rem;
}
#canvas3d {
width:100%;
height:60vw ;
}
#modoru {
width:10%;
}
}
/* --------------------------------------------------------------------*/
-
@media screen and (max-width: 480px) { .....}
モバイル用表示の定義(responsible )
fphotos.js(全体)
// ----------------------- float photos ---- 2021/09/30 -----------------------
// 3D photo album : Three.js JavaScript libraries
//
// --------------------------------------------------------------------------------
// --------------------------------------------------------------------------------
// manual button click
// -------------------------------------------------------------------------------
function clickBtng(){
gtxt1 = " ・画像切り替わりの早い/遅いにより「Start(fast)」または 「Start(slow)」を押して開始して下さい"
gtxt2 = " ・古いブラウザやスマホでは正常に稼働しないことがあります"
gtxt3 = " ・続けて2回目以降を開始するにはブラウザの更新ボタンを押してからにしてください"
gtxt4 = " ・このメッセージを消すにはもう一度「Manual」を押してください"
gtxt = gtxt1 + '
' + gtxt2 + '
' + gtxt3 + '
' + gtxt4 ;
str0 = document.getElementById("msgtxt2").innerHTML
if ( str0 === "" ) {str = gtxt}
else {str = "" };
document.getElementById("msgtxt2").innerHTML = str ;
};
// ---------------------------------------------------------------------------
// initialize start
// ---------------------------------------------------------------------------
function clickBtn1(id , value){
width = canvas3d.clientWidth;
height = canvas3d.clientHeight;
document.getElementById("btn_m1").style.backgroundColor = "gray"; // reset background of button
document.getElementById("btn_m2").style.backgroundColor = "gray";
// ---------------------- global const
let resp = 0 ;
if (width <= 480) { resp = 1 } // smart phone
let spd = "fast" // speed defult
if (value.match("fast")) { spd = "f" , document.getElementById("btn_m1").style.backgroundColor = "orange";} // speed fast
if (value.match("slow")) { spd = "s" , document.getElementById("btn_m2").style.backgroundColor = "orange";} // speed slow
let sst = 0
let sst0 = 0
const imgw = 1500 // image width
const imgh = 846 // image height
const imgd = 0 // image depth
const cpx = 0 ; // center position x
const cpy = 0 ; // center position y
let cpz = imgw * 6.4 ; // center position z
if (resp == 1 ) {cpz = imgw * 5.8 };
let im = 1 ; // list number of mesh image
let cpzi = 0 ;
let tsls = 10 ; // speed default
if (spd == "f") { tsls = 10 } // image change time fast
if (spd == "s") { tsls = 20 } // image change time slow
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
// ---------------------------------------------------------------------------
// read music names from html and put in list
// ---------------------------------------------------------------------------
playlist = id.split("%", 8); // take music
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)
}
else {
audiosrc = playlist[0]
playSound(audiosrc)
mindex = 0;
}
};
// ---------------------------------------------------------------------------
// web audio api define
// XMLHttpRequest() : Asynchronous JavaScript + XM
// AudioContext() : audio-processing
// decodeAudioData(): decode audio data asynchronously
// ---------------------------------------------------------------------------
var request , source , stopflag , closeflag = 0;
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 (resp == 1) { source.loop = true}
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 list
// ---------------------------------------------------------------------------
readimg();
// ---------------------------------------------------------------------------
// Three define
// renderer : 規定の書式に従ってデータや画像を表示させるためのプログラム
// ---------------------------------------------------------------------------
const canvasElement = document.querySelector('#canvas3d') // get canvas
const renderer = new THREE.WebGLRenderer({ canvas: canvasElement , alpha:true}); // renderer
renderer.setSize(width, height);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.shadowMap.enabled = true;
const scene = new THREE.Scene(); // make scene
// var axes = new THREE.AxisHelper(2500);
// scene.add(axes);
const container1 = new THREE.Object3D(); // container define
scene.add(container1);
const container2 = new THREE.Object3D();
scene.add(container2);
// ---------------------------------------------------------------------------
// camera define
// ---------------------------------------------------------------------------
let cposz = imgw * 7.3 ; // カメラz軸の範囲
if ( resp == 1 ) {cposz = imgw * 6.6 }
camera = new THREE.PerspectiveCamera( 45 , width / height , 1 , cposz*10 ); // 視野角, アスペクト比, near, far
camera.position.set(0,0, cposz);
camera.lookAt(new THREE.Vector3(0, 0, 0)); // center direction
scene.add(camera);
// const controls = new THREE.OrbitControls(camera, renderer.domElement); // camera controler
// ---------------------------------------------------------------------------
// light define
// ---------------------------------------------------------------------------
// ambientLight = new THREE.AmbientLight(0xffffff , 1.0 ); // 環境光
// scene.add(ambientLight);
// 平行光源を作成
const dcolor1 = 0xffffff ;
const directionalLight1 = new THREE.DirectionalLight(dcolor1 , 1 );
directionalLight1.position.set(0 , 0 , - 1 );
scene.add(directionalLight1);
const dcolor2 = 0xff0000 ;
const directionalLight2 = new THREE.DirectionalLight(dcolor2 , 0.5 );
directionalLight2.position.set( 1 , 0 , 0 );
scene.add(directionalLight2);
const dcolor3 = 0x0000ff ;
const directionalLight3 = new THREE.DirectionalLight(dcolor3 , 0.5 );
directionalLight3.position.set( -1 , 0 , 0 );
scene.add(directionalLight3);
// ------------ 3d 要素 ----------------
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 geometry33 = new THREE.BoxGeometry(imgw,imgh,imgd);
const geometry34 = new THREE.BoxGeometry(imgw,imgh,imgd);
const geometry35 = new THREE.BoxGeometry(imgw,imgh,imgd);
const geometry36 = new THREE.BoxGeometry(imgw,imgh,imgd);
const geometry37 = new THREE.BoxGeometry(imgw,imgh,imgd);
const geometry38 = new THREE.BoxGeometry(imgw,imgh,imgd);
const geometry39 = new THREE.BoxGeometry(imgw,imgh,imgd);
const geometry40 = new THREE.BoxGeometry(imgw,imgh,imgd);
const geometry41 = new THREE.BoxGeometry(imgw,imgh,imgd);
const geometry42 = new THREE.BoxGeometry(imgw,imgh,imgd);
const geometry43 = new THREE.BoxGeometry(imgw,imgh,imgd);
const geometry44 = new THREE.BoxGeometry(imgw,imgh,imgd);
const geometry45 = new THREE.BoxGeometry(imgw,imgh,imgd);
const geometry46 = new THREE.BoxGeometry(imgw,imgh,imgd);
const geometry47 = new THREE.BoxGeometry(imgw,imgh,imgd);
const geometry48 = new THREE.BoxGeometry(imgw,imgh,imgd);
const geometry49 = new THREE.BoxGeometry(imgw,imgh,imgd);
const geometry50 = new THREE.BoxGeometry(imgw,imgh,imgd);
const geometry51 = new THREE.BoxGeometry(imgw,imgh,imgd);
const geometry52 = new THREE.BoxGeometry(imgw,imgh,imgd);
const geometry53 = new THREE.BoxGeometry(imgw,imgh,imgd);
const geometry54 = new THREE.BoxGeometry(imgw,imgh,imgd);
const geometry55 = new THREE.BoxGeometry(imgw,imgh,imgd);
const geometry56 = new THREE.BoxGeometry(imgw,imgh,imgd);
const geometry57 = new THREE.BoxGeometry(imgw,imgh,imgd);
const geometry58 = new THREE.BoxGeometry(imgw,imgh,imgd);
const geometry59 = new THREE.BoxGeometry(imgw,imgh,imgd);
const geometry60 = new THREE.BoxGeometry(imgw,imgh,imgd);
const geometry61 = new THREE.BoxGeometry(imgw,imgh,imgd);
const geometry62 = new THREE.BoxGeometry(imgw,imgh,imgd);
const geometry63 = new THREE.BoxGeometry(imgw,imgh,imgd);
const geometry64 = 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 texture33 = loader_b.load( img[33].substring(0,img[33].indexOf("%")) );
const texture34 = loader_b.load( img[34].substring(0,img[34].indexOf("%")) );
const texture35 = loader_b.load( img[35].substring(0,img[35].indexOf("%")) );
const texture36 = loader_b.load( img[36].substring(0,img[36].indexOf("%")) );
const texture37 = loader_b.load( img[37].substring(0,img[37].indexOf("%")) );
const texture38 = loader_b.load( img[38].substring(0,img[38].indexOf("%")) );
const texture39 = loader_b.load( img[39].substring(0,img[39].indexOf("%")) );
const texture40 = loader_b.load( img[40].substring(0,img[40].indexOf("%")) );
const texture41 = loader_b.load( img[41].substring(0,img[41].indexOf("%")) );
const texture42 = loader_b.load( img[42].substring(0,img[42].indexOf("%")) );
const texture43 = loader_b.load( img[43].substring(0,img[43].indexOf("%")) );
const texture44 = loader_b.load( img[44].substring(0,img[44].indexOf("%")) );
const texture45 = loader_b.load( img[45].substring(0,img[46].indexOf("%")) );
const texture46 = loader_b.load( img[46].substring(0,img[46].indexOf("%")) );
const texture47 = loader_b.load( img[47].substring(0,img[47].indexOf("%")) );
const texture48 = loader_b.load( img[48].substring(0,img[48].indexOf("%")) );
const texture49 = loader_b.load( img[49].substring(0,img[49].indexOf("%")) );
const texture50 = loader_b.load( img[50].substring(0,img[50].indexOf("%")) );
const texture51 = loader_b.load( img[51].substring(0,img[51].indexOf("%")) );
const texture52 = loader_b.load( img[52].substring(0,img[52].indexOf("%")) );
const texture53 = loader_b.load( img[53].substring(0,img[53].indexOf("%")) );
const texture54 = loader_b.load( img[54].substring(0,img[54].indexOf("%")) );
const texture55 = loader_b.load( img[55].substring(0,img[55].indexOf("%")) );
const texture56 = loader_b.load( img[56].substring(0,img[56].indexOf("%")) );
const texture57 = loader_b.load( img[57].substring(0,img[57].indexOf("%")) );
const texture58 = loader_b.load( img[58].substring(0,img[58].indexOf("%")) );
const texture59 = loader_b.load( img[59].substring(0,img[59].indexOf("%")) );
const texture60 = loader_b.load( img[60].substring(0,img[60].indexOf("%")) );
const texture61 = loader_b.load( img[61].substring(0,img[61].indexOf("%")) );
const texture62 = loader_b.load( img[62].substring(0,img[62].indexOf("%")) );
const texture63 = loader_b.load( img[63].substring(0,img[63].indexOf("%")) );
const texture64 = loader_b.load( img[64].substring(0,img[64].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 material33 = new THREE.MeshPhongMaterial({ map: texture33 });
const material34 = new THREE.MeshPhongMaterial({ map: texture34 });
const material35 = new THREE.MeshPhongMaterial({ map: texture35 });
const material36 = new THREE.MeshPhongMaterial({ map: texture36 });
const material37 = new THREE.MeshPhongMaterial({ map: texture37 });
const material38 = new THREE.MeshPhongMaterial({ map: texture38 });
const material39 = new THREE.MeshPhongMaterial({ map: texture39 });
const material40 = new THREE.MeshPhongMaterial({ map: texture40 });
const material41 = new THREE.MeshPhongMaterial({ map: texture41 });
const material42 = new THREE.MeshPhongMaterial({ map: texture42 });
const material43 = new THREE.MeshPhongMaterial({ map: texture43 });
const material44 = new THREE.MeshPhongMaterial({ map: texture44 });
const material45 = new THREE.MeshPhongMaterial({ map: texture45 });
const material46 = new THREE.MeshPhongMaterial({ map: texture46 });
const material47 = new THREE.MeshPhongMaterial({ map: texture47 });
const material48 = new THREE.MeshPhongMaterial({ map: texture48 });
const material49 = new THREE.MeshPhongMaterial({ map: texture49 });
const material50 = new THREE.MeshPhongMaterial({ map: texture50 });
const material51 = new THREE.MeshPhongMaterial({ map: texture51 });
const material52 = new THREE.MeshPhongMaterial({ map: texture52 });
const material53 = new THREE.MeshPhongMaterial({ map: texture53 });
const material54 = new THREE.MeshPhongMaterial({ map: texture54 });
const material55 = new THREE.MeshPhongMaterial({ map: texture55 });
const material56 = new THREE.MeshPhongMaterial({ map: texture56 });
const material57 = new THREE.MeshPhongMaterial({ map: texture57 });
const material58 = new THREE.MeshPhongMaterial({ map: texture58 });
const material59 = new THREE.MeshPhongMaterial({ map: texture59 });
const material60 = new THREE.MeshPhongMaterial({ map: texture60 });
const material61 = new THREE.MeshPhongMaterial({ map: texture61 });
const material62 = new THREE.MeshPhongMaterial({ map: texture62 });
const material63 = new THREE.MeshPhongMaterial({ map: texture63 });
const material64 = new THREE.MeshPhongMaterial({ map: texture64 });
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);
const mesh33 = new THREE.Mesh(geometry33, material33);
const mesh34 = new THREE.Mesh(geometry34, material34);
const mesh35 = new THREE.Mesh(geometry35, material35);
const mesh36 = new THREE.Mesh(geometry36, material36);
const mesh37 = new THREE.Mesh(geometry37, material37);
const mesh38 = new THREE.Mesh(geometry38, material38);
const mesh39 = new THREE.Mesh(geometry39, material39);
const mesh40 = new THREE.Mesh(geometry40, material40);
const mesh41 = new THREE.Mesh(geometry41, material41);
const mesh42 = new THREE.Mesh(geometry42, material42);
const mesh43 = new THREE.Mesh(geometry43, material43);
const mesh44 = new THREE.Mesh(geometry44, material44);
const mesh45 = new THREE.Mesh(geometry45, material45);
const mesh46 = new THREE.Mesh(geometry46, material46);
const mesh47 = new THREE.Mesh(geometry47, material47);
const mesh48 = new THREE.Mesh(geometry48, material48);
const mesh49 = new THREE.Mesh(geometry49, material49);
const mesh50 = new THREE.Mesh(geometry50, material50);
const mesh51 = new THREE.Mesh(geometry51, material51);
const mesh52 = new THREE.Mesh(geometry52, material52);
const mesh53 = new THREE.Mesh(geometry53, material53);
const mesh54 = new THREE.Mesh(geometry54, material54);
const mesh55 = new THREE.Mesh(geometry55, material55);
const mesh56 = new THREE.Mesh(geometry56, material56);
const mesh57 = new THREE.Mesh(geometry57, material57);
const mesh58 = new THREE.Mesh(geometry58, material58);
const mesh59 = new THREE.Mesh(geometry59, material59);
const mesh60 = new THREE.Mesh(geometry60, material60);
const mesh61 = new THREE.Mesh(geometry61, material61);
const mesh62 = new THREE.Mesh(geometry62, material62);
const mesh63 = new THREE.Mesh(geometry63, material63);
const mesh64 = new THREE.Mesh(geometry64, material64);
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,mesh33,mesh34,mesh35,mesh36,mesh37,mesh38,mesh39,mesh40,
mesh41,mesh42,mesh43,mesh44,mesh45,mesh46,mesh47,mesh48,mesh49,mesh50,
mesh51,mesh52,mesh53,mesh54,mesh55,mesh56,mesh57,mesh58,mesh59,mesh60,
mesh61,mesh62,mesh63,mesh64
);
// ---------------------------------------------------------------------------
// set initial position
// ---------------------------------------------------------------------------
setinit(); // 初期位置
listmesh(); // mesh を配列にいれる
backcircle() // ----------------- background circle define
// ---------------------------------------------------------------------------
// start animation
// ---------------------------------------------------------------------------
const s1 = 5 ; // end of animation stag1
const s2 = 520 ; // end of animation stag2
const s3 = s1 + tsls * 65 ; // end of animation stag3
tick();
// ---------------------------------------------------------------------------
// Tick the time
// ---------------------------------------------------------------------------
function tick() {
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) // 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.98
};
if (cpzi <= cpz && csw ==1 ) { // moving z
if (spd == "f") {cpzi += 25.0 }
if (spd == "s") {cpzi += 17.0 }
msl[im].position.set ( cpxi , cpyi , cpzi )
msl[im].rotation.y += Math.PI / 4 * 0.02 // rotation y
// msl[im].rotation.z += 0.01 // rotation y
}
else if ( cpzi >= cpz && csw ==1 ) {
msl[im].rotation.set ( 0 , 0 , 0 ) // stop rotation
msl[im].position.set ( cpx , cpy , cpzi ) // stop moving
im += 1 // set nex image
csw = 0 // next image sw
};
};
if (sst >= s3 - 5 ) {
playVolumnDown()
};
if (sst > s3 && endflag ===0 ) { // ending process
endflag = 1
endproc() // end proc
};
renderer.render(scene, camera); // レンダリング
if ( endflag == 0 ) {
tickreq = requestAnimationFrame(tick);
};
}; // tick end
// ---------------------------------------------------------------------------
// text define
// ---------------------------------------------------------------------------
function settext(text) {
if (tmsh == 1){scene.remove(textMesh1)}
const loaders = new THREE.TextureLoader();
loadert = new THREE.FontLoader();
loadert.load('fonts/optimer_regular.typeface.json', function(font){
textGeometry1 = new THREE.TextGeometry(text , {
font: font,
size: 200
});
textMaterial1 = new THREE.MeshPhongMaterial({ color: 0xffffff});
textMesh1 = new THREE.Mesh(textGeometry1, textMaterial1);
scene.add(textMesh1);
textGeometry1.center(); // text on center position set
textMesh1.position.y = - 4000 ;
tmsh = 1 ;
});
};
// ---------------------------------------------------------------------------
// end process
// ---------------------------------------------------------------------------
function endproc() {
document.getElementById("msgtxt1").innerHTML = "end ...";
document.getElementById("msgtxt3").innerHTML = "2回目以降はブラウザを更新してください。" ;
cancelAnimationFrame(tickreq) ;
setinit();
source.stop(3); // stop after 3 seconds
closeAudioContext() // release resource
removeobj()
};
// ---------------------------------------------------------------------------
// initial position set
// ---------------------------------------------------------------------------
function setinit() {
const xwd = 1500 ; // image width
const yht = 845 ; // image height
xpos = - xwd * 8 / 2 + xwd / 2 ; // initial position
ypos = yht * 8 / 2 - yht /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) ;
xpos = - xwd * 8 / 2 + xwd / 2 ;
ypos = ypos - yht , mesh33.position.set(xpos,ypos,0) ;
xpos = xpos + xwd , mesh34.position.set(xpos,ypos,0) ;
xpos = xpos + xwd , mesh35.position.set(xpos,ypos,0) ;
xpos = xpos + xwd , mesh36.position.set(xpos,ypos,0) ;
xpos = xpos + xwd , mesh37.position.set(xpos,ypos,0) ;
xpos = xpos + xwd , mesh38.position.set(xpos,ypos,0) ;
xpos = xpos + xwd , mesh39.position.set(xpos,ypos,0) ;
xpos = xpos + xwd , mesh40.position.set(xpos,ypos,0) ;
xpos = - xwd * 8 / 2 + xwd / 2 ;
ypos = ypos - yht , mesh41.position.set(xpos,ypos,0) ;
xpos = xpos + xwd , mesh42.position.set(xpos,ypos,0) ;
xpos = xpos + xwd , mesh43.position.set(xpos,ypos,0) ;
xpos = xpos + xwd , mesh44.position.set(xpos,ypos,0) ;
xpos = xpos + xwd , mesh45.position.set(xpos,ypos,0) ;
xpos = xpos + xwd , mesh46.position.set(xpos,ypos,0) ;
xpos = xpos + xwd , mesh47.position.set(xpos,ypos,0) ;
xpos = xpos + xwd , mesh48.position.set(xpos,ypos,0) ;
xpos = xpos + xwd ;
xpos = - xwd * 8 / 2 + xwd / 2 ;
ypos = ypos - yht , mesh49.position.set(xpos,ypos,0) ;
xpos = xpos + xwd , mesh50.position.set(xpos,ypos,0) ;
xpos = xpos + xwd , mesh51.position.set(xpos,ypos,0) ;
xpos = xpos + xwd , mesh52.position.set(xpos,ypos,0) ;
xpos = xpos + xwd , mesh53.position.set(xpos,ypos,0) ;
xpos = xpos + xwd , mesh54.position.set(xpos,ypos,0) ;
xpos = xpos + xwd , mesh55.position.set(xpos,ypos,0) ;
xpos = xpos + xwd , mesh56.position.set(xpos,ypos,0) ;
xpos = - xwd * 8 / 2 + xwd / 2 ;
ypos = ypos - yht , mesh57.position.set(xpos,ypos,0) ;
xpos = xpos + xwd , mesh58.position.set(xpos,ypos,0) ;
xpos = xpos + xwd , mesh59.position.set(xpos,ypos,0) ;
xpos = xpos + xwd , mesh60.position.set(xpos,ypos,0) ;
xpos = xpos + xwd , mesh61.position.set(xpos,ypos,0) ;
xpos = xpos + xwd , mesh62.position.set(xpos,ypos,0) ;
xpos = xpos + xwd , mesh63.position.set(xpos,ypos,0) ;
xpos = xpos + xwd , mesh64.position.set(xpos,ypos,0) ;
container1.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);
container2.add(mesh33,mesh34,mesh35,mesh36,mesh37,mesh38,mesh39,mesh40,
mesh41,mesh42,mesh43,mesh44,mesh45,mesh46,mesh47,mesh48,mesh49,mesh50,
mesh51,mesh52,mesh53,mesh54,mesh55,mesh56,mesh57,mesh58,mesh59,mesh60,
mesh61,mesh62,mesh63,mesh64);
container1.rotation.set(0,0,0) , container2.rotation.set(0,0,0);
container1.position.set(0,0,0) , container2.position.set(0,0,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 花菖蒲 町田市薬師池公園';
img[33] = 'img2021/P6051301.jpg%2021/06/05 花摘み娘 町田市薬師池公園';
img[34] = 'img2021/P6051405.jpg%2021/06/05 アジサイ 町田市薬師池公園';
img[35] = 'img2021/P6072166.jpg%2021/06/07 ラベンダー・ミツバチ 町田市野津田公園ばら広場';
img[36] = 'img2021/P6072617.jpg%2021/06/07 ラベンダー 町田市野津田公園新ばら広場';
img[37] = 'img2021/P6123126.jpg%2021/06/12 ガクアジサイ 町田市薬師池公園';
img[38] = 'img2021/P6123312.jpg%2021/06/12 カワセミ(幼鳥) 町田市薬師池公園';
img[39] = 'img2021/P6123636.jpg%2021/06/12 カワセミファミリー 町田市薬師池公園';
img[40] = 'img2021/P6194708.jpg%2021/06/19 エナガ 町田市鶴見川河川敷';
img[41] = 'img2021/P6235097.jpg%2021/06/23 合歓の木 町田市薬師池公園';
img[42] = 'img2021/P6255614.jpg%2021/06/25 ホワイトレースフラワー 町田市野津田公園ばら広場';
img[43] = 'img2021/P6255644.jpg%2021/06/25 バーベナ バンプトン 町田市野津田公園ばら広場';
img[44] = 'img2021/P6295692.jpg%2021/06/29 ガビチョウ 町田市薬師池公園';
img[45] = 'img2021/P7076091.jpg%2021/07/07 町田ダリヤ園';
img[46] = 'img2021/P7076121.jpg%2021/07/07 町田ダリヤ園';
img[47] = 'img2021/P7106314.jpg%2021/07/10 町田市薬師池公園';
img[48] = 'img2021/P7110149.jpg%2021/07/11 カワセミ 町田市薬師池公園';
img[49] = 'img2021/P7140633.jpg%2021/07/14 カワセミ 町田市薬師池公園';
img[50] = 'img2021/P7150001.jpg%2021/07/15 大賀ハス 町田市薬師池公園';
img[51] = 'img2021/P7151297.jpg%2021/07/15 大賀ハス 町田市薬師池公園';
img[52] = 'img2021/P7211719.jpg%2021/07/21 カワセミ 町田市薬師池公園';
img[53] = 'img2021/P7241749.jpg%2021/07/24 ひまわり 町田市七国山';
img[54] = 'img2021/P7311920.jpg%2021/07/24 ブルービー(波瑠璃紋花蜂) 町田市薬師池公園';
img[55] = 'img2021/P8082163.jpg%2021/08/08 カワセミ・大賀ハス 町田市薬師池公園';
img[56] = 'img2021/P9013033.png%2021/09/01 カワセミ 町田市薬師池公園';
img[57] = 'img2021/P9053350.jpg%2021/09/03 カワセミ 町田市薬師池公園';
img[58] = 'img2021/P9153653.jpg%2021/09/15 そばの花 町田市七国山';
img[59] = 'img2021/P9153541.jpg%2021/09/15 町田市七国山';
img[60] = 'img2021/P9153724.jpg%2021/09/15 彼岸花 町田市薬師池公園';
img[61] = 'img2021/P9193931.jpg%2021/09/19 彼岸花 町田市薬師池公園';
img[62] = 'img2021/P9193942.jpg%2021/09/19 アカボシゴマダラ 町田市薬師池公園';
img[63] = 'img2021/P9244181.jpg%2021/09/24 カワセミ 町田市薬師池公園';
img[64] = 'img2021/PA060079.jpg%2021/10/06 金木犀(2度咲き) 町田市薬師池公園';
};
// ---------------------------------------------------------------------------
// mesh list define
// ---------------------------------------------------------------------------
function listmesh () {
msl = new Array();
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 , msl [33] = mesh33 , msl [34] = mesh34 , msl [35] = mesh35
msl [36] = mesh36 , msl [37] = mesh37 , msl [38] = mesh38 , msl [39] = mesh39 , msl [40] = mesh40
msl [41] = mesh41 , msl [42] = mesh42 , msl [43] = mesh43 , msl [44] = mesh44 , msl [45] = mesh45
msl [46] = mesh46 , msl [47] = mesh47 , msl [48] = mesh48 , msl [49] = mesh49 , msl [50] = mesh50
msl [51] = mesh51 , msl [52] = mesh52 , msl [53] = mesh53 , msl [54] = mesh54 , msl [55] = mesh55
msl [56] = mesh56 , msl [57] = mesh57 , msl [58] = mesh58 , msl [59] = mesh59 , msl [60] = mesh60
msl [61] = mesh61 , msl [62] = mesh62 , msl [63] = mesh63 , msl [64] = mesh64
};
// ---------------------------------------------------------------------------
// back circle define
// ---------------------------------------------------------------------------
function backcircle() {
if (resp == 1) { crads = 250 } // for smart phone radius
else { crads = 300 } ;
const opcc = 0.1 ; // opacity value
const ccolor1 = 0xdddddd ; // color1
const ccolor2 = 0xffffff ; // color2
const ccolor3 = 0x888888 ; // 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.1 ; // adjust speed
const bmc = 6 ;
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
// ---------------------------------------------------------------------------
// remove mesh , geometry , material , texture oblects
// ---------------------------------------------------------------------------
function removeobj() {
console.log("remove") ;
scene.remove(mesh1,mesh2,mesh3,mesh4,mesh5,mesh6,mesh7,mesh8,mesh9,mesh10);
scene.remove(mesh11,mesh12,mesh13,mesh14,mesh15,mesh16,mesh17,mesh18,mesh19,mesh20);
scene.remove(mesh21,mesh22,mesh23,mesh24,mesh25,mesh26,mesh27,mesh28,mesh29,mesh30);
scene.remove(mesh31,mesh32,mesh33,mesh34,mesh35,mesh36,mesh37,mesh38,mesh39,mesh40);
scene.remove(mesh41,mesh42,mesh43,mesh44,mesh45,mesh46,mesh47,mesh48,mesh49,mesh50);
scene.remove(mesh51,mesh52,mesh53,mesh54,mesh55,mesh56,mesh57,mesh58,mesh59,mesh60);
scene.remove(mesh61,mesh62,mesh63,mesh64);
geometry1.dispose() , material1.dispose() , geometry2.dispose() , material2.dispose() ;
geometry3.dispose() , material3.dispose() , geometry4.dispose() , material4.dispose() ;
geometry5.dispose() , material5.dispose() , geometry6.dispose() , material6.dispose() ;
geometry7.dispose() , material7.dispose() , geometry8.dispose() , material8.dispose() ;
geometry9.dispose() , material9.dispose() , geometry10.dispose() , material10.dispose() ;
geometry11.dispose() , material11.dispose() , geometry12.dispose() , material12.dispose() ;
geometry13.dispose() , material13.dispose() , geometry14.dispose() , material14.dispose() ;
geometry15.dispose() , material15.dispose() , geometry16.dispose() , material16.dispose() ;
geometry17.dispose() , material17.dispose() , geometry18.dispose() , material18.dispose() ;
geometry19.dispose() , material19.dispose() , geometry20.dispose() , material20.dispose() ;
geometry21.dispose() , material21.dispose() , geometry22.dispose() , material22.dispose() ;
geometry23.dispose() , material23.dispose() , geometry24.dispose() , material24.dispose() ;
geometry25.dispose() , material25.dispose() , geometry26.dispose() , material26.dispose() ;
geometry27.dispose() , material27.dispose() , geometry28.dispose() , material28.dispose() ;
geometry29.dispose() , material29.dispose() , geometry30.dispose() , material30.dispose() ;
geometry31.dispose() , material31.dispose() , geometry32.dispose() , material32.dispose() ;
geometry33.dispose() , material33.dispose() , geometry34.dispose() , material34.dispose() ;
geometry35.dispose() , material35.dispose() , geometry36.dispose() , material36.dispose() ;
geometry37.dispose() , material37.dispose() , geometry38.dispose() , material38.dispose() ;
geometry39.dispose() , material39.dispose() , geometry40.dispose() , material40.dispose() ;
geometry41.dispose() , material41.dispose() , geometry42.dispose() , material42.dispose() ;
geometry43.dispose() , material43.dispose() , geometry44.dispose() , material44.dispose() ;
geometry45.dispose() , material45.dispose() , geometry46.dispose() , material46.dispose() ;
geometry47.dispose() , material47.dispose() , geometry48.dispose() , material48.dispose() ;
geometry49.dispose() , material49.dispose() , geometry50.dispose() , material50.dispose() ;
geometry51.dispose() , material51.dispose() , geometry52.dispose() , material52.dispose() ;
geometry53.dispose() , material53.dispose() , geometry54.dispose() , material54.dispose() ;
geometry55.dispose() , material55.dispose() , geometry56.dispose() , material56.dispose() ;
geometry57.dispose() , material57.dispose() , geometry58.dispose() , material58.dispose() ;
geometry59.dispose() , material59.dispose() , geometry60.dispose() , material60.dispose() ;
geometry61.dispose() , material61.dispose() , geometry62.dispose() , material62.dispose() ;
geometry63.dispose() , material63.dispose() , geometry64.dispose() , material64.dispose() ;
scene.remove(mesh_c1, mesh_c2 , mesh_c3 , mesh_c4,mesh_c5 , mesh_c6 , mesh_c7 , mesh_c8 , mesh_c9 , mesh_c10 ,
mesh_c11,mesh_c12,mesh_c13,mesh_c14,mesh_c15,mesh_c16,mesh_c17,mesh_c18,mesh_c19,mesh_c20,
mesh_c21,mesh_c22 , mesh_c23 , mesh_c24,mesh_c25 , mesh_c26 , mesh_c27 , mesh_c28 , mesh_c29 , mesh_c30 )
};
}; // init
以下、fphotos.js を分けて説明
①ボタンからの情報
// --------------------------------------------------------------------------------
// manual button click
// -------------------------------------------------------------------------------
function clickBtng(){
gtxt1 = " ・画像切り替わりの早い/遅いにより「Start(fast)」または 「Start(slow)」を押して開始して下さい"
gtxt2 = " ・古いブラウザやスマホでは正常に稼働しないことがあります"
gtxt3 = " ・続けて2回目以降を開始するにはブラウザの更新ボタンを押してからにしてください"
gtxt4 = " ・このメッセージを消すにはもう一度「Manual」を押してください"
gtxt = gtxt1 + '
' + gtxt2 + '
' + gtxt3 + '
' + gtxt4 ;
str0 = document.getElementById("msgtxt2").innerHTML
if ( str0 === "" ) {str = gtxt}
else {str = "" };
document.getElementById("msgtxt2").innerHTML = str ;
};
-
clickBtng()
使い方のガイド
str0 = document.getElementById("msgtxt2").innerHTML;msgtxt2の表示内容を読み込み何も表示されてなければ説明文字を表示、表示されていればnullを表示する
// ---------------------------------------------------------------------------
// initialize start
// ---------------------------------------------------------------------------
function clickBtn1(id , value){
width = canvas3d.clientWidth;
height = canvas3d.clientHeight;
document.getElementById("btn_m1").style.backgroundColor = "gray"; // reset background of button
document.getElementById("btn_m2").style.backgroundColor = "gray";
// ---------------------- global const
let resp = 0 ;
if (width <= 480) { resp = 1 } // smart phone
let spd = "fast" // speed defult
if (value.match("fast")) { spd = "f" , document.getElementById("btn_m1").style.backgroundColor = "orange";} // speed fast
if (value.match("slow")) { spd = "s" , document.getElementById("btn_m2").style.backgroundColor = "orange";} // speed slow
let sst = 0
let sst0 = 0
const imgw = 1500 // image width
const imgh = 846 // image height
const imgd = 0 // image depth
const cpx = 0 ; // center position x
const cpy = 0 ; // center position y
let cpz = imgw * 6.4 ; // center position z
if (resp == 1 ) {cpz = imgw * 5.8 };
let im = 1 ; // list number of mesh image
let cpzi = 0 ;
let tsls = 10 ; // speed default
if (spd == "f") { tsls = 10 } // image change time fast
if (spd == "s") { tsls = 20 } // image change time slow
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
-
function clickBtn1(id , value){.. } ;
Startボタンのid,valueを受け取る。idは音楽名、valueはボタンの名前 Start(fast) or Start(slow)
==>Start(fast) ボタン (html):< 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="Start (fast)" onclick="clickBtn1(this.id,this.value)"> width = canvas3d.clientWidth , height = canvas3d.clientHeight;
cssで定義したキャンバスの幅と高さ
if (value.match("fast")) { spd = "f" , document.getElementById("btn_m1").style.backgroundColor = "orange";}ボタンの背景をリセット
②audio(音楽)の処理
// ---------------------------------------------------------------------------
// read music names from html and put in list
// ---------------------------------------------------------------------------
playlist = id.split("%", 8); // take music
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)
}
else {
audiosrc = playlist[0]
playSound(audiosrc)
mindex = 0;
}
};
// ---------------------------------------------------------------------------
// web audio api define
// XMLHttpRequest() : Asynchronous JavaScript + XM
// AudioContext() : audio-processing
// decodeAudioData(): decode audio data asynchronously
// ---------------------------------------------------------------------------
var request , source , stopflag , closeflag = 0;
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 (resp == 1) { source.loop = true}
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
};
-
playlist = id.split("%", 8) ;
idでaudio情報が渡され%で分解してplaylist(配列)に格納
web audio api を使って非同期処理 audioの開始、volumeの調整、停止 gain = context.createGain();ボリュウム処理の準備
source.onended1曲の終了, 配列から次のaudioを取り出す
source.loop = true ;ios(iphoneなど)では連続してaudioデータを読み込むことができないので一度読み込まれたaudioデータを繰り返す
③three.jsを使って3Dコンテンツを定義
// ---------------------------------------------------------------------------
// read image list
// ---------------------------------------------------------------------------
readimg();
// ---------------------------------------------------------------------------
// Three define
// renderer : 規定の書式に従ってデータや画像を表示させるためのプログラム
// ---------------------------------------------------------------------------
const canvasElement = document.querySelector('#canvas3d') // get canvas
const renderer = new THREE.WebGLRenderer({ canvas: canvasElement , alpha:true}); // renderer
renderer.setSize(width, height);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.shadowMap.enabled = true;
const scene = new THREE.Scene(); // make scene
// var axes = new THREE.AxisHelper(2500);
// scene.add(axes);
const container1 = new THREE.Object3D(); // container define
scene.add(container1);
const container2 = new THREE.Object3D();
scene.add(container2);
// ---------------------------------------------------------------------------
// camera define
// ---------------------------------------------------------------------------
let cposz = imgw * 7.3 ; // カメラz軸の範囲
if ( resp == 1 ) {cposz = imgw * 6.6 }
camera = new THREE.PerspectiveCamera( 45 , width / height , 1 , cposz*10 ); // 視野角, アスペクト比, near, far
camera.position.set(0,0, cposz);
camera.lookAt(new THREE.Vector3(0, 0, 0)); // center direction
scene.add(camera);
// const controls = new THREE.OrbitControls(camera, renderer.domElement); // camera controler
// ---------------------------------------------------------------------------
// light define
// ---------------------------------------------------------------------------
// ambientLight = new THREE.AmbientLight(0xffffff , 1.0 ); // 環境光
// scene.add(ambientLight);
// 平行光源を作成
const dcolor1 = 0xffffff ;
const directionalLight1 = new THREE.DirectionalLight(dcolor1 , 1 );
directionalLight1.position.set(0 , 0 , - 1 );
scene.add(directionalLight1);
const dcolor2 = 0xff0000 ;
const directionalLight2 = new THREE.DirectionalLight(dcolor2 , 0.5 );
directionalLight2.position.set( 1 , 0 , 0 );
scene.add(directionalLight2);
const dcolor3 = 0x0000ff ;
const directionalLight3 = new THREE.DirectionalLight(dcolor3 , 0.5 );
directionalLight3.position.set( -1 , 0 , 0 );
scene.add(directionalLight3);
// ------------ 3d 要素 ----------------
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 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 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 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);
.................................................................................
scene.add(mesh1,mesh2,mesh3,mesh4, ............
-
readimg() ;
64個の画像データを配列に読み込む
const renderer = new THREE.WebGLRenderer({ canvas: canvasElement , alpha:true});rendererは絵を描くこと、alpha:trueはcanvasの背景を透明にする
camera.lookAt(new THREE.Vector3(0, 0, 0)) ;カメラの向きを設定
directionalLight1.position.set(0 , 0 , - 1 );光の照射方向 z軸の - は手前から奥に向かって照射
geometry (幾何学) , texture (生地質) 、material (材料) , mesh (網の目) を定義し、meshをsceneにaddする④アニメーション(3dコンテンツを表示・動かす)
// ---------------------------------------------------------------------------
// start animation
// ---------------------------------------------------------------------------
const s1 = 5 ; // end of animation stag1
const s2 = 520 ; // end of animation stag2
const s3 = s1 + tsls * 65 ; // end of animation stag3
tick();
// ---------------------------------------------------------------------------
// Tick the time
// ---------------------------------------------------------------------------
function tick() {
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) // 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.98
};
if (cpzi <= cpz && csw ==1 ) { // moving z
if (spd == "f") {cpzi += 25.0 }
if (spd == "s") {cpzi += 17.0 }
msl[im].position.set ( cpxi , cpyi , cpzi )
msl[im].rotation.y += Math.PI / 4 * 0.02 // rotation y
// msl[im].rotation.z += 0.01 // rotation y
}
else if ( cpzi >= cpz && csw ==1 ) {
msl[im].rotation.set ( 0 , 0 , 0 ) // stop rotation
msl[im].position.set ( cpx , cpy , cpzi ) // stop moving
im += 1 // set nex image
csw = 0 // next image sw
};
};
if (sst >= s3 - 5 ) {
playVolumnDown()
};
if (sst > s3 && endflag ===0 ) { // ending process
endflag = 1
endproc() // end proc
};
renderer.render(scene, camera); // レンダリング
if ( endflag == 0 ) {
tickreq = requestAnimationFrame(tick);
};
}; // tick end
-
ここがエンジン部分
最後のrequestAnimationFrame(tick); はメソッド。関数tick()が毎秒60フレームで再描画される(60fps)
画像毎の処理時間を区切るために試行錯誤の結果sst0 += 0.0167 ;とするのが使いやすい。
x軸とy軸で画像を中央(0)に近づける方法として cpxi = cpxi * 0.990 , cpyi = cpyi * 0.98とした。1より小さい値を繰り返し掛けるとx軸とy軸の - と + を考慮しなくて良い。
tickreq = requestAnimationFrame(tick) ;
tickreq は後で停止するときのid
msgtxt = img[im].split("%",2)%の次の画像説明を表示
img[1] = 'img2021/P1063380.jpg%2021/01/06 トモエガモ 町田市薬師池公園';
終了の5秒前にaudioのボリュームを下げる
⑤3Dテキスト表示
// ---------------------------------------------------------------------------
// text define
// ---------------------------------------------------------------------------
function settext(text) {
if (tmsh == 1){scene.remove(textMesh1)}
const loaders = new THREE.TextureLoader();
loadert = new THREE.FontLoader();
loadert.load('fonts/optimer_regular.typeface.json', function(font){
textGeometry1 = new THREE.TextGeometry(text , {
font: font,
size: 200
});
textMaterial1 = new THREE.MeshPhongMaterial({ color: 0xffffff});
textMesh1 = new THREE.Mesh(textGeometry1, textMaterial1);
scene.add(textMesh1);
textGeometry1.center(); // text on center position set
textMesh1.position.y = - 4000 ;
tmsh = 1 ;
});
};
-
3dテキストを使うには特別なfontを使う。ここではoptimer_regular.typeface.jsonというfontを使うが日本語フォントが無く、画像の説明には使えないのでキャンバス上で曲名表示に使った。このフォントは3Dコンテンツとして使える(将来)
fontはthree.jsをダウンロードするとexamples/fontsフォルダーの中にある
他と同様3Dコンテンツとして定義する
⑥終了処理
// ---------------------------------------------------------------------------
// end process
// ---------------------------------------------------------------------------
function endproc() {
document.getElementById("msgtxt1").innerHTML = "end ...";
document.getElementById("msgtxt3").innerHTML = "2回目以降はブラウザを更新してください。" ;
cancelAnimationFrame(tickreq) ;
setinit();
source.stop(3); // stop after 3 seconds
closeAudioContext() // release resource
removeobj()
};
-
64個の画像を処理したあと、終了処理をする
cancelAnimationFrame(tickreq) ;
animationを停止
source.stop(3);3秒後audio停止
⑦バックの円模様
// ---------------------------------------------------------------------------
// back circle define
// ---------------------------------------------------------------------------
function backcircle() {
if (resp == 1) { crads = 250 } // for smart phone radius
else { crads = 300 } ;
const opcc = 0.1 ; // opacity value
const ccolor1 = 0xdddddd ; // color1
const ccolor2 = 0xffffff ; // color2
const ccolor3 = 0x888888 ; // 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 ;
..................................................................
mva = 0.1 ; // adjust speed
const bmc = 6 ;
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 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,});
..................................................................
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 );
..................................................................
scene.add( mesh_c1 , mesh_c2 , mesh_c3 , mesh_c4 , ......................................... );
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 ;
..................................................................
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
..................................................................
};
// ---------------------------------------------------------------------------
// 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};
..................................................................
}; // function end
-
3種類30個の円模様を背景として動かす
const material_c1 = new THREE.MeshLambertMaterial({ color: ccolor1 , opacity : opcc , transparent: true,}) ;
opacityは不透明度
mvx1 = mva * Math.random() * 110〜0.9999････ の少数に11を掛けて0〜10の整数にする。乱数関数でx軸とy軸に配置し広げていく
mesh_c1.position.x += mvx1 ;if (mesh_c1.position.x >thsw | mesh_c1.position.x < - thsw ) {mvx1 = mvx1 * -1};
x , y軸に幅をもたせて折り返す
const mvz = - 100 ; mesh_c1.position.z = mvzサムネイルよりわずか後に配置
番外・コーデングの効率化
# ----------- 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)
-
64個のコンテンツを記述するのに面倒なのでpythonで書いた簡単なプログラム
img_file に画像のjpgファイルを入れておく
日付は手動で記入する。P1063380.jpg ==> 2021/01/06
// 結果
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 シジュウカラ 薬師池公園';
..............................
参考 : XAMPPのダウンロード
webアプリケーションを開発するにはwebサーバーが必要だがXAMPPを使って自分のpcにローカルの疑似開発環境を作る
導入はこちらから XAMPP
使い方 : XAMPPを導入したフォルダーのhtdocsフォルダーにtestフォルダーを作り html , css , javascriptプログラムを移行する。
XAMPPを起動し、メニューからApacheをstartしておき、ブラウザでhttp://localhost/test/fphotos.html と入力するとwebアプリケーションの疑似開発環境が使える。