(async () => { const THREE = await import("https://esm.sh/three@0.165.0"); const { OrbitControls } = await import("https://esm.sh/three@0.165.0/examples/jsm/controls/OrbitControls.js"); const { ImprovedNoise } = await import("https://esm.sh/three@0.165.0/examples/jsm/math/ImprovedNoise.js"); const { SimplexNoise } = await import("https://esm.sh/three@0.165.0/examples/jsm/math/SimplexNoise.js"); const { SVGLoader } = await import("https://esm.sh/three@0.165.0/examples/jsm/loaders/SVGLoader.js"); const { EffectComposer } = await import("https://esm.sh/three@0.165.0/examples/jsm/postprocessing/EffectComposer.js"); const { RenderPass } = await import("https://esm.sh/three@0.165.0/examples/jsm/postprocessing/RenderPass.js"); const { UnrealBloomPass } = await import("https://esm.sh/three@0.165.0/examples/jsm/postprocessing/UnrealBloomPass.js"); const { AfterimagePass } = await import("https://esm.sh/three@0.165.0/examples/jsm/postprocessing/AfterimagePass.js"); // ここに Const / City / Particles / Clock / RailLayer / sketch の中身を順番に貼る //======================================================================= // RailLayer //======================================================================= class RailLayer{ constructor(radius,base, posZ, trainNum, color,fontColor, timeType,cityasset){ this.radius = radius; this.base = base; this.trainNum = trainNum; this.color = color; this.fontColor = fontColor; this.timeType = timeType; this.scale = 1.0; this.amp = 1.0; this.trainPositions = []; this.noise = new ImprovedNoise(); this.noiseseed = Math.random() * 1000; this.group = new THREE.Group(); //create objects this.rail = this.createRail(); this.group.add(this.rail); this.trains = []; for(var i =0 ; i < this.trainNum;i++){ var train = this.createTrain(); this.trains.push(train); this.group.add(train); } // panel this.panel = this.createPanel(); this.group.add(this.panel); //city const city = new City(this.color, this.radius+30); city.loadCity(cityasset).then(svg=>{ this.group.add(svg); }) this.group.position.set(0,0,posZ); } createRail() { const group = new THREE.Group(); const geometry = new THREE.TorusGeometry(this.radius,40,2,100); const material = new THREE.MeshStandardMaterial({color:0x111111, roughness:0.2, metalness:0.2,side: THREE.DoubleSide}); const base = new THREE.Mesh(geometry,material); group.add(base); const glowRail1 = new THREE.Mesh( new THREE.TorusGeometry(this.radius-10, 2, 8, 256), new THREE.MeshBasicMaterial({ color :this.color}) ); const glowRail2 = new THREE.Mesh( new THREE.TorusGeometry(this.radius+10, 2, 8, 256), new THREE.MeshBasicMaterial({ color :this.color}) ); group.add(glowRail1); group.add(glowRail2); for(var i = 0; i < Math.PI*2;i+=0.1){ const bar = new THREE.Mesh( new THREE.BoxGeometry(30,2,2), new THREE.MeshBasicMaterial({ color :this.color}) ); bar.position.set(this.radius*Math.cos(i),this.radius*Math.sin(i),0); bar.rotation.set(0,0,i); group.add(bar); } return group; } createTrain(){ const group = new THREE.Group(); const body = new THREE.Mesh( new THREE.BoxGeometry(40,90,40), new THREE.MeshBasicMaterial({color: 0x202020}) ); //window const windowMat = new THREE.MeshBasicMaterial({ color: 0xB2DDFF, }); // 前後 for(let fb of [-46, 46]){ const window = new THREE.Mesh( new THREE.PlaneGeometry(23, 15), windowMat ); window.position.set(0, fb, 5); // 横を向かせる if(fb>0) window.rotation.x = - Math.PI / 2; else window.rotation.x = Math.PI / 2; group.add(window); } // サイド for (let side of [-21, 21]) { for (let y of [-25, 0, 25]) { const window = new THREE.Mesh( new THREE.PlaneGeometry(15, 15), windowMat ); window.position.set(side, y, 5); // 横を向かせる window.rotation.y = Math.PI / 2; // 左右反転 if (side < 0) { window.rotation.y *= -1; } group.add(window); } } group.add(body); return group; } createPanel(){ this.canvas = document.createElement("canvas"); this.canvas.width = 256; this.canvas.height = 256; this.texture = new THREE.CanvasTexture(this.canvas); const group = new THREE.Group(); const textMaterial = new THREE.MeshBasicMaterial({ map: this.texture, transparent: true, depthWrite: false, side: THREE.DoubleSide }); this.textPlane = new THREE.Mesh( new THREE.PlaneGeometry(90, 90), textMaterial ); this.textPlane.position.z = 40; group.add(this.textPlane); group.rotateX(Math.PI * 0.5); return group } updateTextArea(timevalue){ const ctx = this.canvas.getContext("2d"); ctx.clearRect(0,0,256,256); ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.fillStyle = "black" ctx.strokeStyle = this.fontColor; ctx.beginPath(); ctx.roundRect(10, 10, 236, 210, 20); ctx.stroke(); ctx.fill(); ctx.fillStyle = this.fontColor; ctx.font = "120px Arial"; ctx.fillText((Math.floor(timevalue)).toString().padStart(2, '0'),128,110); ctx.font = "30px Arial"; ctx.fillText(this.timeType,128,180); this.texture.needsUpdate = true; } async loadCitySvg(angle){ const svg = await this.loadSvg("./image/tower.svg",angle); return svg; } loadSvg(path,angle) { return new Promise((resolve, reject) => { const loader = new SVGLoader(); loader.load( path, (data) => { const group = new THREE.Group(); data.paths.forEach((path) => { const material = new THREE.MeshBasicMaterial({ color: this.color, // 確認用にピンク side: THREE.DoubleSide, transparent: false, depthWrite: false }); path.subPaths.forEach((subPath) => { const points = subPath.getPoints(50); const geometry = SVGLoader.pointsToStroke(points, { strokeWidth: 1, // 確認用に極太 strokeLineJoin: "round", strokeLineCap: "round", strokeMiterLimit: 4 }); if (geometry) { const mesh = new THREE.Mesh(geometry, material); group.add(mesh); } }); }); // まず原点付近に置く group.scale.set(1,-1,1) var x = this.radius * Math.cos(angle); var y = this.radius * Math.sin(angle); group.rotation.set(Math.PI*0.5,0,0); group.position.set(x,y,80) group.rotation.y = angle - Math.PI*0.5; resolve(group); }, undefined, reject ); }); } update(timevalue,camera){ var t = performance.now()*0.01; // train pos const baseAngle = - (timevalue / this.base) * Math.PI * 2 this.trains.forEach((train, i) => { const angle =baseAngle + (i+1) * 0.15; train.position.set( Math.cos(angle) * this.radius, Math.sin(angle) * this.radius, 30 + 2* (this.noise.noise(t+i*0.3,timevalue,this.noiseseed)) ); train.rotation.z = angle; }); // 親子の行列を反映してからワールド座標を取る this.group.updateWorldMatrix(true, true); this.trains.forEach((train, i) => { if (!this.trainPositions[i]) { this.trainPositions[i] = new THREE.Vector3(); } train.getWorldPosition(this.trainPositions[i]); }); // var nScale = 1 + 0.05*(this.noise.noise(t*0.1,timevalue,this.noiseseed)-0.5); //this.group.position.x = this.radius * Math.cos(t*0.01) this.group.position.y = 100 * Math.sin(t*0.005+this.noiseseed)* this.amp; this.group.rotation.x = 0.05*Math.sin(t*0.05+this.noiseseed); this.group.scale.y = this.scale; //canvas this.updateTextArea(timevalue); this.panel.position.set( Math.cos(baseAngle) * this.radius, Math.sin(baseAngle) * this.radius, 80 ); this.panel.lookAt(camera.position); var y = this.panel.rotation.y; this.panel.rotation.set(Math.PI*0.5,y,0) } } //======================================================================= // City //======================================================================= class City{ constructor(color,radius){ this.color = color this.radius = radius } async loadCity(paths) { const group = new THREE.Group(); paths.forEach(c =>{ this.loadCitySvg(c.path,c.angle).then(svg=>{ group.add(svg) }) }) return group; } async loadCitySvg(path,angle){ const svg = this.loadSvg(path,angle); return svg; } loadSvg(svgText, angle) { const loader = new SVGLoader(); const data = loader.parse(svgText); const group = new THREE.Group(); data.paths.forEach((svgPath) => { const material = new THREE.MeshBasicMaterial({ color: this.color, side: THREE.DoubleSide, transparent: false, depthWrite: false }); svgPath.subPaths.forEach((subPath) => { const points = subPath.getPoints(50); const geometry = SVGLoader.pointsToStroke(points, { strokeWidth: 1, strokeLineJoin: "round", strokeLineCap: "round", strokeMiterLimit: 4 }); if (geometry) { const mesh = new THREE.Mesh(geometry, material); group.add(mesh); } }); }); const box = new THREE.Box3().setFromObject(group); group.scale.set(1, -1, 1); const x = this.radius * Math.cos(angle); const y = this.radius * Math.sin(angle); group.rotation.set(Math.PI * 0.5, 0, 0); group.position.set(x, y, box.max.y - 2); group.rotation.y = angle + Math.PI * 0.5; return group; } } //======================================================================= // Clock //======================================================================= class Clock{ constructor(){ } update(){ // get date const now = new Date(); this.idMonth = now.getMonth() + 1; this.idDay = now.getDate(); this.idWeekDay = now.getDay() + 1; // get time this.s = now.getSeconds()+ now.getMilliseconds()/1000; this.m = (now.getMinutes()*60 + this.s)/60; this.h = (now.getHours() % 12) + this.m / 60; } } //======================================================================= // Particles //======================================================================= class Particles{ constructor(count = 2000, width = 4800, height = 700, depth = 50){ // define this.count = count; // area limitatin this.width = width; this.height = height; this.depth = depth; this.speed =0.8; this.noiseScale = 0.002; this.timeScale = 0.001; this.noise = new SimplexNoise(); this.positions = new Float32Array(this.count*3); this.velocities = new Float32Array(this.count * 3); this.bands = new Uint8Array(this.count); this.baseYs = new Float32Array(this.count); for(var i = 0; i < this.count ; i++){ this.resetParticle(i); } this.geometry = new THREE.BufferGeometry(); this.geometry.setAttribute( "position", new THREE.BufferAttribute(this.positions,3) ); this.material = new THREE.PointsMaterial({ color: 0xaaddff, size: 2, sizeAttenuation: false, transparent: true, opacity: 0.12, blending: THREE.AdditiveBlending, depthWrite: false }) this.points = new THREE.Points(this.geometry,this.material); } resetParticle(i){ const id = i * 3; const x = (Math.random() - 0.5) * this.width; // 何本かの帯 const bandCount = 8; const band = Math.floor(Math.random() * bandCount); // 帯の中心Y const baseY = -this.height * 0.35 + (band / (bandCount - 1)) * this.height * 0.7; // 波打つ帯 const wave = Math.sin(x * 0.006 + band * 1.7) * 35 + Math.sin(x * 0.013 + band * 0.8) * 12; // 帯の太さ const thickness = 18; this.positions[id + 0] = x; this.positions[id + 1] = baseY + wave + (Math.random() - 0.5) * thickness; this.positions[id + 2] = (Math.random() - 0.5) * this.depth * 0.5; this.velocities[id + 0] = 0.2 + Math.random() * 0.5; this.velocities[id + 1] = 0; this.velocities[id + 2] = 0; this.bands[i] = band; this.baseYs[i] = baseY; } update(trainPositions = []) { const t = performance.now() * 0.0002; const localTrainPositions = []; for(const p of trainPositions){ const v = p.clone(); this.points.worldToLocal(v); localTrainPositions.push(v); } for (let i = 0; i < this.count; i++) { const id = i * 3; let x = this.positions[id + 0]; let y = this.positions[id + 1]; let z = this.positions[id + 2]; // -------------------------------- // 1. 基本は右へ流れる // -------------------------------- let vx = 0.8; let vy = 0.0; let vz = 0.0; // -------------------------------- // 2. noiseでゆるくうねる // -------------------------------- const n = this.noise.noise3d( x * this.noiseScale, y * this.noiseScale, t ); const angle = n * Math.PI * 2; vx += Math.cos(angle) * 0.25; vy += Math.sin(angle) * 0.8; // -------------------------------- // 3. たまに渦 // -------------------------------- const vortexX = Math.sin(t * 0.7) * this.width * 0.35; const vortexY = Math.cos(t * 0.5) * this.height * 0.1; const dx = x - vortexX; const dy = y - vortexY; const dist = Math.sqrt(dx * dx + dy * dy); const vortexRadius = 280; if (dist < vortexRadius) { const power = 1.0 - dist / vortexRadius; // 渦の接線方向 const swirlX = -dy / (dist + 0.001); const swirlY = dx / (dist + 0.001); vx += swirlX * power * 1.8; vy += swirlY * power * 1.8; } // tranpos for (const trainPos of localTrainPositions) { const dx = trainPos.x - x; const dy = trainPos.y - y; const dz = trainPos.z - z; const distSq = dx * dx + dy * dy + dz * dz; const radius = 180; const radiusSq = radius * radius; if (distSq < radiusSq) { const dist = Math.sqrt(distSq) + 0.001; const power = 1.0 - dist / radius; // 列車へ少し吸い寄せる const attraction = 0.25; vx += (dx / dist) * power * attraction; vy += (dy / dist) * power * attraction; vz += (dz / dist) * power * attraction; } } // -------------------------------- // 4. 位置更新 // -------------------------------- this.positions[id + 0] += vx * this.speed; this.positions[id + 1] += vy * this.speed; this.positions[id + 2] += vz * this.speed; // -------------------------------- // 4. Lineにもどす // -------------------------------- const targetY = this.baseYs[i] + this.noise.noise3d( this.positions[id]*0.002,this.bands[i],t*0.3) * 80; this.positions[id+1] +=(targetY - this.positions[id+1]) * 0.001; // -------------------------------- // 5. 画面外に出たら戻す // -------------------------------- if ( this.positions[id + 0] > this.width * 0.5 || this.positions[id + 1] > this.height * 0.5 || this.positions[id + 1] < -this.height * 0.5 ) { this.resetParticle(i); // 右に流すので左端から再登場 this.positions[id + 0] = -this.width * 0.5; } } this.geometry.attributes.position.needsUpdate = true; } } //======================================================================= // Const //======================================================================= let bill1 = ``; let bill2 = ``; let castle = ``; let tower = ``; let kitte = ``; let circle = ``; let CityAssetH = [ {path:castle,angle:3.5}, {path:bill1,angle:6}, {path:bill2,angle:8} ] let CityAssetM = [ {path:kitte,angle:3.4}, {path:circle,angle:2.8}, {path:bill2,angle:7}, {path:bill1,angle:6.95} ] let CityAssetS = [ {path:tower,angle:3}, {path:bill1,angle:9}, {path:bill2,angle:4.95}, {path:bill1,angle:5} ] let particles; let scene; let light; let camera; let renderer; let composer; let controls; // rail let clockObject; let hourLayer; let secondLayer; let minuteLayer; let trainPositions = []; // time let clock; function init(){ // get aspect ratio var aspectRatic = window.innerWidth / window.innerHeight; // renderer renderer = new THREE.WebGLRenderer({canvas: document.getElementById("myCanvas"), antialias: true}); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); renderer.setAnimationLoop(tick); // scene scene = new THREE.Scene(); scene.background = new THREE.Color(0x02040a); // camera camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 5000); camera.position.set(0,10,1400); //camera.rotateY(-Math.PI*0.5); //camera.lookAt(0, 0, 0); // light light = new THREE.DirectionalLight(0xffffff, 1); light.position.set(1, 1, 1).normalize(); scene.add(light); // controls controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true; //conposer composer = new EffectComposer(renderer); composer.addPass( new RenderPass(scene, camera) ); composer.addPass( new UnrealBloomPass( new THREE.Vector2(window.innerWidth, window.innerHeight), 0.6, 0.35, 0.3 ) ); const afterimage = new AfterimagePass(); afterimage.uniforms.damp.value = 0.52; composer.addPass(afterimage); //clock clock = new Clock(); clock.update(); // objects var radius = 800; hourLayer = new RailLayer(radius,12,150,clock.idMonth,0xb35cff,"#b35cff","Hour",CityAssetH); secondLayer = new RailLayer(radius,60,0,clock.idDay,0x00eaff,"#00eaff","Seconds",CityAssetM); minuteLayer = new RailLayer(radius,60,-150,clock.idWeekDay,0xffdd66,"#ffdd66","Minute",CityAssetS); clockObject = new THREE.Group(); clockObject.add(hourLayer.group); clockObject.add(secondLayer.group); clockObject.add(minuteLayer.group); clockObject.rotateX(-Math.PI*0.5); clockObject.rotateZ(Math.PI*0.5); scene.add(clockObject) particles = new Particles(); particles.points.position.set(0,0,radius-200); scene.add(particles.points); //curlParticles = new CurlParticles(700); //curlParticles.points.position.set(0, 0, 0); //scene.add(particles.points); onResize() } function tick() { // update control controls.update(); // update clock clock.update(); // update object hourLayer.update(clock.h,camera); secondLayer.update(clock.m,camera); minuteLayer.update(clock.s,camera); // particles.update(); trainPositions.length = 0; trainPositions.push( ...hourLayer.trainPositions, ...secondLayer.trainPositions, ...minuteLayer.trainPositions ); particles.update(trainPositions); // Render the scene composer.render(scene, camera); } // utility function mapClamp(value, inMin, inMax, outMin, outMax) { const t = Math.max(0, Math.min(1, (value - inMin) / (inMax - inMin))); return outMin + t * (outMax - outMin); } function updateCameraFov() { const aspect = window.innerWidth / window.innerHeight; const aspect16_9 = 16 / 9; const aspectUltra = 8950 / 1080; camera.fov = mapClamp( aspect, aspect16_9, aspectUltra, 50, 40 ); camera.updateProjectionMatrix(); } function onResize() { const w = window.innerWidth; const h = window.innerHeight; renderer.setSize(w, h); composer.setSize(w, h); camera.aspect = w / h; updateCameraFov(); // const aspect = window.innerWidth / window.innerHeight; var railScale = mapClamp(aspect,16 / 9,8950 / 1080,1,1.4 ); hourLayer.scale = railScale; secondLayer.scale = railScale; minuteLayer.scale = railScale; var railAmp = mapClamp(aspect,16 / 9,8950 / 1080,1,5 ); hourLayer.amp = railAmp; secondLayer.amp = railAmp; minuteLayer.amp = railAmp; var particleWidth = mapClamp(aspect,16 / 9,8950 / 1080,2000,4800 ); particles.width = particleWidth; } window.addEventListener("resize", onResize); //======================================================================= // init //======================================================================= init(); })();

Time Ring Railway