three实现三维紫色六边形网格墙伸缩动画效果代码
代码语言:html
所属分类:动画
代码描述:three实现三维紫色六边形网格墙伸缩动画效果代码
代码标签: three 三维 紫色 六边形 网格 墙 伸缩 动画
下面为部分代码预览,完整代码请点击下载或在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.133.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.133.js"></script> <script type="module" > let scene = new THREE.Scene(); let camera = new THREE.PerspectiveCamera(75, innerWidth / innerHeight, 1, 1000); camera.position.set(5, -3, 0).setLength(5); let renderer = new THREE.WebGLRenderer({antialias: true}); renderer.setSize(innerWidth, innerHeight); renderer.setClearColor(new THREE.Color(1, 0.875, 0.75)); document.body.appendChild(renderer.domElement); let controls = new THREE.OrbitControls(camera, renderer.domElement); controls.enableDamping = true; controls.enablePan = false; controls.minPolarAngle = THREE.MathUtils.degToRad(75); controls.maxPolarAngle = THREE.MathUtils.degToRad(105); controls.minAzimuthAngle = THREE.MathUtils.degToRad(75); controls.maxAzimuthAngle = THREE.MathUtils.degToRad(105); controls.minDistance = 5; controls.maxDistance = 10; let light = new THREE.DirectionalLight(0xffffff, 1); light.position.set(13, 8, 0); scene.add(light, new THREE.AmbientLight(0xffffff, 0.5)); const circleCount = 50; let baseG = new THREE.CylinderGeometry(0.5, 0.5, 1, 6); baseG.translate(0, 0.5, 0); for(let i = 0; i < baseG.attributes.uv.count; i++){ baseG.attributes.uv.setY(i, baseG.attributes.position.getY(i)); } baseG.translate(0, -0.5, 0); baseG.scale(1, 10, 1); baseG.rotateX(Math.PI * 0.5); let g = new THREE.InstancedBufferGeometry().copy(baseG); g.instanceCount = ((circleCount * (circleCount + 1)) / 2) * 6 + 1; console.log(g.instanceCount); let iPos = hexagridFormation(circleCount); g.setAttribute("instPos", new THREE.InstancedBufferAttribute(iPos, 3)); let moveData = []; //phase, speed for(let i = 0; i < g.instanceCount; i++){ moveData.push( Math.PI * 2 * Math.random(), Math.random() * 0.5 + 0.5 ); } g.setAttribute("moveData", new THREE.InstancedBufferAttribute(new Float32Array(moveData), 2)); let uniforms = { time: {value: 0} } let m = new THREE.MeshStandardMaterial({ color: 0x222244, roughness: 0.6, metalness: 0.8, onBeforeCompile: shad.........完整代码请登录后点击上方下载按钮下载查看
网友评论0