android 海平面动画,HTML5 Three.js 三维海平面波动动画

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

var vertexShader = `

#define SCALE 10.0

varying vec2 vUv;

uniform float uTime;

float calculateSurface(float x, float z) {

float y = 0.0;

y += (sin(x * 1.0 / SCALE + uTime * 1.0) + sin(x * 2.3 / SCALE + uTime * 1.5) + sin(x * 3.3 / SCALE + uTime * 0.4)) / 3.0;

y += (sin(z * 0.2 / SCALE + uTime * 1.8) + sin(z * 1.8 / SCALE + uTime * 1.8) + sin(z * 2.8 / SCALE + uTime * 0.8)) / 3.0;

return y;

}

void main() {

vUv = uv;

vec3 pos = position;

float strength = 1.0;

pos.y += strength * calculateSurface(pos.x, pos.z);

pos.y -= strength * calculateSurface(0.0, 0.0);

gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);

}

`;

var fragmentShader = `

varying vec2 vUv;

uniform sampler2D uMap;

uniform float uTime;

uniform vec3 uColor;

void main() {

vec2 uv = vUv * 10.0 + vec2(uTime * -0.05);

uv.y += 0.01 * (sin(uv.x * 3.5 + uTime * 0.35) + sin(uv.x * 4.8 + uTime * 1.05) + sin(uv.x * 7.3 + uTime * 0.45)) / 3.0;

uv.x += 0.12 * (sin(uv.y * 4.0 + uTime * 0.5) + sin(uv.y * 6.8 + uTime * 0.75) + sin(uv.y * 11.3 + uTime * 0.2)) / 3.0;

uv.y += 0.12 * (sin(uv.x * 4.2 + uTime * 0.64) + sin(uv.x * 6.3 + uTime * 1.65) + sin(uv.x * 8.2 + uTime * 0.45)) / 3.0;

vec4 tex1 = texture2D(uMap, uv * 1.0);

vec4 tex2 = texture2D(uMap, uv * 1.0 + vec2(0.2));

vec3 blue = uColor;

gl_FragColor = vec4(blue + vec3(tex1.a * 0.9 - tex2.a * 0.02), 1.0);

}

`;

(function() {

var _renderer, _scene, _camera, _controls;

var _geometry, _shader, _mesh;

window.onload = init;

function init() {

initWorld();

initScene();

}

//=====// World //========================================//

function initWorld() {

_renderer = new THREE.WebGLRenderer();

_renderer.setPixelRatio(2);

_renderer.setSize(window.innerWidth, window.innerHeight);

_renderer.setClearColor(0xffffff);

document.body.appendChild(_renderer.domElement);

_scene = new THREE.Scene();

_camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

_camera.position.set(-20, 10, 21);

_camera.target = new THREE.Vector3(0, -5, 0);

_camera.lookAt(_camera.target);

_controls = new THREE.OrbitControls(_camera);

_controls.target = _camera.target;

_controls.enableDamping = true;

_controls.dampingFactor = 0.1;

_controls.rotateSpeed = 0.1;

window.addEventListener('resize', resize, false);

resize();

requestAnimationFrame(render);

}

function resize() {

_renderer.setSize(window.innerWidth, window.innerHeight);

_camera.aspect = window.innerWidth / window.innerHeight;

_camera.updateProjectionMatrix();

}

function render() {

requestAnimationFrame(render);

if (_controls) _controls.update();

_renderer.render(_scene, _camera);

}

//=====// Scene //========================================//

function initScene() {

initGeometry();

initShader();

initMesh();

requestAnimationFrame(loop);

}

function initGeometry() {

_geometry = new THREE.PlaneBufferGeometry(50, 50, 20, 20);

_geometry.rotateX(-Math.PI / 2);

}

function initShader() {

var uniforms = {

uMap: {

type: 't',

value: null

},

uTime: {

type: 'f',

value: 0

},

uColor: {

type: 'f',

value: new THREE.Color('#0051da')

},

};

_shader = new THREE.ShaderMaterial({

uniforms: uniforms,

vertexShader: vertexShader,

fragmentShader: fragmentShader,

side: THREE.DoubleSide,

});

var textureLoader = new THREE.TextureLoader();

textureLoader.load('https://cinemont.com/tutorials/zelda/water.png', function(texture) {

_shader.uniforms.uMap.value = texture;

texture.wrapS = texture.wrapT = THREE.REPEAT_WRAPPING;

});

}

function initMesh() {

_mesh = new THREE.Mesh(_geometry, _shader);

_scene.add(_mesh);

}

function loop(e) {

requestAnimationFrame(loop);

_shader.uniforms.uTime.value = e * 0.001;

}

})();