2021/10/21
3D floating photos 32
前に、64個の画像表示を作成したが、見る人によっては長すぎる、スマホでは重すぎて異常終了することがある、ということで32個の画像にした。
参考)3D photo floating 64
任意のサムネイル画像をクリックして中央に表示できないかとの感想があり、対処。何気ないクリック操作だが結構難儀した。
- 要件
手動と自動の2種類のボタン表示 Guide Manual Auto
手動は中央表示された画像のテキストを上部に表示する
自動は音楽付き
audioを複数準備し、mobileはネット負荷削減のため最初のaudioを繰り返す
自動は32個のサムネイル画像を最初に表示し順次カメラ方向に動かす
画像毎のコメントを上部に表示する
音楽名を3Dテキストで下部に表示する
以下に実際のサンプルコードを記述しておく
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>
-
キャンバスidはcanvas3d
clickBtng()
ガイドを表示する
「Manual」はサムネイルを表示しclickして大きく表示する 自動更新は 音楽を付ける clickBtn1(this.id,this.value)音楽名とボタン名を渡す
three.jsのバージョンは 132 OrbitControls.jsマウス操作でカメラを制御する。今回はjsではコメントアウトにしている。問題処理用
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%;
}
}
/* --------------------------------------------------------------------*/
-
他でも使うのでここでは使わないものも定義してある
@media screen and (max-width: 480px) { .....}
モバイル用表示の定義(responsible )
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);
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 ;
};
-
Guide clickBtng()
使い方のガイドをhtmlのmsgtxt2に表示
str0 = document.getElementById("msgtxt2").innerHTML;msgtxt2の表示内容を読み込み何も表示されてなければ説明文字を表示、表示されていればnullを表示する
// ---------------------------------------------------------------------------
// 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;
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="Auto" onclick="clickBtn1(this.id,this.value)" >ボタンのid,valueを受け取る。idは音楽名、valueはボタンの名前 Auto
width = window.innerWidth; , height = window.innerHeight;windowの幅と高さを取得
var userAgent = window.navigator.userAgent.toLowerCase();表示しているブラウザーを調べる。safariの場合別処理必要(後述)
②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
};
};
-
playlist = id.split("%", 8) ;
idでaudio情報が渡され%で分解してplaylist(配列)に格納
web audio api を使って非同期処理
audioの開始、volumeの調整、停止
gain = context.createGain();ボリュウム処理の準備
source.onended1曲の終了, 配列から次のaudioを取り出す
if ( userAgent.indexOf('safari') !== - 1 && userAgent.indexOf('chrome') === - 1 ) { source.loop = true } ;safariでは連続してaudioデータを読み込むことができないので一度読み込まれたaudioデータを繰り返す 。chromeでもsafariの文字が含まれているので注意
③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);
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 ;
});
};
-
readimg() ;
画像データを配列に読み込む
const renderer = new THREE.WebGLRenderer({ canvas: canvasElement , alpha:true});rendererは絵を描くこと、alpha:trueはcanvasの背景を透明にする
camera.lookAt(new THREE.Vector3(0, 0, 0)) ;カメラの向きを中心に設定
AmbientLight(環境光)とPointLightは加算されるので調整必要 (0x)add8e6 + (0x)522719 = (0x)ffffff
マウス操作の準備
geometry (幾何学) , texture (生地質) 、material (材料) , mesh (網の目) を定義し、meshをsceneにaddする
音楽名を3dで表示。3dテキストを使うには特別なfontを使う。ここではoptimer_regular.typeface.jsonというfontを使うが日本語フォントが無く、画像の説明には使えないのでキャンバス上で曲名表示に使った。このフォントは3Dコンテンツとして使える
json fontはthree.jsをダウンロードするとexamples/fontsフォルダーの中にある
④アニメーション(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
自動表示のエンジン部分
最後の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のボリュームを下げる
⑤終了処理
// ---------------------------------------------------------------------------
// 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
};
-
cancelAnimationFrame(tickreq) ;
animationを停止
source.stop(3);3秒後audio停止
⑥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
};
-
img[1] = 'img2021/P1063380.jpg%2021/01/06 トモエガモ 町田市薬師池公園';
写真画像ホルダー、写真のテキスト
msl [1] = mesh1 , ....meshを配列に格納
⑧バックの円模様の定義と処理
// ---------------------------------------------------------------------------
// 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
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サムネイルよりわずか後に配置
⑨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);
};
マウスでclickされた画像meshの情報を検査し中央に表示する
windowsからはmouseの位置としてスクリーン座標が渡されるので3dのx軸とy軸座標に変換が必要
manualモードと、自動モードの終了後に任意のサムネイルをクリックし中央に表示させる
渡されたマウス座標を -1～1の範囲に変換する
objs = ray.intersectObjects(msl , true );ray(光線)で照らしターゲットのobject(ここでは配列mslに格納されたmesh)をobjsで得る
画像のテキストを得るためにobjsのヒットしたメッシュ情報uuid(Unique identifier , objectのproperty)とuuidが同じmeshを探してimg配列からテキストを表示する
⑩リサイズした時の再設定
// -------------------- 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();
};
wide , heightの再設定
番外・コーデングの効率化
# ----------- 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)
コンテンツを記述するのに面倒なので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 シジュウカラ 薬師池公園';
..............................