How I Coded a Relaxing 3D Ocean | JavaScript Tutorial
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3D Zen Silk</title>
</head>
<body>
<script src="script.js"></script>
</body>
</html>
css
body {
margin: 0;
background: #000;
overflow: hidden; }
canvas {
display: block;
}
js
// 1. Scene & Camera Setup
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x000000);
scene.fog = new THREE.Fog(0x000000, 10, 35); // Slightly pushed back fog
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// --- 2. THE STARFIELD ---
const starGeometry = new THREE.BufferGeometry();
const starMaterial = new THREE.PointsMaterial({
color: 0xffffff,
size: 0.05,
transparent: true,
opacity: 0.8
});
const starVertices = [];
for (let i = 0; i < 2000; i++) {
const x = (Math.random() - 0.5) * 100;
const y = (Math.random() - 0.5) * 100;
const z = (Math.random() - 0.5) * 100;
starVertices.push(x, y, z);
}
starGeometry.setAttribute('position', new THREE.Float32BufferAttribute(starVertices, 3));
const stars = new THREE.Points(starGeometry, starMaterial);
scene.add(stars);
// --- 3. THE WIREFRAME WAVE ---
const geometry = new THREE.PlaneGeometry(30, 30, 65, 65);
const material = new THREE.MeshBasicMaterial({
wireframe: true,
transparent: true,
opacity: 0.35,
blending: THREE.AdditiveBlending
});
const silk = new THREE.Mesh(geometry, material);
scene.add(silk);
silk.rotation.x = -Math.PI / 2.5;
camera.position.set(0, 6, 18);
camera.lookAt(0, 0, 0);
// --- 4. ANIMATION LOOP ---
function animate() {
requestAnimationFrame(animate);
const time = performance.now() * 0.0006;
const pos = geometry.attributes.position;
// Color Cycle (Soothing HSL)
const hue = (time * 0.08) % 1;
material.color.setHSL(hue, 0.8, 0.5);
// Wave Logic
for (let i = 0; i < pos.count; i++) {
const x = pos.getX(i);
const y = pos.getY(i);
const z = Math.sin(x * 0.3 + time) * Math.cos(y * 0.3 + time) * 1.5;
pos.setZ(i, z);
}
pos.needsUpdate = true;
// Subtle Star Twinkle & Rotation
stars.rotation.y += 0.0002;
starMaterial.opacity = 0.5 + Math.sin(time) * 0.3;
// Slow drift of the main wave
silk.rotation.z += 0.0005;
renderer.render(scene, camera);
}
// Handle Window Resize
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
animate();
Thanks for coming
.png)
Comments
Post a Comment