Three.js Demos
Three.js Demos

Water Realism Upgrade (r183-inspired)

Real-time water surface demo using Three.js `Water` with animated wave uniforms, distortion controls, and reflective highlights around a lit island scene.

Key topics: three.js water, watermesh, water realism, reflections, r183, ocean shader

What this code does

- Water Object Pipeline: uses `three/examples/jsm/objects/Water.js` for a production-style reflective water surface.
- Animated Wave Time: increments `water.material.uniforms.time` each frame to drive wave motion.
- Distortion Tuning: distortion scale controls reflection refraction strength and perceived water roughness.
- Local Normal Texture: generated `DataTexture` normal map keeps the demo self-contained without external asset fetches.
- Lighting Response: directional sun + ambient fill create specular highlights and color variation over the surface.
- Practical Pattern: good baseline for lakes, ocean edges, or stylized water scenes where full fluid simulation is overkill.

Related Demos

Continue Learning

Browse Three.js Tutorials

JavaScript Implementation

ES6+ 
import * as THREE from 'three'
import { Water } from 'three/examples/jsm/objects/Water.js'

const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(58, width / height, 0.1, 300)
const renderer = new THREE.WebGLRenderer({ antialias: true })
renderer.setSize(width, height)
document.querySelector('#app').appendChild(renderer.domElement)

const waterNormals = buildSeamlessNormals()
const water = new Water(new THREE.PlaneGeometry(120, 120, 180, 180), {
  textureWidth: 512,
  textureHeight: 512,
  waterNormals,
  sunDirection: sun.position.clone().normalize(),
  waterColor: 0x2f6fa7,
  distortionScale: 3.4
})
water.rotation.x = -Math.PI / 2
scene.add(water)

function animate () {
  requestAnimationFrame(animate)
  water.material.uniforms.time.value += 1 / 60
  // Optional: apply Gerstner/spectral displacement to geometry vertices here.
  renderer.render(scene, camera)
}
animate()
← Back