Meta Description" name="description" />
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<style>
body { margin: 0; overflow: hidden; background: #87CEEB; }
#controls { position: absolute; bottom: 20px; left: 20px; width: 150px; height: 150px; background: rgba(255,255,255,0.3); border-radius: 50%; }
#msg { position: absolute; top: 10px; width: 100%; text-align: center; color: white; pointer-events: none; font-size: 20px; }
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
</head>
<body>
<div id="msg">पहाड़ों वाला माइनक्राफ्ट (टच करें और घूमें)</div>
<div id="controls"></div> <!-- यहाँ से तुम टच करके चल सकोगे -->
<script>
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x87CEEB);
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);
// पहाड़ बनाने का लॉजिक (Noise Simulation)
const geo = new THREE.BoxGeometry(1, 1, 1);
for(let x=-10; x<10; x++) {
for(let z=-10; z<10; z++) {
let height = Math.floor(Math.sin(x*0.5) * Math.cos(z*0.5) * 3);
for(let y=0; y<=height; y++) {
const mat = new THREE.MeshLambertMaterial({color: y==height ? 0x228B22 : 0x8B4513});
const block = new THREE.Mesh(geo, mat);
block.position.set(x, y, z);
scene.add(block);
}
}
}
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(5, 10, 5);
scene.add(light);
scene.add(new THREE.AmbientLight(0x404040));
camera.position.set(0, 5, 10);
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
</script>
</body>
</html>
2
2
121KB
592KB
1,113.0ms
104.0ms
1,113.0ms