three实现三维萤火虫漂浮动画效果代码
代码语言:html
所属分类:动画
代码描述:three实现三维萤火虫漂浮动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { margin: 0; } #world { position: absolute; overflow: hidden; width: 100%; height: 100%; } </style> </head> <body > <div id="world"></div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.88.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.min.js"></script> <script > 'use strict'; let scene, camera, renderer, controls, width, height; let ground, dotSystem, jar; let jarFireflies = [], fireflies = []; function init() { width = window.innerWidth, height = window.innerHeight; scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000); camera.lookAt(scene.position); camera.position.z = 500; renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(width, height); renderer.setClearColor(0x000A3D); renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; // controls = new THREE.OrbitControls(camera, renderer.domElement); addLights(); drawGround(); drawDotSystem(); drawJar(); drawFireflies(); document.getElementById('world').appendChild(renderer.domElement); window.addEventListener('resize', onResize, false); } function addLights() { const ambientLight = new THREE.AmbientLight(0xCCD5FF, 0.8); scene.add(ambientLight); const directLight = new THREE.DirectionalLight(0xE1FEA4, 0.5); directLight.castShadow = true; directLight.position.set(200, 200, 200); scene.add(directLight); const pointLight = new THREE.PointLight(0xFF007B, 0.4); pointLight.castShadow = true; pointLight.position.set(-100, 100, 100); scene.add(pointLight); } function drawGround() { const geometry = new THREE.TetrahedronGeometry(200, 2); const material = new THREE.MeshPhongMaterial({ color: 0x0A9381, shading: THREE.FlatShading }); ground = new THREE.Mesh(geometry, material); ground.scale.set(3, 1, 2); ground.position.y = -305; ground.castShadow = true; ground.receiveShadow = true; scene.add(ground); } function drawDotSystem() { dotSystem = new THREE.Group(); scene.add(dotSystem); const system1 = new DotSystem({ intensity: 3000, color: 0xE1FEA4, xSpread: 800, ySpread: 800, zSpread: 800 }); dotSystem.add(system1.group); const system2 = new DotSystem({ intensity: 100, color: 0xFF007B, xSpread: 300, ySpread: 500, zSpread: 400, size: 13 }); system2.group.position.set(-100, -80, 0); dotSystem.add(system2.group); } function drawJar() { jar = new THREE.Group(); jar.position.set(-100, -10, 20); jar.rotation.z = 0.1; scene.add(jar); const jarGeometry = new THREE.CylinderGeometry(100, 110, 200, 10); const jarMaterial = new THREE.MeshPhongMaterial({ color: 0xA9B8FC, transparent: true, opacity: 0.5, depthWrite: false, shading: THREE.FlatShading }); const body = new THREE.Mesh(jarGeometry, jarMaterial); body.castShadow = true; body.receiveShadow = true; jar.add(body); const capGeometry = new THREE.CylinderGeometry(100, 100, 30, 10); const capMaterial = jarMaterial.clone(); capMaterial.opacity = 0.8; const cap = new THREE.Mesh(capGeometry, capMaterial); cap.castShadow = true; cap.receiveShadow = true; cap.position.set(38, 110, 0); cap.rotation.z = 0.13; jar.add(cap); const bottomGeometry = new THREE.CylinderGeometry(110, 110, 20, 10); const bottom = new THREE.Mesh(bottomGeometry, jarMaterial); bottom.castShadow = true; bottom.receiveShadow = true; bottom.position.y = -110; jar.add(bottom); } function drawFireflies() { const randSpread = pos => THREE.Math.randFloatSpread(pos); const rand = (min, max) => THREE.Math.randFloat(min, max); for (let i = 0; i < 4; i += 1) { const firefly = new Fly({ light: false, bodyColor: 0x5363B2, wingColor: 0xA9B8FC, lightColor: 0x00FFA5 }); firefly.group.position.set(randSpread(160), randSpread(190), randSpread(160)); const scale = rand(0.4, 0.8); firefly.group.scale.set(scale, scale, scale); jar.add(firefly.group); jarFireflies.push(firefly); } for (let i = 0; i < 5; i += 1) { const firefly = new Fly({ light: true, bodyColor: 0x5363B2, wingColor: 0xA9B8FC, .........完整代码请登录后点击上方下载按钮下载查看
网友评论0