1.3d星球动画
代码如下
styles.css
* {
margin: 0;
padding: 0;
outline: 0;
}
html, body {
width: 100%;
height: 100%;
background:#000;
}
#container {
width: 100%;
height: 100%;
} CopyShader.js
/**
* @author alteredq / http://alteredqualia.com/
*
* Full-screen textured quad shader
*/
THREE.CopyShader = {
uniforms: {
"tDiffuse": { value: null },
"opacity": { value: 1.0 }
},
vertexShader: [
"varying vec2 vUv;",
"void main() {",
"vUv = uv;",
"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
"}"
].join( "\n" ),
fragmentShader: [
"uniform float opacity;",
"uniform sampler2D tDiffuse;",
"varying vec2 vUv;",
"void main() {",
"vec4 texel = texture2D( tDiffuse, vUv );",
"gl_FragColor = opacity * texel;",
"}"
].join( "\n" )
};
EffectComposer.js
/**
* @author alteredq / http://alteredqualia.com/
*/
THREE.EffectComposer = function ( renderer, renderTarget ) {
this.renderer = renderer;
if ( renderTarget === undefined ) {
var parameters = {
minFilter: THREE.LinearFilter,
magFilter: THREE.LinearFilter,
format: THREE.RGBAFormat,
stencilBuffer: false
};
var size = renderer.getDrawingBufferSize();
renderTarget = new THREE.WebGLRenderTarget( size.width, size.height, parameters );
renderTarget.texture.name = 'EffectComposer.rt1';
}
this.renderTarget1 = renderTarget;
this.renderTarget2 = renderTarget.clone();
this.renderTarget2.texture.name = 'EffectComposer.rt2';
this.writeBuffer = this.renderTarget1;
this.readBuffer = this.renderTarget2;
this.passes = [];
// dependencies
if ( THREE.CopyShader === undefined ) {
console.error( 'THREE.EffectComposer relies on THREE.CopyShader' );
}
if ( THREE.ShaderPass === undefined ) {
console.error( 'THREE.EffectComposer relies on THREE.ShaderPass' );
}
this.copyPass = new THREE.ShaderPass( THREE.CopyShader );
};
Object.assign( THREE.EffectComposer.prototype, {
swapBuffers: function() {
var tmp = this.readBuffer;
this.readBuffer = this.writeBuffer;
this.writeBuffer = tmp;
},
addPass: function ( pass ) {
this.passes.push( pass );
var size = this.renderer.getDrawingBufferSize();
pass.setSize( size.width, size.height );
},
insertPass: function ( pass, index ) {
this.passes.splice( index, 0, pass );
},
render: function ( delta ) {
var maskActive = false;
var pass, i, il = this.passes.length;
for ( i = 0; i < il; i ++ ) {
pass = this.passes[ i ];
if ( pass.enabled === false ) continue;
pass.render( this.renderer, this.writeBuffer, this.readBuffer, delta, maskActive );
if ( pass.needsSwap ) {
if ( maskActive ) {
var context = this.renderer.context;
context.stencilFunc( context.NOTEQUAL, 1, 0xffffffff );
this.copyPass.render( this.renderer, this.writeBuffer, this.readBuffer, delta );
context.stencilFunc( context.EQUAL, 1, 0xffffffff );
}
this.swapBuffers();
}
if ( THREE.MaskPass !== undefined ) {
if ( pass instanceof THREE.MaskPass ) {
maskActive = true;
} else if ( pass instanceof THREE.ClearMaskPass ) {
maskActive = false;
}
}
}
},
reset: function ( renderTarget ) {
if ( renderTarget === undefined ) {
var size = this.renderer.getDrawingBufferSize();
renderTarget = this.renderTarget1.clone();
renderTarget.setSize( size.width, size.height );
}
this.renderTarget1.dispose();
this.renderTarget2.dispose();
this.renderTarget1 = renderTarget;
this.renderTarget2 = renderTarget.clone();
this.writeBuffer = this.renderTarget1;
this.readBuffer = this.renderTarget2;
},
setSize: function ( width, height ) {
this.renderTarget1.setSize( width, height );
this.renderTarget2.setSize( width, height );
for ( var i = 0; i < this.passes.length; i ++ ) {
this.passes[i].setSize( width, height );
}
}
} );
THREE.Pass = function () {
// if set to true, the pass is processed by the composer
this.enabled = true;
// if set to true, the pass indicates to swap read and write buffer after rendering
this.needsSwap = true;
// if set to true, the pass clears its buffer before rendering
this.clear = false;
// if set to true, the result of the pass is rendered to screen
this.renderToScreen = false;
};
Object.assign( THREE.Pass.prototype, {
setSize: function( width, height ) {},
render: function ( renderer, writeBuffer, readBuffer, delta, maskActive ) {
console.error( 'THREE.Pass: .render() must be implemented in derived pass.' );
}
} );
FilmPass.js
/**
* @author alteredq / http://alteredqualia.com/
*/
THREE.FilmPass = function ( noiseIntensity, scanlinesIntensity, scanlinesCount, grayscale ) {
THREE.Pass.call( this );
if ( THREE.FilmShader === undefined )
console.error( "THREE.FilmPass relies on THREE.FilmShader" );
var shader = THREE.FilmShader;
this.uniforms = THREE.UniformsUtils.clone( shader.uniforms );
this.material = new THREE.ShaderMaterial( {
uniforms: this.uniforms,
vertexShader: shader.vertexShader,
fragmentShader: shader.fragmentShader
} );
if ( grayscale !== undefined ) this.uniforms.grayscale.value = grayscale;
if ( noiseIntensity !== undefined ) this.uniforms.nIntensity.value = noiseIntensity;
if ( scanlinesIntensity !== undefined ) this.uniforms.sIntensity.value = scanlinesIntensity;
if ( scanlinesCount !== undefined ) this.uniforms.sCount.value = scanlinesCount;
this.camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
this.scene = new THREE.Scene();
this.quad = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2, 2 ), null );
this.quad.frustumCulled = false; // Avoid getting clipped
this.scene.add( this.quad );
};
THREE.FilmPass.prototype = Object.assign( Object.create( THREE.Pass.prototype ), {
constructor: THREE.FilmPass,
render: function ( renderer, writeBuffer, readBuffer, delta, maskActive ) {
this.uniforms[ "tDiffuse" ].value = readBuffer.texture;
this.uniforms[ "time" ].value += delta;
this.quad.material = this.material;
if ( this.renderToScreen ) {
renderer.render( this.scene, this.camera );
} else {
renderer.render( this.scene, this.camera, writeBuffer, this.clear );
}
}
} );
FilmShader.js
/**
* @author alteredq / http://alteredqualia.com/
*
* Film grain & scanlines shader
*
* - ported from HLSL to WebGL / GLSL
* http://www.truevision3d.com/forums/showcase/staticnoise_colorblackwhite_scanline_shaders-t18698.0.html
*
* Screen Space Static Postprocessor
*
* Produces an analogue noise overlay similar to a film grain / TV static
*
* Original implementation and noise algorithm
* Pat 'Hawthorne' Shearon
*
* Optimized scanlines + noise version with intensity scaling
* Georg 'Leviathan' Steinrohder
*
* This version is provided under a Creative Commons Attribution 3.0 License
* http://creativecommons.org/licenses/by/3.0/
*/
THREE.FilmShader = {
uniforms: {
"tDiffuse": { value: null },
"time": { value: 0.0 },
"nIntensity": { value: 0.5 },
"sIntensity": { value: 0.05 },
"sCount": { value: 4096 },
"grayscale": { value: 1 }
},
vertexShader: [
"varying vec2 vUv;",
"void main() {",
"vUv = uv;",
"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
"}"
].join( "\n" ),
fragmentShader: [
"#include <common>",
// control parameter
"uniform float time;",
"uniform bool grayscale;",
// noise effect intensity value (0 = no effect, 1 = full effect)
"uniform float nIntensity;",
// scanlines effect intensity value (0 = no effect, 1 = full effect)
"uniform float sIntensity;",
// scanlines effect count value (0 = no effect, 4096 = full effect)
"uniform float sCount;",
"uniform sampler2D tDiffuse;",
"varying vec2 vUv;",
"void main() {",
// sample the source
"vec4 cTextureScreen = texture2D( tDiffuse, vUv );",
// make some noise
"float dx = rand( vUv + time );",
// add noise
"vec3 cResult = cTextureScreen.rgb + cTextureScreen.rgb * clamp( 0.1 + dx, 0.0, 1.0 );",
// get us a sine and cosine
"vec2 sc = vec2( sin( vUv.y * sCount ), cos( vUv.y * sCount ) );",
// add scanlines
"cResult += cTextureScreen.rgb * vec3( sc.x, sc.y, sc.x ) * sIntensity;",
// interpolate between source and result by intensity
"cResult = cTextureScreen.rgb + clamp( nIntensity, 0.0,1.0 ) * ( cResult - cTextureScreen.rgb );",
// convert to grayscale if desired
"if( grayscale ) {",
"cResult = vec3( cResult.r * 0.3 + cResult.g * 0.59 + cResult.b * 0.11 );",
"}",
"gl_FragColor = vec4( cResult, cTextureScreen.a );",
"}"
].join( "\n" )
};
index.js
var container = document.getElementById("container");
var width = container.clientWidth;
var height = container.clientHeight;
var aspect = width / height;
var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
container.appendChild(renderer.domElement);
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(50, aspect, 0.1, 1000);
camera.position.z = 500
system = new THREE.Group(); // planetary system
scene.add(
new THREE.AmbientLight(0xFFFFFF, 0.2)
);
var light = new THREE.DirectionalLight(0xFFFFFF, 2.5);
light.position.set(1500, 2500, 0);
scene.add(light);
var material = new THREE.MeshLambertMaterial({
color: 0x0C2D4D
});
var planet = new THREE.Mesh(
new THREE.IcosahedronGeometry(100, 3),
material
);
for (var i = 0; i < planet.geometry.vertices.length; i++)
planet.geometry.vertices[i].multiplyScalar(
Math.random() * 0.05 + 0.95
);
planet.geometry.computeFlatVertexNormals();
system.add(planet);
var asteroids = new THREE.Group();
for (var p = 0; p < Math.PI * 2; p = p + Math.random() * 0.15) {
var asteroid = new THREE.Mesh(
new THREE.IcosahedronGeometry(8, 0),
material
);
var size = Math.random() * 0.5;
for (var i = 0; i < asteroid.geometry.vertices.length; i++)
asteroid.geometry.vertices[i].multiplyScalar(
Math.random() * 0.5 + size
);
rand = Math.random() * 60 - 30;
asteroid.position.set(200 * Math.sin(p) + rand, rand, 200 * Math.cos(p) + rand);
asteroid.geometry.computeFlatVertexNormals();
asteroids.add(asteroid);
}
system.add(asteroids);
system.rotation.x = 0.1;
system.rotation.y = -.3;
system.rotation.z = -0.4;
scene.add(system);
for (i = 0; i < 10; i++) {
particles = new THREE.Points(
new THREE.Geometry(),
new THREE.PointsMaterial({
size: Math.random() * 5
})
);
for (j = 0; j < 20; j++) {
var vertex = new THREE.Vector3();
vertex.x = Math.random() * width * 1.1 - width * 1.1 / 2;
vertex.y = Math.random() * height * 1.1 - height * 1.1 / 2;
vertex.z = -500;
particles.geometry.vertices.push(vertex);
particles.material.color.setScalar(Math.random() * 0.4 + 0.2);
}
scene.add(particles);
}
function render() {
requestAnimationFrame(render);
planet.rotation.y += 0.001;
planet.rotation.z -= 0.0005;
asteroids.rotation.y += 0.003;
renderer.render(scene, camera);
}
render();RenderPass.js
/**
* @author alteredq / http://alteredqualia.com/
*/
THREE.RenderPass = function ( scene, camera, overrideMaterial, clearColor, clearAlpha ) {
THREE.Pass.call( this );
this.scene = scene;
this.camera = camera;
this.overrideMaterial = overrideMaterial;
this.clearColor = clearColor;
this.clearAlpha = ( clearAlpha !== undefined ) ? clearAlpha : 0;
this.clear = true;
this.clearDepth = false;
this.needsSwap = false;
};
THREE.RenderPass.prototype = Object.assign( Object.create( THREE.Pass.prototype ), {
constructor: THREE.RenderPass,
render: function ( renderer, writeBuffer, readBuffer, delta, maskActive ) {
var oldAutoClear = renderer.autoClear;
renderer.autoClear = false;
this.scene.overrideMaterial = this.overrideMaterial;
var oldClearColor, oldClearAlpha;
if ( this.clearColor ) {
oldClearColor = renderer.getClearColor().getHex();
oldClearAlpha = renderer.getClearAlpha();
renderer.setClearColor( this.clearColor, this.clearAlpha );
}
if ( this.clearDepth ) {
renderer.clearDepth();
}
renderer.render( this.scene, this.camera, this.renderToScreen ? null : readBuffer, this.clear );
if ( this.clearColor ) {
renderer.setClearColor( oldClearColor, oldClearAlpha );
}
this.scene.overrideMaterial = null;
renderer.autoClear = oldAutoClear;
}
} );
ShaderPass.js
/**
* @author alteredq / http://alteredqualia.com/
*/
THREE.ShaderPass = function ( shader, textureID ) {
THREE.Pass.call( this );
this.textureID = ( textureID !== undefined ) ? textureID : "tDiffuse";
if ( shader instanceof THREE.ShaderMaterial ) {
this.uniforms = shader.uniforms;
this.material = shader;
} else if ( shader ) {
this.uniforms = THREE.UniformsUtils.clone( shader.uniforms );
this.material = new THREE.ShaderMaterial( {
defines: shader.defines || {},
uniforms: this.uniforms,
vertexShader: shader.vertexShader,
fragmentShader: shader.fragmentShader
} );
}
this.camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
this.scene = new THREE.Scene();
this.quad = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2, 2 ), null );
this.quad.frustumCulled = false; // Avoid getting clipped
this.scene.add( this.quad );
};
THREE.ShaderPass.prototype = Object.assign( Object.create( THREE.Pass.prototype ), {
constructor: THREE.ShaderPass,
render: function( renderer, writeBuffer, readBuffer, delta, maskActive ) {
if ( this.uniforms[ this.textureID ] ) {
this.uniforms[ this.textureID ].value = readBuffer.texture;
}
this.quad.material = this.material;
if ( this.renderToScreen ) {
renderer.render( this.scene, this.camera );
} else {
renderer.render( this.scene, this.camera, writeBuffer, this.clear );
}
}
} );
three.min.js