three实现三维夜晚地球灯光飞行轨迹效果代码
代码语言:html
所属分类:三维
代码描述:three实现三维夜晚地球灯光飞行轨迹效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html { background: black; height: 100%; overflow: hidden; } body { height: 100%; margin: 0; padding: 0; position: relative; z-index: 10; } canvas { -webkit-animation: in 2s cubic-bezier(0.23, 1, 0.32, 1) 0.25s backwards; animation: in 2s cubic-bezier(0.23, 1, 0.32, 1) 0.25s backwards; background: transparent; position: absolute; } @-webkit-keyframes in { from { opacity: 0; } } @keyframes in { from { opacity: 0; } } </style> </head> <body > <div id='container'></div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.75.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/extras.js"></script> <script > 'use strict'; var Earth = function (el, data) { let camera, scene, renderer, composer, w, h; let lines = [], mouse = { x: 0, y: 0 }, mouseOnDown = { x: 0, y: 0 }, points = [], rotation = { x: Math.PI * 1.9, y: Math.PI / 6 }, target = { x: Math.PI * 1.9, y: Math.PI / 6 }, targetOnDown = { x: 0, y: 0 }; const center = new THREE.Vector3(0, 0, 0), clock = new THREE.Clock(), distance = 350, PI_HALF = Math.PI / 2, pointRadius = 152, radius = 150; // Shaders // https://github.com/dataarts/webgl-globe const shaders = { 'atmosphere': { uniforms: {}, vertexShader: [ 'varying vec3 vNormal;', 'void main() {', 'vNormal = normalize( normalMatrix * normal );', 'gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );', '}']. join('\n'), fragmentShader: [ 'varying vec3 vNormal;', 'void main() {', 'float intensity = pow( 0.8 - dot( vNormal, vec3( 0, 0, 1.0 ) ), 3.0 );', 'gl_FragColor = vec4( 0.3, 0.4, 0.6, 0.05 ) * intensity;', '}']. join('\n') } }; // ------------------------------------- // Init // ------------------------------------- function init() { w = window.innerWidth; h = window.innerHeight; camera = new THREE.PerspectiveCamera(distance / 5, w / h, 1, distance * 2); scene = new THREE.Scene(); scene.add(camera); // Stars // http://gielberkers.com/evenly-distribute-particles-shape-sphere-threejs/ let starGeometry = new THREE.Geometry(); for (let i = 0; i < 1000; i++) { let x = -1 + Math.random() * 2; let y = -1 + Math.random() * 2; let z = -1 + Math.random() * 2; const d = 1 / Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2) + Math.pow(z, 2)); x *= d; y *= d; z *= d; const vertex = new THREE.Vector3( x * distance, y * distance, z * distance); starGeometry.vertices.push(vertex); } const stars = new THREE.Points(starGeometry, new THREE.PointsMaterial({ color: '#555555', size: 3 })); scene.add(stars); // Light let light = new THREE.PointLight('#ffffff', 0.5); camera.add(light); light.position.set(distance / 2, distance / 2, 0); light.target = camera; // Earth THREE.ImageUtils.crossOrigin = ''; var earthLights = THREE.ImageUtils.loadTexture('//repo.bfw.wiki/bfwrepo/image/62f3a70f24bd3.png'); var earthBump = THREE.ImageUtils.loadTexture('//repo.bfw.wiki/bfwrepo/image/62f3a6e7ec864.png'); earthLights.minFilter = THREE.LinearFilter; earthBump.minFilter = THREE.LinearFilter; var earthGeometry = new THREE.SphereGeometry(radius, 50, 30); var earthMaterial = new THREE.MeshPhongMaterial({ bumpMap: earthBump, bumpScale: 4, emissiveMap: earthLights, emissive: '#333333', map: earthLights, specular: '#010101' }); const earth = new THREE.Mesh(earthGeometry, earthMaterial); scene.add(earth); // Atmosphere const atmosphereMaterial = new THREE.ShaderMaterial({ vertexShader: shaders['atmosphere'].vertexShader, fragmentShader: shaders['atmosphere'].fragmentShader, side: THREE.BackSide, blending: THREE.AdditiveBlending, transparent: true }); const atmosphere = new THREE.Mesh(earthGeometry, atmosphereMaterial); atmosphere.scale.set(1.3, 1.3, 1.3); scene.add(atmosphere); // Points for (let i = 0; i < data.length; i++) { points.push(new point(data[i].lat, data[i].long, data[i].r, i)); let newLine = drawCurve(points[0].position, points[i].position); new TWEEN.Tween(newLine). to({ currentPoint: 200 }, 2000). delay(i * 350 + 1500). easing(TWEEN.Easing.Cubic.Out). onUpdate(function () { newLine.geometry.setDrawRange(0, newLine.currentPoint); }). start(); } // Renderer renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true }); renderer.autoClear = false; renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(w, h); // Composer composer = new THREE.EffectComposer(renderer); composer.addPass(new THREE.RenderPass(scene, camera)); const effectBloom = new THREE.BloomPass(1.75); const effectFilm = new THREE.FilmPass(0.25, 0.5, 2048, 0); const effectShift = new THREE.ShaderPass(THREE.RGBShiftShader); effectShift.uniforms['amount'].value = 0.001; effectShift.renderToScreen = true; composer.addPass(effectBloom); composer.addPass(effectFilm); composer.addPass(effectShift); // Events el.addEventListener('mousedown', onMouseDown, false); window.addEventListener('resize', onWindowResize, false); // DOM el.appendChild(renderer.domElement); } // ------------------------------------- // Lat + Long to Vector // ------------------------------------- function latLongToVector3(lat, lon, r) { // http://www.smartjava.org/content/render-open-data-3d-world-globe-threejs const phi = lat * Math.PI / 180; const theta = (lon - 180) * Math.PI / 180; const x = -r * Math.cos(phi) * Math.cos(theta); const y = r * Math.sin(phi); .........完整代码请登录后点击上方下载按钮下载查看
网友评论0