Powervska - Process Mockup

Overview

Process

3D Parts

import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import { createSceneElements } from './scene.js'; import { setupUI } from './ui.js'; // Renderer const container = document.getElementById('app'); const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); renderer.outputEncoding = THREE.sRGBEncoding; renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; container.appendChild(renderer.domElement); // Scene & Camera const scene = new THREE.Scene(); scene.background = new THREE.Color(0x0b0b0d); const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 200); camera.position.set(18, 12, 18); // Controls const controls = new OrbitControls(camera, renderer.domElement); controls.target.set(0, 3, 0); controls.enableDamping = true; controls.dampingFactor = 0.08; controls.minDistance = 6; controls.maxDistance = 60; // Lights const dir = new THREE.DirectionalLight(0xffffff, 1.0); dir.position.set(10, 20, 10); dir.castShadow = true; dir.shadow.camera.left = -30; dir.shadow.camera.right = 30; dir.shadow.camera.top = 30; dir.shadow.camera.bottom = -30; dir.shadow.mapSize.set(2048, 2048); scene.add(dir); const rim = new THREE.DirectionalLight(0xa4f4b8, 0.25); rim.position.set(-10, 6, -10); scene.add(rim); scene.add(new THREE.AmbientLight(0xffffff, 0.35)); // Ground const groundMat = new THREE.MeshStandardMaterial({ color: 0x0f1113, roughness: 0.7, metalness: 0.1 }); const ground = new THREE.Mesh(new THREE.PlaneGeometry(200, 200), groundMat); ground.rotation.x = -Math.PI / 2; ground.position.y = 0; ground.receiveShadow = true; scene.add(ground); // Create modular elements: shredder, reactor, tanks, arrows, particles const elements = createSceneElements(scene, renderer); // UI setupUI({ camera, scene, renderer, elements }); // Resize handling window.addEventListener('resize', onWindowResize); function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } // Animation loop const clock = new THREE.Clock(); function animate() { requestAnimationFrame(animate); const dt = clock.getDelta(); // update elements that have animations elements.update(dt); controls.update(); renderer.render(scene, camera); } animate(); import * as THREE from 'three'; import { createShredder } from './components/shredder.js'; import { createReactor } from './components/reactor.js'; import { createArrow } from './components/arrow.js'; import { createGasParticles } from './components/gasParticles.js'; export function createSceneElements(scene, renderer) { const group = new THREE.Group(); scene.add(group); // Layout positions (isometric-like) const posInput = new THREE.Vector3(-8, 1.5, 6); const posShredder = new THREE.Vector3(-2, 1.5, 4); const posReactor = new THREE.Vector3(6, 3, 0); const posO2 = new THREE.Vector3(10, 5, 6); const posOutput = new THREE.Vector3(14, 1.5, 0); // Input bin const binMat = new THREE.MeshStandardMaterial({ color: 0x2a2a2a, roughness: 0.6 }); const inputBin = new THREE.Mesh(new THREE.BoxGeometry(3.5, 3, 3.5), binMat); inputBin.position.copy(posInput); inputBin.position.y = 1.5; inputBin.castShadow = true; inputBin.receiveShadow = true; group.add(inputBin); // Shredder const shredder = createShredder(); shredder.group.position.copy(posShredder); group.add(shredder.group); // Reactor const reactor = createReactor(); reactor.group.position.copy(posReactor); group.add(reactor.group); // O2 tank (simplified) const tankMat = new THREE.MeshStandardMaterial({ color: 0x163a16, metalness: 0.6, roughness: 0.35 }); const o2Tank = new THREE.Mesh(new THREE.CylinderGeometry(1.6,1.6,6,24), tankMat); o2Tank.position.copy(posO2); o2Tank.position.y = 3; o2Tank.castShadow = true; o2Tank.receiveShadow = true; group.add(o2Tank); const topCap = new THREE.Mesh(new THREE.SphereGeometry(1.6,16,8,0,Math.PI*2,0,Math.PI/2), tankMat); topCap.position.set(posO2.x, posO2.y+6/2, posO2.z); group.add(topCap); // Output storage const outMat = new THREE.MeshStandardMaterial({ color: 0x444444, roughness:0.5 }); const outTank = new THREE.Mesh(new THREE.BoxGeometry(3.5,3.5,3.5), outMat); outTank.position.copy(posOutput); outTank.position.y = 1.75; group.add(outTank); // Arrows / flow indicators const a1 = createArrow(posInput.clone().add(new THREE.Vector3(1.5,0.5,0)), posShredder.clone().add(new THREE.Vector3(-1,0.5,0)), 0xff8a00); group.add(a1); const a2 = createArrow(posShredder.clone().add(new THREE.Vector3(2.2,0.8,0.2)), posReactor.clone().add(new THREE.Vector3(-2.2,0.8,0.2)), 0x1f8a2f); group.add(a2); const a3 = createArrow(posO2.clone().add(new THREE.Vector3(-1.5,0, -1.5)), posReactor.clone().add(new THREE.Vector3(1.8,0.8,1.8)), 0x66ccff); group.add(a3); const a4 = createArrow(posReactor.clone().add(new THREE.Vector3(3.2,-0.6,0.2)), posOutput.clone().add(new THREE.Vector3(-1,0,0)), 0xffd166); group.add(a4); // Gas particles near reactor outlet const gas = createGasParticles(); gas.group.position.copy(posReactor.clone().add(new THREE.Vector3(2.6, 1.4, 0))); group.add(gas.group); // Simple labels as flat sprites (not DOM) for quick visual const labels = []; const labelMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff }); function addLabel(text, position) { const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); ctx.font = '48px sans-serif'; const w = ctx.measureText(text).width; canvas.width = w + 24; canvas.height = 80; ctx.fillStyle = 'rgba(10,10,10,0.9)'; ctx.fillRect(0,0,canvas.width, canvas.height); ctx.fillStyle = '#ffffff'; ctx.font = '36px sans-serif'; ctx.fillText(text, 12, 52); const tex = new THREE.CanvasTexture(canvas); tex.encoding = THREE.sRGBEncoding; const spriteMat = new THREE.SpriteMaterial({ map: tex, depthTest:true, depthWrite:false }); const sprite = new THREE.Sprite(spriteMat); sprite.scale.set(4, 1.2, 1); sprite.position.copy(position); sprite.position.y += 3.6; scene.add(sprite); labels.push(sprite); } addLabel('Input — Sorted Plastic', posInput); addLabel('Shredder', posShredder); addLabel('Reactor', posReactor); addLabel('O2 Supply (illustrative)', posO2); addLabel('Fuel Storage', posOutput); // Pack exported elements so main can call update function update(dt) { shredder.update(dt); reactor.update(dt); gas.update(dt); // subtle group hover sway for liveliness group.rotation.y = Math.sin(Date.now() * 0.0003) * 0.02; } return { group, shredder, reactor, gas, arrows: [a1,a2,a3,a4], update }; } import * as THREE from 'three'; export function createShredder() { const group = new THREE.Group(); // Base body const bodyMat = new THREE.MeshStandardMaterial({ color: 0x34393f, metalness: 0.6, roughness: 0.4 }); const body = new THREE.Mesh(new THREE.BoxGeometry(4.2, 2, 3.2), bodyMat); body.position.y = 1; body.castShadow = true; group.add(body); // Shredder top hopper const hopperMat = new THREE.MeshStandardMaterial({ color: 0x252a2f, metalness: 0.2, roughness: 0.7 }); const hopper = new THREE.Mesh(new THREE.BoxGeometry(3.6, 1.2, 2.6), hopperMat); hopper.position.set(-0.4, 2.1, 0); hopper.rotation.z = -0.08; hopper.castShadow = true; group.add(hopper); // Two counter-rotating cylindrical blades const bladeMat = new THREE.MeshStandardMaterial({ color: 0xb3b8bd, metalness: 1.0, roughness: 0.25 }); const blade1 = new THREE.Mesh(new THREE.CylinderGeometry(0.45, 0.45, 2.5, 20), bladeMat); blade1.rotation.z = Math.PI / 2; blade1.position.set(0.2, 1.1, 0.5); blade1.castShadow = true; group.add(blade1); const blade2 = blade1.clone(); blade2.position.set(0.2, 1.1, -0.5); group.add(blade2); // Drive motor const motorMat = new THREE.MeshStandardMaterial({ color: 0x101214, metalness: 0.8, roughness: 0.3 }); const motor = new THREE.Mesh(new THREE.CylinderGeometry(0.5,0.5,1.2,20), motorMat); motor.rotation.x = Math.PI/2; motor.position.set(2.1, 1.1, 0); motor.castShadow = true; group.add(motor); // Animated sparks/particles placeholder using emissive spot on blades const emissiveMat = bladeMat.clone(); emissiveMat.emissive = new THREE.Color(0xff7a2d); emissiveMat.emissiveIntensity = 0.0; const spark = new THREE.Mesh(new THREE.SphereGeometry(0.12, 8, 8), emissiveMat); spark.position.set(0.6, 1.5, 0); group.add(spark); // API: update for animation function update(dt) { const speed = 7.0; blade1.rotation.x += dt * speed; blade2.rotation.x -= dt * speed * 0.92; // pulse emissive when blades spin faster emissiveMat.emissiveIntensity = 0.2 + Math.abs(Math.sin(Date.now() * 0.004)) * 0.6; spark.position.y = 1.5 + Math.sin(Date.now() * 0.01) * 0.08; } return { group, update }; } import * as THREE from 'three'; export function createReactor() { const group = new THREE.Group(); // Reactor main chamber const shellMat = new THREE.MeshStandardMaterial({ color: 0x2b2f34, metalness: 0.7, roughness: 0.35 }); const chamber = new THREE.Mesh(new THREE.CylinderGeometry(2.6, 2.6, 6, 32, 1, true), shellMat); chamber.position.y = 3; chamber.castShadow = true; chamber.receiveShadow = true; group.add(chamber); // Inner glowing core (emissive) const coreMat = new THREE.MeshStandardMaterial({ color: 0xff7a2d, emissive: 0xff7a2d, emissiveIntensity: 1.2, roughness: 0.45, metalness: 0.1 }); const inner = new THREE.Mesh(new THREE.CylinderGeometry(1.6,1.6,4.2,24), coreMat); inner.position.y = 3; inner.castShadow = false; group.add(inner); // Viewing window const glassMat = new THREE.MeshPhysicalMaterial({ color: 0x90c4ff, transmission: 0.85, transparent: true, opacity: 0.95, roughness:0.05 }); const windowMesh = new THREE.Mesh(new THREE.RingGeometry(1.75, 2.4, 32, 4), glassMat); windowMesh.rotation.x = Math.PI / 2; windowMesh.position.set(0, 3, 2.6); group.add(windowMesh); // Access pipe const pipeMat = new THREE.MeshStandardMaterial({ color: 0x33383d, metalness: 0.8, roughness: 0.3 }); const pipe = new THREE.Mesh(new THREE.CylinderGeometry(0.35, 0.35, 4.2, 16), pipeMat); pipe.position.set(3.2, 3.6, 1.8); pipe.rotation.z = Math.PI / 3.6; pipe.castShadow = true; group.add(pipe); // small indicator light const indicator = new THREE.Mesh(new THREE.SphereGeometry(0.18, 8, 8), new THREE.MeshStandardMaterial({ color: 0x1f8a2f, emissive: 0x1f8a2f, emissiveIntensity: 1.0 })); indicator.position.set(-1.6, 5.6, -1.2); group.add(indicator); // API update => pulse inner glow function update(dt) { inner.material.emissiveIntensity = 0.6 + Math.sin(Date.now() * 0.0025) * 0.6; indicator.material.emissiveIntensity = 0.6 + Math.max(0, Math.sin(Date.now() * 0.003) * 0.9); } return { group, update }; } import * as THREE from 'three'; export function createArrow(start, end, hexColor = 0xffffff) { const group = new THREE.Group(); const dir = new THREE.Vector3().subVectors(end, start); const len = dir.length(); dir.normalize(); // Shaft const shaftMat = new THREE.MeshStandardMaterial({ color: hexColor, emissive: hexColor, emissiveIntensity: 0.25, roughness: 0.45 }); const shaft = new THREE.Mesh(new THREE.CylinderGeometry(0.12,0.12,len - 0.8, 12), shaftMat); shaft.position.copy(start).add(dir.clone().multiplyScalar((len - 0.8) / 2)); shaft.quaternion.setFromUnitVectors(new THREE.Vector3(0,1,0), dir); group.add(shaft); // Head const headMat = new THREE.MeshStandardMaterial({ color: hexColor, emissive: hexColor, emissiveIntensity: 0.5, roughness: 0.25 }); const head = new THREE.Mesh(new THREE.ConeGeometry(0.35, 0.8, 12), headMat); head.position.copy(start).add(dir.clone().multiplyScalar(len - 0.4)); head.quaternion.setFromUnitVectors(new THREE.Vector3(0,1,0), dir); group.add(head); // subtle animated glow using a sprite-like plane const glowMat = new THREE.MeshBasicMaterial({ color: hexColor, transparent: true, opacity: 0.08 }); const glow = new THREE.Mesh(new THREE.PlaneGeometry(len * 0.6, 0.6), glowMat); glow.position.copy(start).add(dir.clone().multiplyScalar(len * 0.4)); glow.quaternion.copy(shaft.quaternion); glow.rotateX(Math.PI / 2); group.add(glow); // Update: animate glow opacity shift function update(dt) { const t = (Math.sin(Date.now() * 0.002) + 1) * 0.5; glow.material.opacity = 0.04 + t * 0.06; } return { group, update }; } import * as THREE from 'three'; export function createGasParticles() { const group = new THREE.Group(); const particleCount = 180; const positions = new Float32Array(particleCount * 3); const sizes = new Float32Array(particleCount); for (let i = 0; i < particleCount; i++) { const x = (Math.random() - 0.5) * 1.6; const y = Math.random() * 2.4; const z = (Math.random() - 0.5) * 1.6; positions[i * 3] = x; positions[i * 3 + 1] = y; positions[i * 3 + 2] = z; sizes[i] = 6 + Math.random() * 12; } const geometry = new THREE.BufferGeometry(); geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3)); geometry.setAttribute('size', new THREE.BufferAttribute(sizes, 1)); const material = new THREE.PointsMaterial({ size: 0.22, color: 0xffb86b, transparent: true, opacity: 0.18, depthWrite: false, blending: THREE.AdditiveBlending }); const points = new THREE.Points(geometry, material); group.add(points); function update(dt) { const posAttr = geometry.getAttribute('position'); for (let i = 0; i < posAttr.count; i++) { let y = posAttr.getY(i); y += dt * (0.2 + Math.sin(i + Date.now() * 0.001) * 0.12); if (y > 3.2) y = Math.random() * 0.2; posAttr.setY(i, y); } posAttr.needsUpdate = true; // breathe the color slightly const h = 30 + Math.sin(Date.now() * 0.001) * 10; material.color.setHSL((h / 360), 0.9, 0.55); material.opacity = 0.12 + (Math.sin(Date.now() * 0.0015) + 1) * 0.04; } return { group, update }; } import * as THREE from 'three'; export function setupUI({ camera, scene, renderer, elements }) { const label = document.getElementById('label'); const raycaster = new THREE.Raycaster(); const mouse = new THREE.Vector2(); // Map of interactive meshes to metadata const pickables = []; // Collect some meshes for interaction if (elements && elements.shredder) { elements.shredder.group.traverse((c) => { if (c.isMesh) pickables.push({ mesh: c, id: 'shredder', title: 'Shredder — Pre-processing' }); }); } if (elements && elements.reactor) { elements.reactor.group.traverse((c) => { if (c.isMesh) pickables.push({ mesh: c, id: 'reactor', title: 'Reactor — Conversion Chamber' }); }); } // handle clicks renderer.domElement.addEventListener('pointerdown', (ev) => { mouse.x = (ev.clientX / window.innerWidth) * 2 - 1; mouse.y = -(ev.clientY / window.innerHeight) * 2 + 1; raycaster.setFromCamera(mouse, camera); const intersects = []; for (const p of pickables) { const ints = raycaster.intersectObject(p.mesh, true); if (ints.length) intersects.push({ p, dist: ints[0].distance, point: ints[0].point }); } if (intersects.length) { intersects.sort((a,b)=>a.dist-b.dist); const target = intersects[0].p; showLabel(target.title, intersects[0].point); } else { hideLabel(); } }); function showLabel(text, worldPos) { const pos = worldToScreen(worldPos, camera, renderer); label.style.left = `${pos.x}px`; label.style.top = `${pos.y}px`; label.textContent = text; label.style.display = 'block'; } function hideLabel() { label.style.display = 'none'; } function worldToScreen(pos, camera, renderer) { const vector = pos.clone(); vector.project(camera); const x = (vector.x + 1) / 2 * renderer.domElement.clientWidth; const y = (-vector.y + 1) / 2 * renderer.domElement.clientHeight; return { x, y }; } // Simple UI chip interactions (filter views) document.getElementById('btn-overview').addEventListener('click', () => setMode('overview')); document.getElementById('btn-process').addEventListener('click', () => setMode('process')); document.getElementById('btn-3d').addEventListener('click', () => setMode('parts')); function setMode(mode) { document.querySelectorAll('.chip').forEach(c => c.classList.remove('active')); if (mode === 'overview') document.getElementById('btn-overview').classList.add('active'); if (mode === 'process') document.getElementById('btn-process').classList.add('active'); if (mode === 'parts') document.getElementById('btn-3d').classList.add('active'); // Basic camera presets to highlight different parts if (mode === 'overview') { animateCamera(new THREE.Vector3(18,12,18), new THREE.Vector3(0,3,0)); } else if (mode === 'process') { animateCamera(new THREE.Vector3(6,8,10), new THREE.Vector3(2,3,0)); } else if (mode === 'parts') { animateCamera(new THREE.Vector3(-2,4,6), new THREE.Vector3(-2,1,4)); } } // Smooth camera transition let camTween = null; function animateCamera(targetPos, targetLookAt) { if (camTween) camTween.active = false; const startPos = camera.position.clone(); const startTarget = targetLookAt ? camera.getWorldDirection(new THREE.Vector3()).add(camera.position) : null; const duration = 700; const start = performance.now(); camTween = { active: true }; (function tick(now) { if (!camTween.active) return; const t = Math.min(1, (now - start) / duration); const ease = t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t; camera.position.lerpVectors(startPos, targetPos, ease); const lookAt = targetLookAt; camera.lookAt(lookAt); if (t < 1) requestAnimationFrame(tick); })(start); } // Helper to update label positions on render function updateOnRender() { if (label.style.display === 'block') { // find the currently displayed label by its world reference via the last pick point recompute // For simplicity, keep it where it is; but try to nudge with camera movements by recomputing screen position from last raycast hit if stored } requestAnimationFrame(updateOnRender); } updateOnRender(); }