threejs打造三维多彩峡谷穿梭效果
代码语言:html
所属分类:三维
代码描述:threejs打造三维多彩峡谷穿梭效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { color: #ffffff; font-family: Monospace; font-size: 13px; text-align: center; font-weight: bold; background-color: #000; margin: 0px; overflow: hidden; } #info, #controls { position: absolute; width: 100%; padding: 5px; background: rgba(0, 0, 0, 0.4); } #info { top: 0; } #controls { bottom: 0; } a { color: #ffffff; -webkit-transition: 150ms all; transition: 150ms all; } a:hover, a:focus { color: #ffc107; } .stats-element { position: absolute; right: 0; top: 0; } .audio-embed { position: absolute; left: 0; bottom: 100%; border: 0; } #hide-audio:checked + .audio-embed { opacity: 0; } </style> </head> <body translate="no"> <script id="vertexShader" type="x-shader/x-vertex"> attribute vec3 center; uniform float uTime; varying float vDisp; varying vec3 vCenter; varying vec2 vSceneYZ; #define PULSE_TIME 1.16 void main() { vCenter = center; vDisp = max( max(0., 1.-pow(3.*abs(uv.y-fract(-uTime*PULSE_TIME)+0.5), 0.5)), 1.-pow(3.*abs(uv.y-fract(-uTime*PULSE_TIME)-0.5), 0.5) ); // FIXME - magic numbers in displacement calculation vec4 scenePosition = modelViewMatrix*vec4(position+vec3(0., 1., 0.)*2.5*vDisp, 1.); vSceneYZ = scenePosition.yz; gl_Position = projectionMatrix*scenePosition; } </script> <script id="fragmentShader" type="x-shader/x-fragment"> uniform float uResolutionScale; varying float vDisp; varying vec3 vCenter; varying vec2 vSceneYZ; #define PI 3.14159265359 #define WIREFRAME_WIDTH 2.5 // adapted from https://github.com/mrdoob/three.js/blob/dev/examples/webgl_materials_wireframe.html for wireframe effect float edgeFactorTri() { vec3 a3 = smoothstep(vec3(0.), fwidth(vCenter.xyz)*WIREFRAME_WIDTH/uResolutionScale, vCenter.xyz); return min(min(a3.x, a3.y), a3.z); } void main(void) { if (edgeFactorTri() > 0.98) discard; vec3 color = mix( mix( mix( vec3(1., 0., 0.6), // magenta base vec3(1., 0.9, .0), min(1.9, vDisp) // yellow pulse ), vec3(1.), max(0., (vSceneYZ.s-20.) / 120.) // lighter on top; FIXME - magic numbers with Y position ), vec3(0.), max(0., min(1., (-vSceneYZ.t - 80.) / 80.)) // fade to black; FIXME - magic numbers with Z position ); gl_FragColor = gl_FrontFacing ? vec4(color, 1.0): vec4(color, 0.5); } </script> <div id="container"></div> <div id="info"> Synth Canyon Run - with <a href="https://threejs.org" target="_blank">three.js</a> </div> <div id="controls"> <label for="resolution">resolution: </label> <select id="resolution" value="2"> <option value="0.5">0.5x</option> <option value="1" selected>1x</option> <option value="2">2x</option> <option value="4">4x</option> <option value="8">8x</option> </select> </div> <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/three.109.js"></script> <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/stats-min.js"></script> <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/simplex-noise.min.js"></script> <script src='http://repo.bfw.wiki/bfwrepo/js/RenderPass.110.js'></script> <script src='http://repo.bfw.wiki/bfwrepo/js/EffectComposer.110.js'></script> <script src='http://repo.bfw.wiki/bfwrepo/js/UnrealBloomPass.110.js'></script> <script> const SHOW_STATS = false; const CANYON_WIDTH = 400; const CANYON_LENGTH = 120; const CANYON_SEGMENTS_W = 27; const CANYON_SEGMENTS_L = 10; const CLIFF_BASE = 60; const CLIFF_VARY = 15; const FLOOR_VARY = 10; const CANYON_SPEED = 70; const CAMERA_DRIFT_DISTANCE = 15; const CAMERA_DRIFT_SPEED = 0.05; let lastUpdate; let camera, scene, renderer, composer; let cameraBaseX, cameraBaseY; let uResolutionScale; let uTime; let canyonA, canyonB; function init() { // stats if (SHOW_STATS) { const stats = new Stats(); stats.domElement.classList.add('stats-element'); document.body.appendChild(stats.domElement); requestAnimationFrame(function updateStats() { stats.update(); requestAnimationFrame(updateStats); }); } // basic setup const container = document.getElementById('container'); camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 300); const cameraDistance = 70; const cameraAngle = .05 * Math.PI; camera.positi.........完整代码请登录后点击上方下载按钮下载查看
网友评论0