HTML5+Three.jsWebGL实现的月球发光着色与拖拽动画效果源码.zip资源-CSDN文库

共22个文件

js：14个

png：6个

html：1个

版权申诉

html5

84 浏览量 2022-11-03 23:52:27 上传评论收藏 5.28MB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

HTML5+Three.js WebGL实现的月球发光着色与拖拽动画效果源码.zip （22个子文件）

132686865583039652

img

nebula-ypos.png 825KB

nebula-zpos.png 837KB

nebula-zneg.png 829KB

nebula-xpos.png 831KB

nebula-yneg.png 824KB

nebula-xneg.png 849KB

moon.jpg 233KB

index.html 8KB

libs

RenderPass.js 1KB

MaskPass.js 2KB

CopyShader.js 640B

Detector.js 2KB

threejs

Three58_OrbitControls.js 8KB

Three58.js 800KB

ShaderPass.js 1007B

EffectComposer.js 3KB

Stats.min.js 2KB

games

THREEx.FullScreen.js 3KB

THREEx.WindowResize.js 1KB

THREEx.KeyboardState.js 3KB

dat.gui.min.js 44KB

AdditiveBlendShader.js 708B

<!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>Three.js WebGL 球体发光着色器</title> </head> <body> <div id="ThreeJS" style="position: absolute; left:0px; top:0px"></div> <script src="libs/threejs/Three58.js"></script> <script src="libs/threejs/Three58_OrbitControls.js"></script> <script src="libs/games/THREEx.KeyboardState.js"></script> <script src="libs/games/THREEx.FullScreen.js"></script> <script src="libs/games/THREEx.WindowResize.js"></script> <script src="libs/dat.gui.min.js"></script> <script src="libs/Detector.js"></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/stats.js/r11/Stats.min.js'></script>  <script src="libs/EffectComposer.js"></script> <script src="libs/RenderPass.js"></script> <script src="libs/ShaderPass.js"></script> <script src="libs/MaskPass.js"></script> <script src="libs/CopyShader.js"></script>  <script src="libs/AdditiveBlendShader.js"></script>  <script id="vertexShaderAtmosphere" type="x-shader/x-vertex"> varying vec3 vNormal; void main() { vNormal = normalize( normalMatrix * normal ); gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); } </script>  <script id="fragmentShaderAtmosphere" type="x-shader/x-vertex"> uniform float c; uniform float p; varying vec3 vNormal; void main() { float intensity = pow( c - dot( vNormal, vec3( 0.0, 0.0, 1.0 ) ), p ); gl_FragColor = vec4( 1.0, 1.0, 1.0, 1.0 ) * intensity; } </script> <script> // MAIN // standard global variables var container, scene, camera, renderer, controls, stats; var keyboard = new THREEx.KeyboardState(); var clock = new THREE.Clock(); // custom global variables var cube; init(); animate(); // FUNCTIONS function init() { // SCENE scene = new THREE.Scene(); // CAMERA var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight; var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000; camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR); scene.add(camera); camera.position.set(0, 150, 400); camera.lookAt(scene.position); // RENDERER if (Detector.webgl) renderer = new THREE.WebGLRenderer({ antialias: true }); else renderer = new THREE.CanvasRenderer(); renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT); container = document.getElementById('ThreeJS'); container.appendChild(renderer.domElement); // EVENTS THREEx.WindowResize(renderer, camera); THREEx.FullScreen.bindKey({ charCode: 'm'.charCodeAt(0) }); // CONTROLS controls = new THREE.OrbitControls(camera, renderer.domElement); // STATS stats = new Stats(); stats.domElement.style.position = 'absolute'; stats.domElement.style.bottom = '0px'; stats.domElement.style.zIndex = 100; container.appendChild(stats.domElement); // LIGHT var light = new THREE.PointLight(0xffffff); light.position.set(0, 250, 0); scene.add(light); var imagePrefix = "img/nebula-"; var directions = ["xpos", "xneg", "ypos", "yneg", "zpos", "zneg"]; var imageSuffix = ".png"; var skyGeometry = new THREE.CubeGeometry(10000, 10000, 10000); var imageURLs = []; for (var i = 0; i < 6; i++) imageURLs.push(imagePrefix + directions[i] + imageSuffix); var textureCube = THREE.ImageUtils.loadTextureCube(imageURLs); var shader = THREE.ShaderLib["cube"]; shader.uniforms["tCube"].value = textureCube; var skyMaterial = new THREE.ShaderMaterial({ fragmentShader: shader.fragmentShader, vertexShader: shader.vertexShader, uniforms: shader.uniforms, depthWrite: false, side: THREE.BackSide }); var skyBox = new THREE.Mesh(skyGeometry, skyMaterial); scene.add(skyBox); //////////// // CUSTOM // //////////// // create custom material from the shader code above // that is within specially labeled script tags var customMaterialAtmosphere = new THREE.ShaderMaterial({ uniforms: { "c": { type: "f", value: 0.5 }, "p": { type: "f", value: 4.0 } }, vertexShader: document.getElementById('vertexShaderAtmosphere').textContent, fragmentShader: document.getElementById('fragmentShaderAtmosphere').textContent }); var sphereGeo = new THREE.SphereGeometry(100, 32, 16); var moonTexture = THREE.ImageUtils.loadTexture('img/moon.jpg'); var moonMaterial = new THREE.MeshBasicMaterial({ map: moonTexture }); var moon = new THREE.Mesh(sphereGeo, moonMaterial); scene.add(moon); // create secondary scene to add atmosphere effect atmosphereScene = new THREE.Scene(); camera2 = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR); camera2.position = camera.position; camera2.rotation = camera.rotation; atmosphereScene.add(camera2); var mesh = new THREE.Mesh(sphereGeo.clone(), customMaterialAtmosphere); mesh.scale.x = mesh.scale.y = mesh.scale.z = 1.2; // atmosphere should provide light from behind the sphere, so only render the back side mesh.material.side = THREE.BackSide; atmosphereScene.add(mesh); // clone earlier sphere geometry to block light correctly // and make it a bit smaller so that light blends into surface a bit var blackMaterial = new THREE.MeshBasicMaterial({ color: 0x000000 }); var sphere = new THREE.Mesh(sphereGeo.clone(), blackMaterial); sphere.scale.x = sphere.scale.y = sphere.scale.z = 1; atmosphereScene.add(sphere); //////////////////////////////////////////////////////////////////////// // final composer will blend composer2.render() results with the scene //////////////////////////////////////////////////////////////////////// // prepare secondary composer var renderTargetParameters = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat, stencilBuffer: false }; var renderTarget = new THREE.WebGLRenderTarget(SCREEN_WIDTH, SCREEN_HEIGHT, renderTargetParameters); composer2 = new THREE.EffectComposer(renderer, renderTarget); // prepare the secondary render's passes var render2Pass = new THREE.RenderPass(atmosphereScene, camera2); composer2.addPass(render2Pass); // prepare final composer finalComposer = new THREE.EffectComposer(renderer, renderTarget); // prepare the final render's passes var renderModel = new THREE.RenderPass(scene, camera); finalComposer.addPass(renderModel); var effectBlend = new THREE.ShaderPass(THREE.AdditiveBlendShader, "tDiffuse1"); effectBlend.uniforms['tDiffuse2'].value = composer2.renderTarget2; effectBlend.renderToScreen = true; finalComposer.addPass(effectBlend); ///////// // GUI // ///////// gui = new dat.GUI(); parameters = { c: 0.5, p: 4.0 }; var cGUI = gui.add(parameters, 'c').min(0.0).max(1.0).step(0.01).name("c").listen(); cGUI.onChange( function(value) { customMaterialAtmosphere.uniforms["c"].value = parameters.c; } ); var pGUI = gui.add(parameters, 'p')

评论收藏

内容反馈

版权申诉