ARTICLE AD BOX
Currently, I have:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Water Test</title>
<style>
body { margin: 0; overflow: hidden; }
</style>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/objects/Water.js"></script>
<script>
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x87ceeb);
const camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 0.1, 5000);
camera.position.set(400, 250, 400);
const renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(innerWidth, innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
document.body.appendChild(renderer.domElement);
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.08;
controls.maxPolarAngle = Math.PI * 0.49;
controls.minDistance = 100;
controls.maxDistance = 1500;
scene.add(new THREE.AmbientLight(0xffffff, 0.5));
const sun = new THREE.DirectionalLight(0xffffff, 1.1);
sun.position.set(300, 500, 300);
scene.add(sun);
const waterGeometry = new THREE.PlaneGeometry(3000, 3000, 1, 1);
const waterNormals = new THREE.TextureLoader().load('https://threejs.org/examples/textures/waternormals.jpg', t => {
t.wrapS = t.wrapT = THREE.RepeatWrapping;
});
const water = new THREE.Water(waterGeometry, {
textureWidth: 512,
textureHeight: 512,
waterNormals,
alpha: 0.9,
sunDirection: sun.position.clone().normalize(),
sunColor: 0xffffff,
waterColor: 0x006994,
distortionScale: 3.5,
fog: false
});
water.rotation.x = -Math.PI / 2;
scene.add(water);
const pole = new THREE.Mesh(new THREE.BoxGeometry(200, 400, 200), new THREE.MeshStandardMaterial({
color: 0xff3333
}));
pole.position.set(0, 200, 0);
scene.add(pole);
const baseSpeed = 1 / 60;
const slowSpeed = 1 / 300;
const influenceRadius = 260;
function animate() {
requestAnimationFrame(animate);
controls.update();
const dx = camera.position.x - pole.position.x;
const dz = camera.position.z - pole.position.z;
const dist = Math.sqrt(dx * dx + dz * dz);
let speed = baseSpeed;
if (dist < influenceRadius) {
speed = THREE.MathUtils.lerp(slowSpeed, baseSpeed, dist / influenceRadius);
water.material.uniforms.distortionScale.value = 1.5;
} else {
water.material.uniforms.distortionScale.value = 3.5;
}
water.material.uniforms.time.value += speed;
renderer.render(scene, camera);
}
animate();
addEventListener('resize', () => {
camera.aspect = innerWidth / innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(innerWidth, innerHeight);
});
</script>
</body>
</html>
