three实现三维边框小球旋转故障闪烁动画效果代码
代码语言：html
所属分类：三维
代码描述：three实现三维边框小球旋转故障闪烁动画效果代码
代码标签： three 三维 边框 小球 旋转 故障 闪烁 动画
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
html,
body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
h1 {
color: white;
font-family: VT323;
position: absolute;
top: 70vh;
left: 50vw;
font-weight: normal;
text-transform: uppercase;
letter-spacing: 0.3em;
width: 100%;
transform: translate(-50%, -50%);
font-size: 12px;
text-align: center;
}
</style>
</head>
<body>
<!-- partial:index.partial.html -->
<h1>// Scanning your memories...</h1>
<!-- partial -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.84.js"></script>
<script >
function buildScene() {
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
var composer = new THREE.EffectComposer(renderer);
renderer.setSize(window.innerWidth, window.innerHeight);
composer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
composer.setSize(window.innerWidth, window.innerHeight);
}
window.addEventListener('resize', onWindowResize, false);
var cubeGroup = new THREE.Group();
scene.add(cubeGroup);
function makeRing(radius, parent) {
var geometry = new THREE.CylinderGeometry(radius, radius, 0.1, 64);
var edges = new THREE.EdgesGeometry(geometry);
var line = new THREE.LineSegments(edges, new THREE.LineBasicMaterial({ color: 0x11ee77 }));
parent.add(line);
return line;
};
var ring0 = makeRing(3, scene);
var ring1 = makeRing(3.3, ring0);
var ring2 = makeRing(3.6, ring1);
(function () {
var geometry = new THREE.OctahedronGeometry(2, 3);
var material = new THREE.MeshPhongMaterial({ color: 0x444444, opacity: 0.8, transparent: true });
var cube = new THREE.Mesh(geometry, material);
cubeGroup.add(cube);
var edges = new THREE.EdgesGeometry(geometry);
var line = new THREE.LineSegments(edges, new THREE.LineBasicMaterial({ color: 0x1188dd }));
line.scale.set(1.1, 1.1, 1.1);
cubeGroup.add(line);
})();
var cylinder = function () {
var geometry = new THREE.CylinderGeometry(8, 8, 1000, 3);
const edges = new THREE.EdgesGeometry(geometry);
const cylinder = new THREE.LineSegments(edges, new THREE.LineBasicMaterial({ color: 0x444444 }));
cylinder.rotation.set(Math.PI / 2, 0, 0);
scene.add(cylinder);
return cylinder;
}();
var light = new THREE.DirectionalLight(0xFFFFFF, 1);
scene.add(light);
camera.position.z = 8;
var renderScene = new THREE.RenderPass(scene, camera);
var glitchPass = new THREE.GlitchPass();
var bloomPass = new THREE.UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 3, 1, 0.4);
var copyShader = new THREE.ShaderPass(THREE.CopyShader);
copyShader.renderToScreen = true;
composer.addPass(renderScene);
composer.addPass(glitchPass);
composer.addPass(bloomPass);
composer.addPass(copyShader);
function render() {
cubeGroup.rotation.x += 0.01;
cubeGroup.rotation.y += 0.03;
ring0.rotation.x += 0.011;
ring0.rotation.y += 0.032;
ring1.rotation.z += 0.013;
ring1.rotation.y += 0.034;
ring2.rotation.x += 0.015;
ring2.rotation.y += 0.036;
cylinder.rotation.y += 0.002;
cylinder.rotation.x -= 0.001;
cylinder.rotation.z += 0.003;
requestAnimationFrame(render);
composer.render();
}
render();
}
// Everything here down was pulled from ThreeJS Examples under postprocessing and shaders.
/**
* @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") };
/**
* @author felixturner / http://airtight.cc/
*
* RGB Shift Shader
* Shifts red and blue channels from center in opposite directions
* Ported from http://kriss.cx/tom/2009/05/rgb-shift/
* by Tom Butterworth / http://kriss.cx/tom/
*
* amount: shift distance (1 is width of input)
* angle: shift angle in radians
*/
THREE.DigitalGlitch = {
uniforms: {
"tDiffuse": { value: null }, //diffuse texture
"tDisp": { value: null }, //displacement texture for digital glitch squares
"byp": { value: 0 }, //apply the glitch ?
"amount": { value: 0.08 },
"angle": { value: 0.02 },
"seed": { value: 0.02 },
"seed_x": { value: 0.02 }, //-1,1
"seed_y": { value: 0.02 }, //-1,1
"distortion_x": { value: 0.5 },
"distortion_y": { value: 0.6 },
"col_s": { value: 0.05 } },
vertexShader: [
"varying vec2 vUv;",
"void main() {",
"vUv = uv;",
"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
"}"].
join("\n"),
fragmentShader: [
"uniform int byp;", //should we apply the glitch ?
"uniform sampler2D tDiffuse;",
"uniform sampler2D tDisp;",
"uniform float amount;",
"uniform float angle;",
"uniform float seed;",
"uniform float seed_x;",
"uniform float seed_y;",
"uniform float distortion_x;",
"uniform float distortion_y;",
"uniform float col_s;",
"varying vec2 vUv;",
"float rand(vec2 co){",
"return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);",
"}",
"void main() {",
"if(byp<1) {",
"vec2 p = vUv;",
"float xs = floor(gl_FragCoord.x / 0.5);",
"float ys = floor(gl_FragCoord.y / 0.5);",
//based on staffantans glitch shader for unity https://github.com/staffantan/unityglitch
"vec4 normal = texture2D (tDisp, p*seed*seed);",
"if(p.y<distortion_x+col_s && p.y>distortion_x-col_s*seed) {",
"if(seed_x>0.){",
"p.y = 1. - (p.y + distortion_y);",
"}",
"else {",
"p.y = distortion_y;",
"}",
"}",
"if(p.x<distortion_y+col_s && p.x>distortion_y-col_s*seed) {",
"if(seed_y>0.){",
"p.x=distortion_x;",
"}",
"else {",
"p.x = 1. - (p.x + distortion_x);",
"}",
"}",
"p.x+=normal.x*seed_x*(seed/5.);",
"p.y+=normal.y*seed_y*(seed/5.);",
//base from RGB shift shader
"vec2 offset = amount * vec2( cos(angle), sin(angle));",
"vec4 cr = texture2D(tDiffuse, p + offset);",
"vec4 cga = texture2D(tDiffuse, p);",
"vec4 cb = texture2D(tDiffuse, p - offset);",
"gl_FragColor = vec4(cr.r, cga.g, cb.b, cga.a);",
//add noise
"vec4 snow = 200.*amount*vec4(rand(vec2(xs * seed,ys * seed*50.))*0.2);",
"gl_FragColor = gl_FragColor+ snow;",
"}",
"else {",
"gl_FragColor=texture2D (tDiffuse, vUv);",
"}",
"}"].
join("\n") };
/**
* @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.getSize();
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.getSize();
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.getSize();
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.');
} });
/**
* @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;
} });
/**
* @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);
}
} });
/**
* @author alteredq / http://alteredqualia.com/
*/
THREE.GlitchPass = function (dt_size) {
THREE.Pass.call(this);
if (THREE.DigitalGlitch === undefined) console.error("THREE.GlitchPass relies on THREE.DigitalGlitch");
var shader = THREE.DigitalGlitch;
this.uniforms = THREE.UniformsUtils.clone(shader.uniforms);
if (dt_size == undefined) dt_size = 64;
this.uniforms["tDisp"].value = this.generateHeightmap(dt_size);
this.material = new THREE.ShaderMaterial({
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);
this.goWild = false;
this.curF = 0;
this.generateTrigger();
};
THREE.GlitchPass.prototype = Object.assign(Object.create(THREE.Pass.prototype), {
constructor: THREE.GlitchPass,
render: function (renderer, writeBuffer, readBuffer, delta, maskActive) {
this.uniforms["tDiffuse"].value = readBuffer.texture;
this.uniforms['seed'].value = Math.random(); //default seeding
this.uniforms['byp'].value = 0;
if (this.curF % this.randX == 0 || this.goWild == true) {
this.uniforms['amount'].value = Math.random() / 30;
this.uniforms['angle'].value = THREE.Math.randFloat(-Math.PI, Math.PI);
this.uniforms['seed_x'].value = THREE.Math.randFloat(-1, 1);
this.uniforms['seed_y'].value = THREE.Math.randFloat(-1, 1);
this.uniforms['distortion_x'].value = THREE.Math.randFloat(0, 1);
this.uniforms['distortion_y'].value = THREE.Math.randFloat(0, 1);
this.curF = 0;
this.generateTrigger();
} else if (this.curF % this.randX < this.randX / 5) {
this.uniforms['amount'].value = Math.random() / 90;
this.uniforms['angle'].value = THREE.Math.randFloat(-Math.PI, Math.PI);
this.uniforms['distortion_x'].value = THREE.Math.randFloat(0, 1);
this.uniforms['distortion_y'].value = THREE.Math.randFloat(0, 1);
this.uniforms['seed_x'].value = THREE.Math.randFloat(-0.3, 0.3);
this.uniforms['seed_y'].value = THREE.Math.randFloat(-0.3, 0.3);
} else if (this.goWild == false) {
this.uniforms['byp'].value = 1;
}
this.curF++;
this.quad.material = this.material;
if (this.renderToScreen) {
renderer.render(this.scene, this.camera);
} else {
renderer.render(this.scene, this.camera, writeBuffer, this.clear);
}
},
generateTrigger: function () {
this.randX = THREE.Math.randInt(10, 240);
},
generateHeightmap: function (dt_size) {
var data_arr = new Float32Array(dt_size * dt_size * 3);
var length = dt_size * dt_size;
for (var i = 0; i < length; i++) {
var val = THREE.Math.randFloat(0, 1);
data_arr[i * 3 + 0] = val;
data_arr[i * 3 + 1] = val;
data_arr[i * 3 + 2] = val;
}
var texture = new THREE.DataTexture(data_arr, dt_size, dt_size, THREE.RGBFormat, THREE.FloatType);
texture.needsUpdate = true;
return texture;
} });
/**
* @author alteredq / http://alteredqualia.com/
*
* Convolution shader
* ported from o3d sample to WebGL / GLSL
* http://o3d.googlecode.com/svn/trunk/samples/convolution.html
*/
THREE.ConvolutionShader = {
defines: {
"KERNEL_SIZE_FLOAT": "25.0",
"KERNEL_SIZE_INT": "25" },
uniforms: {
"tDiffuse": { value: null },
"uImageIncrement": { value: new THREE.Vector2(0.001953125, 0.0) },
"cKernel": { value: [] } },
vertexShader: [
"uniform vec2 uImageIncrement;",
"varying vec2 vUv;",
"void main() {",
"vUv = uv - ( ( KERNEL_SIZE_FLOAT - 1.0 ) / 2.0 ) * uImageIncrement;",
"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
"}"].
join("\n"),
fragmentShader: [
"unifor.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0