Live Preview
Tag didn’t load? Click here and let us know!Share this result
Previews are deleted daily. Get a permanent share link sent to your inbox:
Script
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mini 3D Minecraft Clone</title>
<style>
body { margin: 0; overflow: hidden; font-family: sans-serif; }
#crosshair { position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; background: white; transform: translate(-50%, -50%); pointer-events: none; }
#ui { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.7); color: white; padding: 10px 20px; border-radius: 5px; font-size: 16px; pointer-events: none; }
#instructions { position: absolute; top: 10px; left: 10px; background: rgba(0,0,0,0.7); color: white; padding: 15px; border-radius: 5px; pointer-events: none; }
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
</head>
<body>
<div id="crosshair"></div>
<div id="ui">चयनित ब्लॉक: <span id="blockType">घास (Grass)</span> [कीबोर्ड 1, 2, 3 से बदलें]</div>
<div id="instructions">
<strong>नियंत्रण (Controls):</strong><br>
• स्क्रीन पर क्लिक करें: गेम मोड ऑन<br>
• W, A, S, D: चलना<br>
• माउस: चारों तरफ देखना<br>
• लेफ्ट क्लिक: ब्लॉक तोड़ें<br>
• राइट क्लिक: ब्लॉक लगाएं<br>
• बटन 1, 2, 3: इन्वेंटरी/ब्लॉक बदलें
</div>
<script>
// --- 1. SETUP ENGINE ---
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x87CEEB); // Sky Blue
scene.fog = new THREE.FogExp2(0x87CEEB, 0.05);
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);
renderer.shadowMap.enabled = true;
document.body.appendChild(renderer.domElement);
// Lights
const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
scene.add(ambientLight);
const dirLight = new THREE.DirectionalLight(0xffffff, 0.8);
dirLight.position.set(20, 40, 20);
scene.add(dirLight);
// --- 2. GAME VARIABLES ---
const blocks = [];
const blockSize = 1;
let selectedBlockType = 1; // 1: Grass, 2: Dirt, 3: Wood
const blockColors = { 1: 0x557a2b, 2: 0x866043, 3: 0x4a3728 };
const blockNames = { 1: "घास (Grass)", 2: "मिट्टी (Dirt)", 3: "लकड़ी (Wood)" };
// Player physics
const move = { forward: false, backward: false, left: false, right: false };
const velocity = new THREE.Vector3();
const direction = new THREE.Vector3();
camera.position.set(5, 2, 5);
// --- 3. CREATE WORLD ---
// Materials
const textures = {};
for(let key in blockColors) {
textures[key] = new THREE.MeshLambertMaterial({ color: blockColors[key] });
}
const geometry = new THREE.BoxGeometry(blockSize, blockSize, blockSize);
// Ground generation (16x16)
for (let x = 0; x < 16; x++) {
for (let z = 0; z < 16; z++) {
const block = new THREE.Mesh(geometry, textures[1]);
block.position.set(x, 0, z);
scene.add(block);
blocks.push(block);
}
}
// Add a Tree
const treeTrunkHeight = 3;
for(let i=1; i<=treeTrunkHeight; i++) {
const trunk = new THREE.Mesh(geometry, textures[3]);
trunk.position.set(8, i, 8);
scene.add(trunk);
blocks.push(trunk);
}
// Tree Leaves
const leavesMat = new THREE.MeshLambertMaterial({ color: 0x2e5c1e });
const leaves = new THREE.Mesh(geometry, leavesMat);
leaves.position.set(8, treeTrunkHeight+1, 8);
scene.add(leaves);
blocks.push(leaves);
// Add a Simple Mob (Green Cube)
const mobMat = new THREE.MeshLambertMaterial({ color: 0x00ff00 });
const mob = new THREE.Mesh(geometry, mobMat);
mob.position.set(4, 1, 4);
scene.add(mob);
let mobDirection = 1;
// --- 4. CONTROLS & INTERACTION ---
document.body.addEventListener('click', () => {
document.body.requestPointerLock();
});
document.addEventListener('mousemove', (e) => {
if (document.pointerLockElement === document.body) {
camera.rotation.y -= e.movementX * 0.002;
camera.rotation.x -= e.movementY * 0.002;
camera.rotation.x = Math.max(-Math.PI / 2, Math.min(Math.PI / 2, camera.rotation.x));
}
});
window.addEventListener('keydown', (e) => {
if (e.code === 'KeyW') move.forward = true;
if (e.code === 'KeyS') move.backward = true;
if (e.code === 'KeyA') move.left = true;
if (e.code === 'KeyD') move.right = true;
if (e.key === '1') { selectedBlockType = 1; document.getElementById('blockType').innerText = blockNames[1]; }
if (e.key === '2') { selectedBlockType = 2; document.getElementById('blockType').innerText = blockNames[2]; }
if (e.key === '3') { selectedBlockType = 3; document.getElementById('blockType').innerText = blockNames[3]; }
});
window.addEventListener('keyup', (e) => {
if (e.code === 'KeyW') move.forward = false;
if (e.code === 'KeyS') move.backward = false;
if (e.code === 'KeyA') move.left = false;
if (e.code === 'KeyD') move.right = false;
});
// Raycasting for Breaking/Placing Blocks
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2(0, 0); // Center of screen
window.addEventListener('mousedown', (e) => {
if (document.pointerLockElement !== document.body) return;
raycaster.setFromCamera(mouse, camera);
const intersects = raycaster.intersectObjects(blocks);
if (intersects.length > 0 && intersects[0].distance < 6) {
const intersect = intersects[0];
if (e.button === 0) { // Left Click - Break
scene.remove(intersect.object);
const index = blocks.indexOf(intersect.object);
if (index > -1) blocks.splice(index, 1);
}
else if (e.button === 2) { // Right Click - Place
const position = new THREE.Vector3();
position.copy(intersect.point).add(intersect.face.normal);
position.floor().addScalar(0.5); // Align to grid
const newBlock = new THREE.Mesh(geometry, textures[selectedBlockType]);
newBlock.position.copy(position);
scene.add(newBlock);
blocks.push(newBlock);
}
}
});
// Disable right-click menu
window.addEventListener('contextmenu', e => e.preventDefault());
// --- 5. GAME LOOP ---
const clock = new THREE.Clock();
function animate() {
requestAnimationFrame(animate);
const delta = clock.getDelta();
if (document.pointerLockElement === document.body) {
// Player movement logic
velocity.x -= velocity.x * 10.0 * delta;
velocity.z -= velocity.z * 10.0 * delta;
direction.z = Number(move.forward) - Number(move.backward);
direction.x = Number(move.right) - Number(move.left);
direction.normalize();
if (move.forward || move.backward) velocity.z -= direction.z * 40.0 * delta;
if (move.left || move.right) velocity.x -= direction.x * 40.0 * delta;
camera.translateX(-velocity.x * delta);
camera.translateZ(velocity.z * delta);
camera.position.y = 2; // Keep flat ground height
}
// Simple Mob AI (Moves back and forth)
mob.position.x += 0.02 * mobDirection;
if(mob.position.x > 12 || mob.position.x < 2) mobDirection *= -1;
renderer.render(scene, camera);
}
animate();
// Handle Resize
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
</script>
</body>
</html>
Landing Page
This ad does not have a landing page available
Network Timeline
Performance Summary
2
Requests
2
Domains
128KB
Transfer Size
598KB
Content Size
830.0ms
Dom Content Loaded
908.0ms
First Paint
831.0ms
Load Time
Domain Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...
Timings (ms)
Loading...
Total Time
Loading...
Content Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...