حديقة الفراشة

حديقة الفراشة — فراشة تطير فوق الأزهار مع أضواء ليلية ونسيم متحرك

import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import { createScene, createRenderer, createCamera, addLights } from './scene.js'; import { Flowers } from './flowers.js'; import { Butterfly } from './butterfly.js'; import { addSky } from './sky.js'; import { Fireflies } from './effects.js'; // Renderer, scene, camera const renderer = createRenderer(); document.body.appendChild(renderer.domElement); const scene = createScene(); const camera = createCamera(); addLights(scene); // Controls const controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true; controls.dampingFactor = 0.08; controls.minDistance = 5; controls.maxDistance = 60; controls.target.set(0, 1.5, 0); // Sky / background dome addSky(scene); // Ground const ground = new THREE.Mesh( new THREE.PlaneGeometry(400, 400), new THREE.MeshStandardMaterial({ color: 0x0b3a19, roughness: 1 }) ); ground.rotation.x = -Math.PI / 2; ground.receiveShadow = true; scene.add(ground); // Flowers const flowers = new Flowers(scene, { count: 420, radius: 35 }); // Fireflies const fireflies = new Fireflies(scene, { count: 80, areaRadius: 35 }); // Butterfly const butterfly = new Butterfly(scene, { speed: 0.008, size: 0.9 }); butterfly.setWaypoints(flowers.getPositions()); // Fog scene.fog = new THREE.FogExp2(0x0b2430, 0.015); // Resize handling function onResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); } window.addEventListener('resize', onResize, false); onResize(); // Animation loop const clock = new THREE.Clock(); function animate() { requestAnimationFrame(animate); const time = clock.getElapsedTime(); const delta = clock.getDelta(); flowers.update(time); fireflies.update(time, delta); butterfly.update(time, delta); controls.update(); renderer.render(scene, camera); } animate(); import * as THREE from 'three'; export function createRenderer() { const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; renderer.outputColorSpace = THREE.SRGBColorSpace; return renderer; } export function createScene() { const scene = new THREE.Scene(); scene.background = new THREE.Color(0x7fbfff); // fallback return scene; } export function createCamera() { const camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 1000 ); camera.position.set(8, 6, 18); return camera; } export function addLights(scene) { const hemi = new THREE.HemisphereLight(0xfff6e6, 0x444455, 0.6); scene.add(hemi); const sun = new THREE.DirectionalLight(0xfff5cc, 1.0); sun.position.set(20, 40, 10); sun.castShadow = true; sun.shadow.camera.left = -40; sun.shadow.camera.right = 40; sun.shadow.camera.top = 40; sun.shadow.camera.bottom = -40; sun.shadow.mapSize.set(2048, 2048); scene.add(sun); // subtle fill const fill = new THREE.PointLight(0x99d8ff, 0.2); fill.position.set(-10, 5, -10); scene.add(fill); } import * as THREE from 'three'; export class Flowers { constructor(scene, options = {}) { this.scene = scene; this.count = options.count || 300; this.radius = options.radius || 30; this.positions = []; this._createInstancedFlowers(); } _createInstancedFlowers() { // Stem instanced const stemGeo = new THREE.CylinderGeometry(0.03, 0.05, 1, 6); const stemMat = new THREE.MeshStandardMaterial({ color: 0x2a8f51, roughness: 0.9 }); this.stems = new THREE.InstancedMesh(stemGeo, stemMat, this.count); this.stems.castShadow = true; this.stems.receiveShadow = false; // Flower head instanced (simple sphere with varying colors) const headGeo = new THREE.SphereGeometry(0.15, 8, 8); const headMat = new THREE.MeshStandardMaterial({ roughness: 0.5, metalness: 0.1 }); this.heads = new THREE.InstancedMesh(headGeo, headMat, this.count); this.heads.castShadow = true; const dummy = new THREE.Object3D(); const colors = [0xff9dc6, 0xfff07a, 0xffb86b, 0x8af1ff, 0xc3ff8a]; const colorAttr = []; for (let i = 0; i < this.count; i++) { const angle = Math.random() * Math.PI * 2; const r = Math.sqrt(Math.random()) * this.radius; const x = Math.cos(angle) * r + (Math.random() - 0.5) * 2; const z = Math.sin(angle) * r + (Math.random() - 0.5) * 2; const y = 0; const height = 0.8 + Math.random() * 1.2; // Stem transform dummy.position.set(x, y + height / 2, z); dummy.scale.set(1, height, 1); dummy.rotation.z = (Math.random() - 0.5) * 0.3; dummy.updateMatrix(); this.stems.setMatrixAt(i, dummy.matrix); // Head transform dummy.position.set(x, y + height + 0.12, z); const s = 0.7 + Math.random() * 0.9; dummy.scale.set(s, s, s); dummy.rotation.set(0, Math.random() * Math.PI * 2, 0); dummy.updateMatrix(); this.heads.setMatrixAt(i, dummy.matrix); // head color variation by using instance color (via material.clone) const color = new THREE.Color(colors[Math.floor(Math.random() * colors.length)]); color.lerp(new THREE.Color(0xffffff), Math.random() * 0.3); colorAttr.push(color); this.positions.push(new THREE.Vector3(x, y + height + 0.12, z)); } // Convert color array to instance color via InstancedMesh.setColorAt if available if (this.heads.instanceColor === null) { const instColors = []; for (let c of colorAttr) { instColors.push(c.r, c.g, c.b); } const colorBuffer = new Float32Array(instColors); this.heads.instanceColor = new THREE.InstancedBufferAttribute(colorBuffer, 3); } else { for (let i = 0; i < colorAttr.length; i++) { this.heads.setColorAt(i, colorAttr[i]); } } this.stems.instanceMatrix.needsUpdate = true; this.heads.instanceMatrix.needsUpdate = true; if (this.heads.instanceColor) this.heads.instanceColor.needsUpdate = true; this.scene.add(this.stems); this.scene.add(this.heads); } getPositions() { return this.positions; } update(time) { // gentle sway by updating instance matrices for heads/stems const dummy = new THREE.Object3D(); for (let i = 0; i < this.count; i++) { const pos = this.positions[i]; // simple noise-like sway const sway = Math.sin(time * 1.2 + i) * 0.06; const tilt = Math.cos(time * 0.9 + i * 1.3) * 0.04; // Stem: reposition with slight tilt dummy.position.set(pos.x, pos.y - 0.9, pos.z); dummy.scale.set(1, 1.0 + (pos.y % 1) * 0.2, 1); dummy.rotation.set(tilt, 0, sway); dummy.updateMatrix(); this.stems.setMatrixAt(i, dummy.matrix); // Head: small bob dummy.position.set(pos.x + sway * 4, pos.y + Math.sin(time * 2 + i) * 0.03, pos.z + tilt * 4); const s = 0.8 + (Math.sin(i + time * 3) + 1) * 0.12; dummy.scale.set(s, s, s); dummy.rotation.set(0, Math.sin(time + i) * 0.2, 0); dummy.updateMatrix(); this.heads.setMatrixAt(i, dummy.matrix); } this.stems.instanceMatrix.needsUpdate = true; this.heads.instanceMatrix.needsUpdate = true; } } import * as THREE from 'three'; export class Butterfly { constructor(scene, options = {}) { this.scene = scene; this.speed = options.speed || 0.01; this.size = options.size || 1; this.waypoints = []; this._createButterfly(); this.t = 0; this.targetIndex = 0; this.wanderTimer = 0; } _createButterfly() { this.group = new THREE.Group(); // body const bodyMat = new THREE.MeshStandardMaterial({ color: 0x1a1a1a, roughness: 0.3, metalness: 0.1 }); const bodyGeo = new THREE.CapsuleGeometry(0.08, 0.5, 3, 8); this.body = new THREE.Mesh(bodyGeo, bodyMat); this.body.rotation.z = Math.PI / 2; this.body.castShadow = true; this.group.add(this.body); // wings const wingGeo = new THREE.PlaneGeometry(0.9, 0.6, 4, 2); const wingMat = new THREE.MeshStandardMaterial({ color: 0xff66b3, side: THREE.DoubleSide, roughness: 0.6, metalness: 0.05, transparent: true, opacity: 0.98 }); this.leftWing = new THREE.Mesh(wingGeo, wingMat.clone()); this.rightWing = new THREE.Mesh(wingGeo, wingMat.clone()); // shape tweak and position this.leftWing.geometry.applyMatrix4(new THREE.Matrix4().makeRotationY(Math.PI / 2)); this.rightWing.geometry.applyMatrix4(new THREE.Matrix4().makeRotationY(-Math.PI / 2)); this.leftWing.position.set(-0.15, 0, 0); this.rightWing.position.set(0.15, 0, 0); // pivot groups so wings rotate around inner edge this.leftPivot = new THREE.Group(); this.rightPivot = new THREE.Group(); this.leftPivot.add(this.leftWing); this.rightPivot.add(this.rightWing); this.leftWing.position.set(-0.45, 0, 0); this.rightWing.position.set(0.45, 0, 0); this.leftPivot.position.set(-0.15, 0, 0); this.rightPivot.position.set(0.15, 0, 0); this.group.add(this.leftPivot); this.group.add(this.rightPivot); // antenna const antennaMat = new THREE.MeshStandardMaterial({ color: 0x222222, roughness: 0.6 }); const antennaGeo = new THREE.TubeGeometry(new THREE.CatmullRomCurve3([ new THREE.Vector3(0.12, 0.2, 0), new THREE.Vector3(0.45, 0.4, 0.06) ]).getPoints(20), 20, 0.01, 8, false); const ant1 = new THREE.Mesh(antennaGeo, antennaMat); ant1.position.set(0, 0.15, 0.05); ant1.rotation.z = -0.5; this.group.add(ant1); const antennaGeo2 = antennaGeo.clone(); const ant2 = new THREE.Mesh(antennaGeo2, antennaMat); ant2.position.set(0, 0.15, -0.05); ant2.rotation.z = 0.5; this.group.add(ant2); this.group.scale.setScalar(this.size); this.group.castShadow = true; this.group.position.set(0, 2, 0); this.scene.add(this.group); // give wings subtle pattern via vertex colors this._paintWings(); } _paintWings() { const colorLeft = new THREE.Color(0xff66b3); const colorRight = new THREE.Color(0x66d4ff); const leftColors = []; const posAttr = this.leftWing.geometry.attributes.position; for (let i = 0; i < posAttr.count; i++) { const v = posAttr.getY(i); const mix = THREE.MathUtils.clamp((v + 0.3), 0, 1); const c = colorLeft.clone().lerp(new THREE.Color(0xffffff), 1 - mix); leftColors.push(c.r, c.g, c.b); } this.leftWing.geometry.setAttribute('color', new THREE.Float32BufferAttribute(leftColors, 3)); this.leftWing.material.vertexColors = true; const rightColors = []; const posAttrR = this.rightWing.geometry.attributes.position; for (let i = 0; i < posAttrR.count; i++) { const v = posAttrR.getY(i); const mix = THREE.MathUtils.clamp((v + 0.3), 0, 1); const c = colorRight.clone().lerp(new THREE.Color(0xffffff), 1 - mix); rightColors.push(c.r, c.g, c.b); } this.rightWing.geometry.setAttribute('color', new THREE.Float32BufferAttribute(rightColors, 3)); this.rightWing.material.vertexColors = true; } setWaypoints(points = []) { // convert Vector3 array to internal points (shallow copy) this.waypoints = points.slice(); if (this.waypoints.length === 0) { // fallback simple circuit for (let i = 0; i < 8; i++) { const a = (i / 8) * Math.PI * 2; this.waypoints.push(new THREE.Vector3(Math.cos(a) * 10, 1.5 + Math.sin(a) * 1.5, Math.sin(a) * 10)); } } // add interpolation curve this._makeCurve(); } _makeCurve() { if (this.waypoints.length < 2) return; const pts = this.waypoints.map(p => p.clone().add(new THREE.Vector3( (Math.random() - 0.5) * 1.2, (Math.random() - 0.5) * 0.6, (Math.random() - 0.5) * 1.2 ))); this.curve = new THREE.CatmullRomCurve3(pts, true, 'catmullrom', 0.5); } update(time, delta) { // wing flap const flapSpeed = 12 + Math.sin(time * 0.5) * 2; const flap = Math.sin(time * flapSpeed) * 0.8 + 0.8; this.leftPivot.rotation.z = -flap * 0.9; this.rightPivot.rotation.z = flap * 0.9; // progress along curve if (this.curve) { this.t += this.speed; if (this.t > 1) this.t = 0; const pos = this.curve.getPointAt(this.t); const tangent = this.curve.getTangentAt(this.t).normalize(); this.group.position.copy(pos); // orient to direction with slight tilt and roll const up = new THREE.Vector3(0, 1, 0); const axis = new THREE.Vector3().crossVectors(up, tangent).normalize(); const angle = Math.acos(up.dot(tangent)); const quat = new THREE.Quaternion().setFromAxisAngle(axis, angle); // blend with a forward facing rotation for a natural tilt this.group.quaternion.slerp(quat, 0.5); // small hovering bob this.group.position.y += Math.sin(time * 3.0 + this.t * Math.PI * 2) * 0.12; } else { // idle hover this.group.position.y = 1.8 + Math.sin(time * 1.8) * 0.15; } } } import * as THREE from 'three'; export function addSky(scene) { // simple gradient skydome using shader material const geo = new THREE.SphereGeometry(200, 32, 15); geo.scale(-1, 1, 1); const mat = new THREE.ShaderMaterial({ uniforms: { topColor: { value: new THREE.Color(0x9ad1ff) }, bottomColor: { value: new THREE.Color(0x0b2430) }, offset: { value: 0.5 }, exponent: { value: 0.6 } }, vertexShader: ` varying vec3 vWorldPosition; void main() { vec4 worldPosition = modelMatrix * vec4(position, 1.0); vWorldPosition = worldPosition.xyz; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `, fragmentShader: ` uniform vec3 topColor; uniform vec3 bottomColor; uniform float offset; uniform float exponent; varying vec3 vWorldPosition; void main() { float h = normalize(vWorldPosition + vec3(0.0, offset, 0.0)).y; float t = pow(max(0.0, h), exponent); gl_FragColor = vec4(mix(bottomColor, topColor, t), 1.0); } `, side: THREE.BackSide, depthWrite: false }); const dome = new THREE.Mesh(geo, mat); scene.add(dome); } import * as THREE from 'three'; export class Fireflies { constructor(scene, options = {}) { this.scene = scene; this.count = options.count || 60; this.radius = options.areaRadius || 25; this._create(); } _create() { const geometry = new THREE.BufferGeometry(); const positions = new Float32Array(this.count * 3); const sizes = new Float32Array(this.count); for (let i = 0; i < this.count; i++) { const theta = Math.random() * Math.PI * 2; const r = Math.sqrt(Math.random()) * this.radius; const x = Math.cos(theta) * r + (Math.random() - 0.5) * 6; const z = Math.sin(theta) * r + (Math.random() - 0.5) * 6; const y = 1 + Math.random() * 4; positions[i * 3] = x; positions[i * 3 + 1] = y; positions[i * 3 + 2] = z; sizes[i] = 4 + Math.random() * 8; } geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3)); geometry.setAttribute('size', new THREE.BufferAttribute(sizes, 1)); const material = new THREE.ShaderMaterial({ transparent: true, blending: THREE.AdditiveBlending, depthWrite: false, uniforms: { pointTexture: { value: null }, time: { value: 0 } }, vertexShader: ` attribute float size; varying float vAlpha; uniform float time; void main() { vAlpha = 0.5 + 0.5 * sin(time * 4.0 + position.x * 0.1 + position.y * 0.3); vec4 mvPosition = modelViewMatrix * vec4(position, 1.0); gl_PointSize = size * (300.0 / -mvPosition.z); gl_Position = projectionMatrix * mvPosition; } `, fragmentShader: ` varying float vAlpha; void main() { float dist = length(gl_PointCoord - vec2(0.5)); float a = smoothstep(0.5, 0.0, dist); gl_FragColor = vec4(vec3(1.0, 0.9, 0.6), a * vAlpha); } ` }); this.points = new THREE.Points(geometry, material); this.points.frustumCulled = false; this.scene.add(this.points); } update(time) { this.points.material.uniforms.time.value = time; // slow drift const positions = this.points.geometry.attributes.position.array; for (let i = 0; i < positions.length; i += 3) { positions[i + 1] += Math.sin(time * 0.2 + i) * 0.0008; } this.points.geometry.attributes.position.needsUpdate = true; } }