three实现多种闪电动画效果代码
代码语言:html
所属分类:三维
代码描述:three实现多种闪电动画效果代码,可调节参数实现不同的闪电效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> </head> <body> <div id="container"></div> <div id="info"> webgl - lightning strike</div> <!-- Import maps polyfill --> <!-- Remove this when import maps will be widely supported --> <script async type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/es-module-shims.1.3.6.js"></script> <script type="importmap"> { "imports": { "three": "//repo.bfw.wiki/bfwtool/build/three.module.js" } } </script> <script type="module"> import * as THREE from 'three'; import Stats from '//repo.bfw.wiki/bfwtool/examples/jsm/libs/stats.module.js'; import { GUI } from '//repo.bfw.wiki/bfwtool/examples/jsm/libs/lil-gui.module.min.js'; import { OrbitControls } from '//repo.bfw.wiki/bfwtool/examples/jsm/controls/OrbitControls.js'; import { LightningStrike } from '//repo.bfw.wiki/bfwtool/examples/jsm/geometries/LightningStrike.js'; import { LightningStorm } from '//repo.bfw.wiki/bfwtool/examples/jsm/objects/LightningStorm.js'; import { EffectComposer } from '//repo.bfw.wiki/bfwtool/examples/jsm/postprocessing/EffectComposer.js'; import { RenderPass } from '//repo.bfw.wiki/bfwtool/examples/jsm/postprocessing/RenderPass.js'; import { OutlinePass } from '//repo.bfw.wiki/bfwtool/examples/jsm/postprocessing/OutlinePass.js'; let container, stats; let scene, renderer, composer, gui; let currentSceneIndex = 0; let currentTime = 0; const sceneCreators = [ createConesScene, createPlasmaBallScene, createStormScene ]; const clock = new THREE.Clock(); const raycaster = new THREE.Raycaster(); const mouse = new THREE.Vector2(); init(); animate(); function init() { container = document.getElementById( 'container' ); renderer = new THREE.WebGLRenderer(); renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize( window.innerWidth, window.innerHeight ); renderer.outputEncoding = THREE.sRGBEncoding; container.appendChild( renderer.domElement ); composer = new EffectComposer( renderer ); stats = new Stats(); container.appendChild( stats.dom ); window.addEventListener( 'resize', onWindowResize ); createScene(); } function createScene() { scene = sceneCreators[ currentSceneIndex ](); createGUI(); } function onWindowResize() { scene.userData.camera.aspect = window.innerWidth / window.innerHeight; scene.userData.camera.updateProjectionMatrix(); renderer.setSize( window.innerWidth, window.innerHeight ); composer.setSize( window.innerWidth, window.innerHeight ); } // function createGUI() { if ( gui ) { gui.destroy(); } gui = new GUI( { width: 315 } ); const sceneFolder = gui.addFolder( 'Scene' ); scene.userData.sceneIndex = currentSceneIndex; sceneFolder.add( scene.userData, 'sceneIndex', { 'Electric Cones': 0, 'Plasma Ball': 1, 'Storm': 2 } ).name( 'Scene' ).onChange( function ( value ) { currentSceneIndex = value; createScene(); } ); scene.userData.timeRate = 1; sceneFolder.add( scene.userData, 'timeRate', scene.userData.canGoBackwardsInTime ? - 1 : 0, 1 ).name( 'Time rate' ); sceneFolder.open(); const graphicsFolder = gui.addFolder( 'Graphics' ); graphicsFolder.add( scene.userData, 'outlineEnabled' ).name( 'Glow enabled' ); scene.userData.lightningColorRGB = [ scene.userData.lightningColor.r * 255, scene.userData.lightningColor.g * 255, scene.userData.lightningColor.b * 255 ]; graphicsFolder.addColor( scene.userData, 'lightningColorRGB' ).name( 'Color' ).onChange( function ( value ) { scene.userData.lightningMaterial.color.setRGB( value[ 0 ], value[ 1 ], value[ 2 ] ).multiplyScalar( 1 / 255 ); } ); scene.userData.outlineColorRGB = [ scene.userData.outlineColor.r * 255, scene.userData.outlineColor.g * 255, scene.userData.outlineColor.b * 255 ]; graphicsFolder.addColor( scene.userData, 'outlineColorRGB' ).name( 'Glow color' ).onChange( function ( value ) { scene.userData.outlineColor.setRGB( value[ 0 ], value[ 1 ], value[ 2 ] ).multiplyScalar( 1 / 255 ); } ); graphicsFolder.open(); const rayFolder = gui.addFolder( 'Ray parameters' ); rayFolder.add( scene.userData.rayParams, 'straightness', 0, 1 ).name( 'Straightness' ); rayFolder.add( scene.userData.rayParams, 'roughness', 0, 1 ).name( 'Roughness' ); rayFolder.add( scene.userData.rayParams, 'radius0', 0.1, 10 ).name( 'Initial radius' ); rayFolder.add( scene.userData.rayParams, 'radius1', 0.1, 10 ).name( 'Final radius' ); rayFolder.add( scene.userData.rayParams, 'radius0Factor', 0, 1 ).name( 'Subray initial radius' ); rayFolder.add( scene.userData.rayParams, 'radius1Factor', 0, 1 ).name( 'Subray final radius' ); rayFolder.add( scene.userData.rayParams, 'timeScale', 0, 5 ).name( 'Ray time scale' ); rayFolder.add( scene.userData.rayParams, 'subrayPeriod', 0.1, 10 ).name( 'Subray period (s)' ); rayFolder.add( scene.userData.rayParams, 'subrayDutyCycle', 0, 1 ).name( 'Subray duty cycle' ); if ( scene.userData.recreateRay ) { // Parameters which need to recreate the ray after modification const raySlowFolder = gui.addFolder( 'Ray parameters (slow)' ); raySlowFolder.add( scene.userData.rayParams, 'ramification', 0, 15 ).step( 1 ).name( 'Ramification' ).onFinishChange( function () { scene.userData.recreateRay(); } ); raySlowFolder.add( scene.userData.rayParams, 'maxSubrayRecursion', 0, 5 ).step( 1 ).name( 'Recursion' ).onFinishChange( function () { scene.userData.recreateRay(); } ); raySlowFolder.add( scene.userData.rayParams, 'recursionProbability', 0, 1 ).name( 'Rec. probability' ).onFinishChange( function () { scene.userData.recreateRay(); } ); raySlowFolder.open(); } rayFolder.open(); } // function animate() { requestAnimationFrame( animate ); render(); stats.update(); } function render() { currentTime += scene.userData.timeRate * clock.getDelta(); if ( currentTime < 0 ) { currentTime = 0; } scene.userData.render( currentTime ); } function createOutline( scene, objectsArray, visibleColor ) { const outlinePass = new OutlinePass( new THREE.Vector2( window.innerWidth, window.innerHeight ), scene, scene.userData.camera, objectsArray ); outlinePass.edgeStrength = 2.5; outlinePass.edgeGlow = 0.7; outlinePass.edgeThickness = 2.8; outlinePass.visibleEdgeColor = visibleColor; outlinePass.hiddenEdgeColor.set( 0 ); composer.addPass( outlinePass ); scene.userData.outlineEnabled = true; return outlinePass; } // function createConesScene() { const scene = .........完整代码请登录后点击上方下载按钮下载查看
网友评论0