HTML5+WebGLThree.js实现高质量3D旋转地球卫星云图动画效果源码.zip资源-CSDN文库

共8个文件

js：5个

jpg：2个

html：1个

版权申诉

192 浏览量 2022-11-03 23:56:58 上传评论收藏 2.52MB ZIP 举报

HTML5是一种先进的网页技术，它极大地扩展了网页的交互性和表现力。在本示例中，结合WebGL，一个JavaScript库Three.js被用来创建高质量的3D图形和动画，特别是展示了一个3D旋转的地球模型，同时还有卫星云图的动态效果。下面将详细介绍这个项目中的关键技术点和实现细节。 WebGL是Web上的一个图形编程接口，它基于OpenGL标准，允许开发者在浏览器中直接进行3D图形渲染，无需任何插件。WebGL的核心在于JavaScript API，通过它，程序员可以构建复杂的3D场景，并在用户的设备上实时渲染。 Three.js是基于WebGL的一个强大且流行的库，它简化了WebGL的使用，提供了丰富的功能和便利的API，使得非图形专业背景的开发者也能创建出令人惊叹的3D效果。Three.js包含了对象、相机、光源、材质、几何体、加载器、动画系统等一系列组件，用于构建3D世界。在这个3D地球动画中，Three.js首先需要创建一个场景（Scene），这是一个容纳所有3D对象的空间。接着，创建一个相机（Camera）来观察这个场景，它定义了用户从哪个角度和距离观察3D世界。然后，使用几何体（Geometry）如SphereGeometry来表示地球的形状，结合材质（Material）如MeshBasicMaterial或MeshPhongMaterial来决定物体的外观，如颜色、反射、透明度等。地球的纹理（Texture）通常来自于高分辨率的图像，可能包括地表、云层等多个层次。这些纹理可以应用到几何体的表面，通过映射技术使其贴合物体的形状。在本案例中，云图作为单独的纹理层被叠加在地球表面，创造出卫星云图的效果。为了实现地球的旋转，Three.js的动画系统派上了用场。可以使用THREE.Object3D的rotateOnAxis()方法或rotateOnWorldAxis()方法，让地球围绕某个轴线旋转。此外，通过设置动画循环，可以持续更新地球的旋转角度，从而实现平滑的3D旋转效果。渲染（Render）是将所有元素组合并呈现在屏幕上的过程。Three.js的renderer对象负责此任务，通过调用renderer.render(scene, camera)方法，每帧都将当前的场景和相机视图绘制到屏幕上，形成连续的动画效果。至于压缩包中的文件"132686864461404489"，很可能包含了实现上述功能的HTML、JavaScript、CSS以及可能的纹理图片等资源。代码中会详细阐述如何组织这些元素，如何初始化Three.js场景，以及如何编写动画循环等关键步骤。总结起来，这个项目展示了HTML5和WebGL结合Three.js的强大潜力，通过编程实现了在网页上动态展示3D旋转的地球模型及卫星云图。对于学习Web开发，尤其是3D图形和动画的开发者来说，这是一个很好的学习资源。通过深入研究和理解代码，可以提升对WebGL和Three.js的理解，为创建更多创新的3D交互式网页应用打下基础。

资源推荐

资源详情

资源评论

收起资源包目录

HTML5+WebGL Three.js实现高质量3D旋转地球卫星云图动画效果源码.zip （8个子文件）

132686864461404489

images

earth_clouds_low_4096.jpg 1.82MB

earth_color_low_4096.jpg 609KB

index.html 14KB

jquery.min.js 90KB

DDSLoader.js 6KB

postprocessing.js 101KB

OBJLoader.js 18KB

