Caminhão Holográfico

Passe o mouse sobre o caminhão para desmontar. Remova o mouse para remontar.

import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import Truck from './truck.js'; // Renderer const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: false }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); document.body.appendChild(renderer.domElement); // Scene const scene = new THREE.Scene(); scene.background = new THREE.Color(0x05060a); // Camera const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 200); camera.position.set(6, 3, 8); // Controls const controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true; controls.dampingFactor = 0.08; // Lights const ambient = new THREE.AmbientLight(0x7aaeff, 0.35); scene.add(ambient); const keyLight = new THREE.DirectionalLight(0xbfe9ff, 1.0); keyLight.position.set(5, 8, 3); scene.add(keyLight); const rimLight = new THREE.DirectionalLight(0x66cfff, 0.6); rimLight.position.set(-4, 6, -6); scene.add(rimLight); // Grid / subtle ground reflection (a faint plane) const grid = new THREE.GridHelper(40, 40, 0x082033, 0x04121a); grid.material.opacity = 0.08; grid.material.transparent = true; scene.add(grid); // Create truck const truck = new Truck(); truck.group.rotation.y = -0.2; scene.add(truck.group); // Raycasting for hover const raycaster = new THREE.Raycaster(); const pointer = new THREE.Vector2(); let hovered = false; function onPointerMove(event) { const rect = renderer.domElement.getBoundingClientRect(); pointer.x = ((event.clientX - rect.left) / rect.width) * 2 - 1; pointer.y = -((event.clientY - rect.top) / rect.height) * 2 + 1; raycaster.setFromCamera(pointer, camera); const intersects = raycaster.intersectObjects(truck.pickableMeshes, true); if (intersects.length > 0) { if (!hovered) { hovered = true; truck.startDisassemble(); } } else { if (hovered) { hovered = false; truck.startAssemble(); } } } function onPointerLeave() { if (hovered) { hovered = false; truck.startAssemble(); } } renderer.domElement.addEventListener('pointermove', onPointerMove); renderer.domElement.addEventListener('pointerleave', onPointerLeave); 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(); // subtle floating animation const t = clock.elapsedTime; truck.group.position.y = Math.sin(t * 0.6) * 0.05; truck.update(dt); controls.update(); renderer.render(scene, camera); } animate(); import * as THREE from 'three'; export default class Truck { constructor() { this.group = new THREE.Group(); this.parts = []; // { mesh, orig, target, dir, distance, edge } this.pickableMeshes = []; this.progress = 0; // 0 = assembled, 1 = disassembled this.targetProgress = 0; this.speed = 2.4; // animation speed this._build(); } _holoMaterial() { return new THREE.MeshStandardMaterial({ color: 0x0a6bff, emissive: 0x46b8ff, emissiveIntensity: 0.9, metalness: 0.6, roughness: 0.12, transparent: true, opacity: 0.45, side: THREE.DoubleSide, blending: THREE.AdditiveBlending }); } _edgeMaterial() { return new THREE.LineBasicMaterial({ color: 0x81e2ff, transparent: true, opacity: 0.95, linewidth: 1 }); } _build() { // Truck base group const base = new THREE.Group(); base.position.set(0, 0, 0); // Cabin const cabinGeo = new THREE.BoxGeometry(1.6, 1.1, 1.4); const cabin = new THREE.Mesh(cabinGeo, this._holoMaterial()); cabin.position.set(-1.6, 0.85, 0); base.add(cabin); this._registerPart(cabin); // Trailer container const trailerGeo = new THREE.BoxGeometry(3.6, 1.5, 1.6); const trailer = new THREE.Mesh(trailerGeo, this._holoMaterial()); trailer.position.set(1.2, 0.95, 0); base.add(trailer); this._registerPart(trailer); // Roof detail - emitter strip const roofGeo = new THREE.BoxGeometry(1.64, 0.08, 1.44); const roof = new THREE.Mesh(roofGeo, this._holoMaterial()); roof.position.set(-1.6, 1.35, 0); base.add(roof); this._registerPart(roof); // Headlights const headGeo = new THREE.SphereGeometry(0.12, 12, 12); const headL = new THREE.Mesh(headGeo, this._holoMaterial()); headL.position.set(-0.45, 0.7, 0.72); base.add(headL); this._registerPart(headL); const headR = headL.clone(); headR.position.set(-0.45, 0.7, -0.72); base.add(headR); this._registerPart(headR); // Rear lights const rearL = new THREE.Mesh(headGeo, this._holoMaterial()); rearL.position.set(2.9, 0.7, 0.72); base.add(rearL); this._registerPart(rearL); const rearR = rearL.clone(); rearR.position.set(2.9, 0.7, -0.72); base.add(rearR); this._registerPart(rearR); // Wheels const wheelGeo = new THREE.CylinderGeometry(0.36, 0.36, 0.6, 28); wheelGeo.rotateZ(Math.PI / 2); const wheelMat = this._holoMaterial(); const wheelPositions = [ [-1.1, 0.28, 1.02], [-1.1, 0.28, -1.02], [0.8, 0.28, 1.02], [0.8, 0.28, -1.02], [2.3, 0.28, 1.02], [2.3, 0.28, -1.02] ]; wheelPositions.forEach(pos => { const w = new THREE.Mesh(wheelGeo, wheelMat); w.position.set(pos[0], pos[1], pos[2]); base.add(w); this._registerPart(w); }); // Small detail: grill / bumper const grillGeo = new THREE.BoxGeometry(0.5, 0.5, 1.2); const grill = new THREE.Mesh(grillGeo, this._holoMaterial()); grill.position.set(-0.95, 0.55, 0); base.add(grill); this._registerPart(grill); // Add edges (holographic wireframe) around major parts this.parts.forEach(p => { const edges = new THREE.EdgesGeometry(p.mesh.geometry); const line = new THREE.LineSegments(edges, this._edgeMaterial()); line.matrixAutoUpdate = false; // ensure edges follow mesh transform p.mesh.add(line); p.edge = line; }); // Slightly scale down and center base.scale.set(0.95, 0.95, 0.95); this.group.add(base); } _registerPart(mesh) { mesh.userData.isTruckPart = true; // store original world position relative to group const orig = mesh.position.clone(); // random direction for disassembly const dir = new THREE.Vector3(Math.random() - 0.5, Math.random() * 0.9 + 0.2, Math.random() - 0.5).normalize(); // distance depends on mesh size const bb = new THREE.Box3().setFromObject(mesh); const size = new THREE.Vector3(); bb.getSize(size); const scale = Math.max(size.x, size.y, size.z); const distance = (0.9 + Math.random() * 1.8) * scale * 2.2; this.parts.push({ mesh, orig, dir, distance, target: orig.clone().addScaledVector(dir, distance), edge: null }); this.pickableMeshes.push(mesh); } startDisassemble() { this.targetProgress = 1; } startAssemble() { this.targetProgress = 0; } update(dt) { // animate progress toward targetProgress if (Math.abs(this.progress - this.targetProgress) > 1e-4) { const dir = this.targetProgress > this.progress ? 1 : -1; this.progress += dir * this.speed * dt; this.progress = THREE.MathUtils.clamp(this.progress, 0, 1); } // easing (smoothstep) const p = this._smoothstep(this.progress); // update parts positions and subtle rotation this.parts.forEach((pinfo, i) => { const mesh = pinfo.mesh; // interpolate positions mesh.position.lerpVectors(pinfo.orig, pinfo.target, p); // rotate a bit as it moves const rotAmount = p * 1.2; mesh.rotation.x = rotAmount * (0.15 * (i % 2 === 0 ? 1 : -1)); mesh.rotation.z = rotAmount * (0.18 * (i % 3 === 0 ? 1 : -1)); // edges (if any) keep same transform since they are children if (pinfo.edge) { // edge is child - update its matrix manually to remain aligned pinfo.edge.visible = true; } }); } _smoothstep(x) { // smoother step for nicer animation return x * x * (3 - 2 * x); } }