Thanks to visit codestin.com
Credit goes to www.scribd.com

Scribd
Upload
412 views2 pages

Minecraft Clone - HTML

The document is a JavaScript code snippet that sets up a 3D scene using the Three.js library. It creates a scene with a camera, lighting, and ground, allowing users to place blocks on the ground by clicking. The code includes an animation loop to continuously render the scene.

Uploaded by

nandanisahani160
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
412 views2 pages

Minecraft Clone - HTML

The document is a JavaScript code snippet that sets up a 3D scene using the Three.js library. It creates a scene with a camera, lighting, and ground, allowing users to place blocks on the ground by clicking. The code includes an animation loop to continuously render the scene.

Uploaded by

nandanisahani160
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

<html>import * as THREE from 'three';

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

// Scene setup
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth /
window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Controls
const controls = new OrbitControls(camera, renderer.domElement);
camera.position.set(0, 5, 10);
controls.update();

// Light
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(10, 10, 10).normalize();
scene.add(light);

// Ground
const groundGeometry = new THREE.PlaneGeometry(50, 50);
const groundMaterial = new THREE.MeshStandardMaterial({ color: 0x228B22, side:
THREE.DoubleSide });
const ground = new THREE.Mesh(groundGeometry, groundMaterial);
ground.rotation.x = -Math.PI / 2;
scene.add(ground);

// Block placement
const blockGeometry = new THREE.BoxGeometry();
const blockMaterial = new THREE.MeshStandardMaterial({ color: 0x8B4513 });
const blocks = [];

document.addEventListener('click', (event) => {


const mouse = new THREE.Vector2();
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

const raycaster = new THREE.Raycaster();


raycaster.setFromCamera(mouse, camera);
const intersects = raycaster.intersectObject(ground);

if (intersects.length > 0) {
const intersect = intersects[0];
const block = new THREE.Mesh(blockGeometry, blockMaterial);
block.position.set(
Math.round(intersect.point.x),
0.5,
Math.round(intersect.point.z)
);
scene.add(block);
blocks.push(block);
}
});

// Render loop
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
</html>

You might also like