three+webgl实现三维红色雪花落下动画效果代码
代码语言:html
所属分类:三维
代码描述:three+webgl实现三维红色雪花落下动画效果代码
代码标签: three webgl 三维 红色 雪花 落下 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body{ overflow: hidden; margin: 0; } </style> </head> <body > <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.143.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.143.js"></script> <script> let scene = new THREE.Scene(); scene.background = new THREE.Color(0x240024); let camera = new THREE.PerspectiveCamera(45, innerWidth / innerHeight, 1, 1000); camera.position.set(0, 0, 7); let renderer = new THREE.WebGLRenderer(); renderer.setSize(innerWidth, innerHeight); document.body.appendChild(renderer.domElement); window.addEventListener("resize", event => { camera.aspect = innerWidth / innerHeight; camera.updateProjectionMatrix(); renderer.setSize(innerWidth, innerHeight); }); let controls = new THREE.OrbitControls(camera, renderer.domElement); controls.enableDamping = true; controls.enablePan = false; let gu = { time: { value: 0 } }; let flakeData = []; let g = new THREE.BufferGeometry().setFromPoints(new Array(1000).fill().map(_ => { flakeData.push(Math.random() < 0.5 ? -1 : 1, 0, 0, 0); return new THREE.Vector3().random().subScalar(0.5).multiplyScalar(10); })); g.setAttribute("flakeData", new THREE.Float32BufferAttribute(flakeData, 4)); let m = new THREE.PointsMaterial({ color: 0xfbec5d, size: 0.75, onBeforeCompile: shader => { shader.uniforms.time = gu.time; shader.vertexShader = ` uniform float time; attribute vec4 flakeData; varying vec4 vFlakeData; varying float vId; ${shader.vertexShader} `.replace( `#include <begin_vertex>`, `#include <begin_vertex> vId = float(gl_VertexID); vFlakeData = flakeData; vec3 p = vec3(position); transformed.y = 5. - mod(p.y + time - 5., 10.); `); //console.log(shader.vertexShader) shader.fragmentShader = ` uniform float time; varying vec4 vFlakeData; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0