|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<meta charset="utf-8"> |
|
<title>Procedural Terrain</title> |
|
<style> |
|
body { margin: 0; overflow: hidden; } |
|
#controls { |
|
position: fixed; |
|
top: 20px; |
|
left: 20px; |
|
background: rgba(0,0,0,0.7); |
|
padding: 20px; |
|
border-radius: 10px; |
|
color: white; |
|
font-family: Arial, sans-serif; |
|
} |
|
.control-group { |
|
margin: 10px 0; |
|
} |
|
label { |
|
display: inline-block; |
|
width: 120px; |
|
} |
|
input[type="range"] { |
|
width: 200px; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<div id="controls"> |
|
<div class="control-group"> |
|
<label>Height Scale:</label> |
|
<input type="range" id="heightScale" min="0" max="100" value="20"> |
|
</div> |
|
<div class="control-group"> |
|
<label>Water Level:</label> |
|
<input type="range" id="waterLevel" min="0" max="50" value="10"> |
|
</div> |
|
<div class="control-group"> |
|
<label>Roughness:</label> |
|
<input type="range" id="roughness" min="0" max="10" value="3" step="0.1"> |
|
</div> |
|
</div> |
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> |
|
<script> |
|
let scene, camera, renderer, terrain, water; |
|
const size = 128; |
|
|
|
function init() { |
|
scene = new THREE.Scene(); |
|
camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); |
|
renderer = new THREE.WebGLRenderer(); |
|
renderer.setSize(window.innerWidth, window.innerHeight); |
|
document.body.appendChild(renderer.domElement); |
|
|
|
|
|
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); |
|
scene.add(ambientLight); |
|
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8); |
|
directionalLight.position.set(1, 1, 1); |
|
scene.add(directionalLight); |
|
|
|
camera.position.set(50, 50, 50); |
|
camera.lookAt(0, 0, 0); |
|
|
|
createTerrain(); |
|
createWater(); |
|
animate(); |
|
} |
|
|
|
function createTerrain() { |
|
const geometry = new THREE.PlaneGeometry(100, 100, size, size); |
|
const material = new THREE.MeshPhongMaterial({ |
|
color: 0x808080, |
|
wireframe: false, |
|
flatShading: true |
|
}); |
|
|
|
terrain = new THREE.Mesh(geometry, material); |
|
terrain.rotation.x = -Math.PI / 2; |
|
scene.add(terrain); |
|
|
|
updateTerrain(); |
|
} |
|
|
|
function createWater() { |
|
const geometry = new THREE.PlaneGeometry(100, 100); |
|
const material = new THREE.MeshPhongMaterial({ |
|
color: 0x0077ff, |
|
transparent: true, |
|
opacity: 0.6 |
|
}); |
|
|
|
water = new THREE.Mesh(geometry, material); |
|
water.rotation.x = -Math.PI / 2; |
|
scene.add(water); |
|
} |
|
|
|
function updateTerrain() { |
|
const heightScale = document.getElementById('heightScale').value; |
|
const roughness = document.getElementById('roughness').value; |
|
const vertices = terrain.geometry.attributes.position.array; |
|
|
|
for(let i = 0; i < vertices.length; i += 3) { |
|
const x = i / 3 % (size + 1); |
|
const y = Math.floor(i / 3 / (size + 1)); |
|
vertices[i + 2] = generateHeight(x, y) * heightScale / 20; |
|
} |
|
|
|
terrain.geometry.attributes.position.needsUpdate = true; |
|
terrain.geometry.computeVertexNormals(); |
|
} |
|
|
|
function generateHeight(x, y) { |
|
const roughness = document.getElementById('roughness').value; |
|
return (Math.sin(x/10 * roughness) + Math.sin(y/10 * roughness)) / 2; |
|
} |
|
|
|
function updateWater() { |
|
const waterLevel = document.getElementById('waterLevel').value; |
|
water.position.y = waterLevel / 5; |
|
} |
|
|
|
function animate() { |
|
requestAnimationFrame(animate); |
|
renderer.render(scene, camera); |
|
updateWater(); |
|
} |
|
|
|
|
|
window.addEventListener('resize', () => { |
|
camera.aspect = window.innerWidth / window.innerHeight; |
|
camera.updateProjectionMatrix(); |
|
renderer.setSize(window.innerWidth, window.innerHeight); |
|
}); |
|
|
|
document.getElementById('heightScale').addEventListener('input', updateTerrain); |
|
document.getElementById('roughness').addEventListener('input', updateTerrain); |
|
|
|
init(); |
|
</script> |
|
</body> |
|
</html> |
