<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Chess</title>
<style>
body { margin: 0; overflow: hidden; }
canvas { display: block; }
</style>
</head>
<body>
<!-- Three.js -->
<script src="https://cdn.jsdelivr.net/npm/three@0.155.0/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.155.0/examples/js/controls/OrbitControls.js"></script>
<script>
// Scene
const scene = new THREE.Scene();
scene.background = new THREE.Color(0xaaaaaa);
// Camera
const camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 100);
camera.position.set(5, 8, 10);
camera.lookAt(0, 0, 0);
// Renderer
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// Lights
const dirLight = new THREE.DirectionalLight(0xffffff, 1);
dirLight.position.set(5, 10, 7.5);
scene.add(dirLight);
const ambientLight = new THREE.AmbientLight(0x404040);
scene.add(ambientLight);
// Controls
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.target.set(0, 0, 0);
controls.update();
// Load textures
const loader = new THREE.TextureLoader();
const whiteTexture = loader.load('GFX/whiteWood.jpg');
const blackTexture = loader.load('GFX/blackWood.jpg');
// Create board
function createBoard() {
const board = new THREE.Group();
const tileSize = 1;
for (let row = 0; row < 8; row++) {
for (let col = 0; col < 8; col++) {
const geometry = new THREE.BoxGeometry(tileSize, 0.1, tileSize);
const material = new THREE.MeshPhongMaterial({
map: (row + col) % 2 === 0 ? whiteTexture : blackTexture
});
const tile = new THREE.Mesh(geometry, material);
tile.position.set(col - 3.5, 0, row - 3.5);
board.add(tile);
}
}
scene.add(board);
}
// Create pieces
function createPiece(type, color) {
let geometry;
switch(type) {
case 'pawn': geometry = new THREE.CylinderGeometry(0.2, 0.2, 0.5, 32); break;
case 'rook': geometry = new THREE.BoxGeometry(0.4, 0.6, 0.4); break;
case 'knight': geometry = new THREE.ConeGeometry(0.25, 0.6, 32); break;
case 'bishop': geometry = new THREE.CylinderGeometry(0.15, 0.3, 0.7, 32); break;
case 'queen': geometry = new THREE.CylinderGeometry(0.2, 0.4, 0.8, 32); break;
case 'king': geometry = new THREE.CylinderGeometry(0.25, 0.35, 0.9, 32); break;
}
const texture = loader.load(color === 'white' ? 'GFX/whiteWood.jpg' : 'GFX/blackWood.jpg');
const material = new THREE.MeshPhongMaterial({ map: texture });
return new THREE.Mesh(geometry, material);
}
function placePieces() {
const pieceOrder = ['rook','knight','bishop','queen','king','bishop','knight','rook'];
// White pieces
for (let i = 0; i < 8; i++) {
let mainPiece = createPiece(pieceOrder[i], 'white');
mainPiece.position.set(i - 3.5, 0.3, -3.5);
scene.add(mainPiece);
let pawn = createPiece('pawn', 'white');
pawn.position.set(i - 3.5, 0.3, -2.5);
scene.add(pawn);
}
// Black pieces
for (let i = 0; i < 8; i++) {
let mainPiece = createPiece(pieceOrder[i], 'black');
mainPiece.position.set(i - 3.5, 0.3, 3.5);
scene.add(mainPiece);
let pawn = createPiece('pawn', 'black');
pawn.position.set(i - 3.5, 0.3, 2.5);
scene.add(pawn);
}
}
// Initialize
createBoard();
placePieces();
// Animate
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
// Handle window resize
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
</script>
</body>
</html>