Scribd
Cargar
4K vistas2 páginas

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.

Cargado por

nandanisahani160
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como TXT, PDF, TXT o lee en línea desde Scribd
4K vistas2 páginas

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.

Cargado por

nandanisahani160
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como TXT, PDF, TXT o lee en línea desde Scribd

<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>

También podría gustarte