three.min.js 499KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>WebGL Three.js高质量3D旋转地球卫星云图着色器代码</title> <style> #glContainer { position: fixed; z-index: -1; margin: 0px; padding: 0px; } body { margin: 0; } </style> </head> <body> <div id="glContainer"></div> <script src="js/jquery.min.js"></script> <script src="js/three.min.js"></script> <script src="js/DDSLoader.js"></script> <script src="js/OBJLoader.js"></script> <script src="js/postprocessing.js"></script>  <script id="simpleVertex" type="x-shader/x-vertex"> varying vec2 vUv; varying vec3 v_Normal; varying vec3 v_Position; void main() { vUv = uv; vec4 mvPosition = modelViewMatrix * vec4(position, 1.0); gl_Position = projectionMatrix * mvPosition; v_Normal = normalize(normalMatrix * normal); v_Position = vec3(mvPosition.xyz); } </script> <script id="horizontalBlurFrag" type="x-shader/x-fragment"> uniform sampler2D tDiffuse; uniform float h; varying vec2 vUv; void main() { vec4 sum = vec4( 0.0 ); vec4 originalSample = texture2D( tDiffuse, vUv ); sum += texture2D( tDiffuse, vec2( vUv.x - 3.2307 * h, vUv.y ) ) * 0.0702; sum += texture2D( tDiffuse, vec2( vUv.x - 1.3846 * h, vUv.y ) ) * 0.3162; sum += originalSample * 0.2270270270; sum += texture2D( tDiffuse, vec2( vUv.x + 1.3846 * h, vUv.y ) ) * 0.3162; sum += texture2D( tDiffuse, vec2( vUv.x + 3.2307 * h, vUv.y ) ) * 0.0702; gl_FragColor = sum; } </script> <script id="verticalBlurFrag" type="x-shader/x-fragment"> uniform sampler2D tDiffuse; uniform float v; varying vec2 vUv; void main() { vec4 sum = vec4( 0.0 ); vec4 originalSample = texture2D( tDiffuse, vUv ); sum += texture2D( tDiffuse, vec2( vUv.x, vUv.y - 3.2307 * v ) ) * 0.0702; sum += texture2D( tDiffuse, vec2( vUv.x, vUv.y - 1.3846 * v ) ) * 0.3162; sum += originalSample * 0.2270270270; sum += texture2D( tDiffuse, vec2( vUv.x, vUv.y + 1.3846 * v ) ) * 0.3162; sum += texture2D( tDiffuse, vec2( vUv.x, vUv.y + 3.2307 * v ) ) * 0.0702; gl_FragColor = sum; } </script> <script id="overlayFrag" type="x-shader/x-fragment"> uniform sampler2D tDiffuse; uniform sampler2D tOverlay; varying vec2 vUv; void main() { vec4 regularScene = texture2D( tDiffuse, vUv ); vec4 overlay = texture2D( tOverlay, vUv ); float blurOpacity = 0.5; overlay.a *= blurOpacity; gl_FragColor = vec4(regularScene.rgb * (1.0 - overlay.a) + overlay.rgb * overlay.a, 1.0); } </script> <script id="earthFrag" type="x-shader/x-fragment"> uniform sampler2D tEarth; uniform sampler2D tClouds; uniform float fTime; varying vec2 vUv; varying vec3 v_Normal; varying vec3 v_Position; void main() { vec4 earth = texture2D(tEarth, vec2(vUv.x + fTime * 0.5, vUv.y)); vec4 clouds = texture2D(tClouds, vec2(vUv.x + fTime, vUv.y)); vec4 diffuse = earth + clouds; vec3 v_LightPos = vec3(-200.0, 200.0, -200.0); vec3 light_vec = normalize(v_LightPos - v_Position); float lightStrength = max(dot(v_Normal, light_vec), 0.05); gl_FragColor = diffuse * lightStrength; } </script> <script> $(document).ready(function() { Initialize(); // Instantiate a texture loader. var loader = new THREE.TextureLoader(); // Allow CORS for loading images from Amazon S3. loader.crossOrigin = ''; // load a resource loader.load('images/earth_clouds_low_4096.jpg', // Function when resource is loaded function(cloudTexture) { loader.load('images/earth_color_low_4096.jpg', function(earthTexture) { PopulateScenes(earthTexture, cloudTexture); SetupComposers(); animate(); }); }); }); // Adjust the WebGL content when the browser window is resized. $(window).resize(function() { var width = window.innerWidth; var height = window.innerHeight; camera.aspect = width / height; camera.updateProjectionMatrix(); renderer.setSize(width, height); sceneComposer.setSize(width, height); blurComposer.setSize(width / 2, height / 2); }); // Scene-related variables that will be needed throughout various functions. var camera = null; var renderer = null; var scene = null; var controls = null; var blurScene = null; var blurMaskScene = null; var blurComposer = null; var sceneComposer = null; var earthMaterial = null; var earthGlow = null; var startTime = new Date().getTime(); // Initialize the scene camera, renderer and composers. var Initialize = function() { camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 1, 2000); camera.position.z = 150; camera.position.y = -80; renderer = new THREE.WebGLRenderer({ alpha: true, logarithmicDepthBuffer: true }); renderer.setClearColor(0x000000, 0.0); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(window.innerWidth, window.innerHeight); renderer.autoClear = false; $('#glContainer').append(renderer.domElement); /* controls = new THREE.OrbitControls( camera, renderer.domElement ); controls.enableDamping = true; controls.dampingFactor = 0.25; controls.enableZoom = true; */ scene = new THREE.Scene(); blurScene = new THREE.Scene(); blurMaskScene = new THREE.Scene(); var renderTargetParameters = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBAFormat, stencilBufer: true }; var blurRenderTarget = new THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight, renderTargetParameters); blurComposer = new THREE.EffectComposer(renderer, blurRenderTarget); sceneComposer = new THREE.EffectComposer(renderer); } // Set up the main scene, blur scene, and blur mask. var PopulateScenes = function(earthTexture, cloudTexture) { earthMaterial = CreateEarthMaterial(earthTexture, cloudTexture); var earthPos = new THREE.Vector3(40, -100, 0); var sunPos = new THREE.Vector3(20, -5, 0); // This cube will be the source from which the glow emanates. var earth = CreateEarth({ size: 50, color: 0xFFFFFF, material: earthMaterial, position: earthPos }); var sun = CreateSun({ size: 10, color: 0xFFFFFF, opacity: 0.5, position: sunPos }); // This cube effectively creates a mask in the blur scene. It mirrors the position of the opaque cube. // If you examine the 'CreateCube' method, you'll see that we are creating a material with an opacity of 0, but a disabled transparent flag. // This material is equivalent to the following fragment shader: "gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);" var earthObstruction = CreateEarth({ size: 49, color: 0xFFFFFF, opacity: 0.0, position: earthPos }); earthObstruction.renderOrder = 1; // This is the cube that represents the actual glow of the first cube we created. // Notice its size is slightly bigger than the source cube. The size can be adjusted creating a smaller/larger glow. earthGlow = CreateEarth({ size: 51.5, opacity: 0.7, color: 0x397ebe, position: earthPos }); v

评论收藏

内容反馈

版权申诉