File size: 1,995 Bytes
6744e6e c0fd12b 88425fd dadc545 88425fd dadc545 c0fd12b dadc545 88425fd dadc545 88425fd dadc545 88425fd dadc545 88425fd dadc545 88425fd dadc545 88425fd dadc545 88425fd dadc545 88425fd dadc545 88425fd d92817a dadc545 c0fd12b dadc545 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
<!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>
|