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

3D Ocean，表面纹路使用了贴图。

webgl, ocean, water, wave

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 4987
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

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;
    }

})();

编译

CSS

HTML

3D Ocean，表面纹路使用了贴图。

webgl, ocean, water, wave

编辑器支持Emmet

快捷键

3D Ocean，表面纹路使用了贴图。

webgl, ocean, water, wave

HTML5/Three.js 3D浪涌（水面波动）着色器

HTML5 Three.js柔性卷曲引力（重力）波动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：