Meta Description" name="description" />
<!DOCTYPE html>
<html lang="my">
<head>
<meta charset="UTF-8">
<title>3D Open World Sandbox Game</title>
<style>
body { margin: 0; overflow: hidden; font-family: sans-serif; }
#info {
position: absolute;
top: 10px;
left: 10px;
color: white;
background: rgba(0,0,0,0.6);
padding: 10px 15px;
border-radius: 8px;
font-size: 14px;
}
</style>
</head>
<body>
<div id="info">
<h3>3D Open World Game</h3>
<p><b>WASD / Arrow Keys:</b> ရွေ့လျားရန်</p>
<p><b>Mouse Click:</b> ပစ္စည်း (Cube) အသစ်ချရန်</p>
</div>
<!-- Three.js Library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
// Scene, Camera, Renderer ဖန်တီးခြင်း
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);
// အလင်းရောင် ထည့်သွင်းခြင်း
const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
scene.add(ambientLight);
const dirLight = new THREE.DirectionalLight(0xffffff, 0.8);
dirLight.position.set(10, 20, 10);
scene.add(dirLight);
// မြေပြင် (Ground) ဖန်တီးခြင်း
const planeGeo = new THREE.PlaneGeometry(100, 100);
const planeMat = new THREE.MeshStandardMaterial({ color: 0x4CAF50 }); // အစိမ်းရောင် မြေပြင်
const plane = new THREE.Mesh(planeGeo, planeMat);
plane.rotation.x = -Math.PI / 2;
scene.add(plane);
// ကစားသမား (Camera Position) တည်နေရာ
camera.position.set(0, 5, 10);
// ခလုတ်နှိပ်ခြင်း ထိန်းချုပ်ရန်
const keys = {};
window.addEventListener('keydown', (e) => keys[e.code] = true);
window.addEventListener('keyup', (e) => keys[e.code] = false);
// မောက်စ်ကလစ်နှိပ်ပြီး ပစ္စည်းအသစ် (Cube) ဆောက်ခြင်း
window.addEventListener('click', () => {
const boxGeo = new THREE.BoxGeometry(2, 2, 2);
const boxMat = new THREE.MeshStandardMaterial({ color: Math.random() * 0xffffff });
const box = new THREE.Mesh(boxGeo, boxMat);
// ကင်မရာရှေ့မှာ ပစ္စည်းပေါ်လာစေရန်
box.position.set(
camera.position.x + (Math.random() - 0.5) * 5,
1,
camera.position.z - 5
);
scene.add(box);
});
// ဂိမ်း Loops (ရွေ့လျားမှုအတွက်)
function animate() {
requestAnimationFrame(animate);
// WASD ဖြင့် ကင်မရာ ရွေ့လျားရန်
const speed = 0.1;
if (keys['KeyW'] || keys['ArrowUp']) camera.position.z -= speed;
if (keys['KeyS'] || keys['ArrowDown']) camera.position.z += speed;
if (keys['KeyA'] || keys['ArrowLeft']) camera.position.x -= speed;
if (keys['KeyD'] || keys['ArrowRight']) camera.position.x += speed;
renderer.render(scene, camera);
}
animate();
// Screen Size ပြောင်းလဲသည့်အခါ ချိန်ညှိရန်
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
</script>
</body>
</html>
2
2
123KB
594KB
1,293.0ms
172.0ms
1,293.0ms