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

webgl wave shader

webgl, shader

《three.js使用多个渐变torus模拟光环光晕》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

const width = window.innerWidth;
const height = window.innerHeight;
const camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000);
const scene = new THREE.Scene();
const renderer = new THREE.WebGLRenderer();

camera.position.set(0, -20, 70);
camera.lookAt(scene.position);

renderer.setSize(width, height);
renderer.setClearColor(0x111111);
document.body.appendChild(renderer.domElement);

(function renderFrame(timeElapsed) {
  window.requestAnimationFrame(renderFrame);
  renderer.render(scene, camera);
  mesh.material.uniforms.delta.value = timeElapsed;
  //mesh.rotation.z += 0.001;
}());

编译

CSS

HTML

uniform float delta;

varying vec4 vPos;

void main () {
                float x = position.x;
                float y = position.y;
                float z = position.z + sin(delta * 0.002 + position.x * 0.4) * cos(delta * 0.002 + position.y * 0.4) * 10.0;
                vec4 newPosition = vec4(x, y, z, 1.0);
                vec4 modelViewPosition = modelViewMatrix * newPosition;

vPos = modelViewPosition;
                gl_Position = projectionMatrix * modelViewPosition;
            }
</script>
<script id="fragment" type="x-shader/x-fragment">

uniform float delta;
            varying vec4 vPos;

void main() {
                float r = 0.2;
                float g = cos((vPos.x * vPos.y) * 0.2 + delta / 500.0);
                float b = sin(vPos.y + vPos.x) + cos(vPos.x + delta / 500.0) * 0.8;
                gl_FragColor = vec4(r, g, b, 1.0);
            }

</script>

webgl wave shader

webgl, shader

编辑器支持Emmet

快捷键

webgl wave shader

webgl, shader

HTML5/Three.js水面波纹着色器动画

HTML5 Three.js引力场（3D空间漩涡）动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：