Spaces:

gunship999
/

Gunship-3D-FPS

Running

Gunship-3D-FPS / index.html

gini1

Update index.html

b01cf37 verified 6 days ago

15.8 kB

	<!DOCTYPE html>
	<html>
	<head>
	<title>3D Open World Game</title>
	<style>
	body {
	margin: 0;
	font-family: Arial, sans-serif;
	}
	canvas {
	display: block;
	}
	#info {
	position: absolute;
	top: 10px;
	left: 10px;
	background: rgba(0,0,0,0.7);
	color: white;
	padding: 10px;
	border-radius: 5px;
	}
	#weather-controls {
	position: absolute;
	top: 10px;
	right: 10px;
	background: rgba(0,0,0,0.7);
	color: white;
	padding: 10px;
	border-radius: 5px;
	}
	#fileUpload {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: rgba(0,0,0,0.8);
	color: white;
	padding: 20px;
	border-radius: 10px;
	text-align: center;
	}
	#fileUpload.hidden {
	display: none;
	}
	#startButton {
	margin-top: 10px;
	padding: 10px 20px;
	background: #4CAF50;
	border: none;
	color: white;
	border-radius: 5px;
	cursor: pointer;
	}
	#startButton:disabled {
	background: #666;
	cursor: not-allowed;
	}
	</style>
	<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
	<script type="importmap">
	{
	"imports": {
	"three": "https://unpkg.com/three@0.149.0/build/three.module.js",
	"three/addons/": "https://unpkg.com/three@0.149.0/examples/jsm/"
	}
	}
	</script>
	</head>
	<body>
	<div id="info">
	Controls:<br>
	W/S/A/D - Move<br>
	SPACE - Jump<br>
	Mouse - Look Around<br>
	HP: <span id="hp">100</span>
	</div>
	<div id="weather-controls">
	Weather:
	<select id="weather-select" onchange="changeWeather(this.value)">
	<option value="clear">Clear</option>
	<option value="rain">Rain</option>
	<option value="fog">Fog</option>
	</select>
	</div>
	<div id="fileUpload">
	<h2>3D Open World Game</h2>
	<p>Upload your character model (GLB file)</p>
	<input type="file" id="glbFile" accept=".glb" />
	<br>
	<button id="startButton" disabled>Start Game</button>
	</div>

	<script type="module">
	import * as THREE from 'three';
	import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
	import { PointerLockControls } from 'three/addons/controls/PointerLockControls.js';

	let scene, camera, renderer, controls;
	let character = null;
	let uploadedModel = null;

	// File upload handling
	const fileInput = document.getElementById('glbFile');
	const startButton = document.getElementById('startButton');
	const uploadDiv = document.getElementById('fileUpload');

	fileInput.addEventListener('change', function(e) {
	const file = e.target.files[0];
	if (file) {
	uploadedModel = URL.createObjectURL(file);
	startButton.disabled = false;
	}
	});

	startButton.addEventListener('click', function() {
	if (uploadedModel) {
	uploadDiv.classList.add('hidden');
	initGame();
	}
	});

	function initGame() {
	// 기본 설정
	scene = new THREE.Scene();
	camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
	renderer = new THREE.WebGLRenderer({ antialias: true });
	renderer.setSize(window.innerWidth, window.innerHeight);
	renderer.shadowMap.enabled = true;
	document.body.appendChild(renderer.domElement);

	// 물리 시스템 변수
	const gravity = -0.5;
	let velocity = new THREE.Vector3();
	let isJumping = false;
	let canJump = true;
	let playerHeight = 2;

	// 캐릭터 상태
	let hp = 100;
	const hpElement = document.getElementById('hp');

	// 포인터 락 컨트롤
	controls = new PointerLockControls(camera, document.body);

	// 키보드 입력 처리
	const moveState = {
	forward: false,
	backward: false,
	left: false,
	right: false,
	jump: false
	};

	document.addEventListener('keydown', (event) => {
	switch (event.code) {
	case 'KeyW': moveState.forward = true; break;
	case 'KeyS': moveState.backward = true; break;
	case 'KeyA': moveState.left = true; break;
	case 'KeyD': moveState.right = true; break;
	case 'Space':
	if (canJump) {
	moveState.jump = true;
	velocity.y = 10;
	isJumping = true;
	canJump = false;
	}
	break;
	}
	});

	document.addEventListener('keyup', (event) => {
	switch (event.code) {
	case 'KeyW': moveState.forward = false; break;
	case 'KeyS': moveState.backward = false; break;
	case 'KeyA': moveState.left = false; break;
	case 'KeyD': moveState.right = false; break;
	case 'Space': moveState.jump = false; break;
	}
	});

	// 클릭으로 게임 시작
	document.addEventListener('click', () => {
	controls.lock();
	});

	// 날씨 시스템
	let raindrops = [];
	const rainCount = 1000;
	const rainGeometry = new THREE.BufferGeometry();
	const rainMaterial = new THREE.PointsMaterial({
	color: 0xaaaaaa,
	size: 0.1,
	transparent: true
	});

	function createRain() {
	const positions = new Float32Array(rainCount * 3);
	for (let i = 0; i < rainCount * 3; i += 3) {
	positions[i] = (Math.random() - 0.5) * 1000;
	positions[i + 1] = Math.random() * 500;
	positions[i + 2] = (Math.random() - 0.5) * 1000;
	}
	rainGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
	const rain = new THREE.Points(rainGeometry, rainMaterial);
	scene.add(rain);
	return rain;
	}

	let rain = createRain();
	rain.visible = false;

	// 안개 설정
	scene.fog = new THREE.Fog(0xcce0ff, 1, 1000);

	// 날씨 변경 함수
	window.changeWeather = function(weather) {
	switch(weather) {
	case 'clear':
	rain.visible = false;
	scene.fog.far = 1000;
	break;
	case 'rain':
	rain.visible = true;
	scene.fog.far = 100;
	break;
	case 'fog':
	rain.visible = false;
	scene.fog.far = 50;
	break;
	}
	};

	// NPC 시스템
	class NPC {
	constructor(position) {
	const geometry = new THREE.CapsuleGeometry(1, 2, 4, 8);
	const material = new THREE.MeshPhongMaterial({ color: 0xff0000 });
	this.mesh = new THREE.Mesh(geometry, material);
	this.mesh.position.copy(position);
	this.mesh.castShadow = true;
	this.velocity = new THREE.Vector3();
	this.direction = new THREE.Vector3();
	scene.add(this.mesh);
	}

	update(playerPosition) {
	this.direction.subVectors(playerPosition, this.mesh.position);
	this.direction.normalize();
	this.velocity.add(this.direction.multiplyScalar(0.1));
	this.velocity.multiplyScalar(0.95);
	this.mesh.position.add(this.velocity);

	const distance = this.mesh.position.distanceTo(playerPosition);
	if (distance < 2) {
	hp -= 1;
	hpElement.textContent = hp;
	if (hp <= 0) {
	alert('Game Over!');
	location.reload();
	}
	}
	}
	}

	// NPC 생성
	const npcs = [];
	for (let i = 0; i < 5; i++) {
	const position = new THREE.Vector3(
	(Math.random() - 0.5) * 100,
	2,
	(Math.random() - 0.5) * 100
	);
	npcs.push(new NPC(position));
	}

	// 지형 생성
	const terrainGeometry = new THREE.PlaneGeometry(1000, 1000, 100, 100);
	const terrainMaterial = new THREE.MeshStandardMaterial({
	color: 0x3a8c3a,
	wireframe: false
	});
	const terrain = new THREE.Mesh(terrainGeometry, terrainMaterial);
	terrain.rotation.x = -Math.PI / 2;
	terrain.receiveShadow = true;
	scene.add(terrain);

	// 지형 높낮이 설정
	const vertices = terrainGeometry.attributes.position.array;
	for (let i = 0; i < vertices.length; i += 3) {
	vertices[i + 2] = Math.random() * 10;
	}
	terrainGeometry.attributes.position.needsUpdate = true;
	terrainGeometry.computeVertexNormals();

	// 조명 설정
	const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
	scene.add(ambientLight);

	const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
	directionalLight.position.set(100, 100, 100);
	directionalLight.castShadow = true;
	scene.add(directionalLight);

	// 환경 오브젝트 추가
	function addEnvironmentObject(geometry, material, count, yOffset) {
	for (let i = 0; i < count; i++) {
	const mesh = new THREE.Mesh(geometry, material);
	const x = (Math.random() - 0.5) * 900;
	const z = (Math.random() - 0.5) * 900;
	const y = yOffset;
	mesh.position.set(x, y, z);
	mesh.castShadow = true;
	mesh.receiveShadow = true;
	scene.add(mesh);
	}
	}

	// 나무 생성
	const treeGeometry = new THREE.ConeGeometry(2, 8, 8);
	const treeMaterial = new THREE.MeshStandardMaterial({ color: 0x0d5c0d });
	addEnvironmentObject(treeGeometry, treeMaterial, 100, 4);

	// 바위 생성
	const rockGeometry = new THREE.DodecahedronGeometry(2);
	const rockMaterial = new THREE.MeshStandardMaterial({ color: 0x666666 });
	addEnvironmentObject(rockGeometry, rockMaterial, 50, 1);

	// 캐릭터 모델 로드
	const loader = new GLTFLoader();
	loader.load(uploadedModel, (gltf) => {
	character = gltf.scene;
	character.scale.set(0.5, 0.5, 0.5);
	character.position.y = 2;
	character.castShadow = true;
	character.receiveShadow = true;
	scene.add(character);

	character.traverse((node) => {
	if (node.isMesh) {
	node.castShadow = true;
	node.receiveShadow = true;
	}
	});
	});

	// 카메라 초기 위치
	camera.position.set(0, playerHeight, 0);

	// 애니메이션 루프
	function animate() {
	requestAnimationFrame(animate);

	if (controls.isLocked) {
	const direction = new THREE.Vector3();
	const rotation = camera.getWorldDirection(new THREE.Vector3());

	if (moveState.forward) direction.add(rotation);
	if (moveState.backward) direction.sub(rotation);
	if (moveState.left) direction.cross(camera.up).negate();
	if (moveState.right) direction.cross(camera.up);

	direction.y = 0;
	direction.normalize();

	// 물리 시스템 적용
	velocity.y += gravity;
	camera.position.y += velocity.y * 0.1;

	// 바닥 충돌 검사
	if (camera.position.y <= playerHeight) {
	camera.position.y = playerHeight;
	velocity.y = 0;
	isJumping = false;
	canJump = true;
	}

	// 이동 속도 적용
	const moveSpeed = 0.5;
	controls.moveRight(-direction.z * moveSpeed);
	controls.moveForward(direction.x * moveSpeed);

	// 캐릭터 모델 업데이트
	if (character) {
	character.position.copy(camera.position);
	character.position.y -= playerHeight;
	if (direction.length() > 0) {
	const angle = Math.atan2(direction.x, direction.z);
	character.rotation.y = angle;
	}
	}

	// 비 업데이트
	if (rain.visible) {
	const positions = rain.geometry.attributes.position.array;
	for (let i = 1; i < positions.length; i +=3) {
	positions[i] -= 2;
	if (positions[i] < 0) {
	positions[i] = 500;
	}
	}
	rain.geometry.attributes.position.needsUpdate = true;
	}

	// NPC 업데이트
	npcs.forEach(npc => npc.update(camera.position));
	}

	renderer.render(scene, camera);
	}

	// 윈도우 리사이즈 처리
	window.addEventListener('resize', () => {
	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();
	renderer.setSize(window.innerWidth, window.innerHeight);
	});

	// 애니메이션 시작
	animate();
	}

	// 날씨 변경 함수를 전역으로 노출
	window.changeWeather = function(weather) {
	// 이 함수는 게임 초기화 후 재정의됩니다
	console.log('Game not initialized yet');
	};
	</script>
	</body>
	</html>