|
|
<!DOCTYPE html> |
|
|
<html> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<title>3D Typing Game</title> |
|
|
<style> |
|
|
body { |
|
|
margin: 0; |
|
|
} |
|
|
canvas { |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
} |
|
|
</style> |
|
|
<script src="https://threejs.org/build/three.min.js"></script> |
|
|
<script src="https://threejs.org/examples/js/loaders/FontLoader.js"></script> |
|
|
</head> |
|
|
<body> |
|
|
<canvas id="gameCanvas"></canvas> |
|
|
<script> |
|
|
var scene = new THREE.Scene(); |
|
|
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); |
|
|
camera.position.z = 30; |
|
|
|
|
|
var renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('gameCanvas') }); |
|
|
renderer.setSize(window.innerWidth, window.innerHeight); |
|
|
|
|
|
var light = new THREE.PointLight(0xffffff, 1, 100); |
|
|
light.position.set(0, 0, 30); |
|
|
scene.add(light); |
|
|
|
|
|
var loader = new THREE.FontLoader(); |
|
|
|
|
|
loader.load('https://threejs.org/examples/fonts/helvetiker_regular.typeface.json', function(font) { |
|
|
document.addEventListener('keydown', function(event) { |
|
|
if (event.keyCode >= 65 && event.keyCode <= 90) { |
|
|
var letter = String.fromCharCode(event.keyCode); |
|
|
var letterGeometry = new THREE.TextGeometry(letter, { |
|
|
font: font, |
|
|
size: 1, |
|
|
height: 0.5, |
|
|
curveSegments: 12, |
|
|
bevelEnabled: false |
|
|
}); |
|
|
var letterMaterial = new THREE.MeshLambertMaterial({ color: Math.random() * 0xffffff }); |
|
|
var letterMesh = new THREE.Mesh(letterGeometry, letterMaterial); |
|
|
letterMesh.position.set((Math.random() - 0.5) * 20, (Math.random() - 0.5) * 20, 0); |
|
|
scene.add(letterMesh); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
function animate() { |
|
|
requestAnimationFrame(animate); |
|
|
renderer.render(scene, camera); |
|
|
} |
|
|
animate(); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
