锦旗随风飘扬脚本

const windForce = new THREE.Vector3(0, 0, 0); const GRAVITY = 1000; let intersectionPoint = new THREE.Vector3(1000,1000,1000); let start = Date.now(); let container; let camera, scene, renderer; let flag1, flag2, flag3; let plane; let ray, mouse, mousereleaseInterval, mousemoved = false; const dimensions = { x: 600, y: 380 }; class Vertex { constructor(x, y, z, mass, drag, geoSolver) { this.position = new THREE.Vector3(); this.previous = new THREE.Vector3(); this.original = new THREE.Vector3(); this.a = new THREE.Vector3(0, 0, 0); // acceleration this.mass = mass; this.drag = drag; this.invMass = 1 / mass; this.tmp = new THREE.Vector3(); this.tmp2 = new THREE.Vector3(); // init geoSolver(x, y, this.position); // position geoSolver(x, y, this.previous); // previous geoSolver(x, y, this.original); } addForce(force) { this.a.add( this.tmp2.copy(force).multiplyScalar(this.invMass) ); } integrate(timesq) { let newPos = this.tmp.subVectors(this.position, this.previous); newPos.multiplyScalar(this.drag).add(this.position); newPos.add(this.a.multiplyScalar(timesq)); this.tmp = this.previous; this.previous = this.position; this.position = newPos; this.a.set(0, 0, 0); } reset(x, y, z, geoSolver) { this.position.x = this.original.x; this.position.y = this.original.y; this.position.z = this.original.z; this.previous.x = this.original.x; this.previous.y = this.original.y; this.previous.z = this.original.z; } } var diff = new THREE.Vector3(); class Flag { constructor(w, h, x, y, textureURL) { // Set up the basic requirements // --------------------------------------------------------------------------- this._particles = []; this._constraints = []; this._pins = Array.from({length:11},(v,k)=>k); // this._pins = [0, 1, 2, 3, 5, 10]; let timestep = 18 / 1000; this.timestepSq = timestep * timestep; // If we ever have a setter for mass or gravity, this should also be set there this._gravity = new THREE.Vector3(0, -GRAVITY, 0).multiplyScalar(this.mass); this.tempV3 = new THREE.Vector3(); this.width = w; this.height = h; // Initialise the particles // --------------------------------------------------------------------------- this.initialiseParticles(); // Set up the three JS stuff // --------------------------------------------------------------------------- var loader = new THREE.TextureLoader(); var clothTexture = loader.load( textureURL ); clothTexture.flipY = false; this.clothMaterial = new THREE.MeshStandardMaterial( { map: clothTexture, side: THREE.DoubleSide, metalness: .4, roughness: .6, bumpMap: clothTexture, transparent: true } ); this.geometry = new THREE.ParametricBufferGeometry( this.geoSolver, this.segs[0], this.segs[1] ); this.mesh = new THREE.Mesh( this.geometry, this.clothMaterial ); this.mesh.position.set(x,y,0); } reset() { this.particles.forEach((particle, i) => { particle.reset(); }); } initialiseParticles() { let u, v; // Create particles for (v = 0; v { mousemoved = false; intersectionPoint = new THREE.Vector3(1000,1000,1000); }, 1000); mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1; mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1; } window.addEventListener( 'mousemove', onMouseMove, false ); // renderer renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } ); renderer.setPixelRatio( 2 ); renderer.setSize( window.innerWidth, window.innerHeight ); container.appendChild( renderer.domElement ); renderer.gammaInput = true; renderer.gammaOutput = true; renderer.shadowMap.enabled = true; window.addEventListener( 'resize', onWindowResize, false ); } function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize( window.innerWidth, window.innerHeight ); } function animate(t) { requestAnimationFrame( animate ); let time = Date.now() - start; windStrength = Math.cos( time * .001 ) * 10 + 5; if(flag1.clothMaterial.opacity < 1) flag1.clothMaterial.opacity += 0.009; windForce.set( Math.sin( time / 2000 ), Math.cos( time / 3000 ), Math.sin( time / 1000 ) ) windForce.normalize() windForce.multiplyScalar( windStrength ); flag1.solve( time ); flag1.render(); // Raycasting // update the picking ray with the camera and mouse position if(mousemoved) { ray.setFromCamera( mouse, camera ); // calculate objects intersecting the picking ray var intersects = ray.intersectObject( plane, false ); window.plane = plane; window.intersects = intersects; if(intersects.length) { intersectionPoint = intersects[0].point; } } renderer.render( scene, camera ); }