Spaces:
Running
Running
File size: 4,077 Bytes
a32dc8b |
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 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 |
// Simple Three.js test application
import * as THREE from 'https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js';
class SimpleVillageApp {
constructor() {
this.scene = null;
this.camera = null;
this.renderer = null;
this.controls = null;
this.init();
}
init() {
console.log('Initializing Simple Village App...');
this.initThreeJS();
this.createEnvironment();
this.animate();
console.log('Simple Village App initialized successfully');
}
initThreeJS() {
// Scene
this.scene = new THREE.Scene();
this.scene.background = new THREE.Color(0x87CEEB);
// Camera
this.camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
this.camera.position.set(20, 20, 20);
this.camera.lookAt(0, 0, 0);
// Renderer
this.renderer = new THREE.WebGLRenderer({ antialias: true });
this.renderer.setSize(window.innerWidth, window.innerHeight);
this.renderer.shadowMap.enabled = true;
const container = document.getElementById('container');
if (container) {
container.appendChild(this.renderer.domElement);
console.log('Renderer added to DOM');
}
// Lighting
const ambientLight = new THREE.AmbientLight(0x404040, 0.6);
this.scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
directionalLight.position.set(10, 10, 5);
directionalLight.castShadow = true;
this.scene.add(directionalLight);
// Ground plane
const groundGeometry = new THREE.PlaneGeometry(100, 100);
const groundMaterial = new THREE.MeshLambertMaterial({
color: 0x228B22,
transparent: true,
opacity: 0.8
});
const ground = new THREE.Mesh(groundGeometry, groundMaterial);
ground.rotation.x = -Math.PI / 2;
ground.receiveShadow = true;
this.scene.add(ground);
// Grid helper
const gridHelper = new THREE.GridHelper(100, 100, 0x444444, 0x222222);
this.scene.add(gridHelper);
window.addEventListener('resize', () => this.onWindowResize());
}
createEnvironment() {
// Create some simple buildings
this.createBuilding(5, 0, 5, 0x8B4513);
this.createBuilding(-5, 0, -5, 0x696969);
this.createBuilding(0, 0, 0, 0xFFD700);
// Create some villagers
this.createVillager(0, 0, 0, 0xff0000);
this.createVillager(5, 0, 5, 0x00ff00);
this.createVillager(-3, 0, -3, 0x0000ff);
}
createBuilding(x, y, z, color) {
const geometry = new THREE.BoxGeometry(3, 3, 3);
const material = new THREE.MeshLambertMaterial({ color: color });
const mesh = new THREE.Mesh(geometry, material);
mesh.position.set(x, y + 1.5, z);
mesh.castShadow = true;
mesh.receiveShadow = true;
this.scene.add(mesh);
}
createVillager(x, y, z, color) {
const geometry = new THREE.SphereGeometry(0.5, 16, 16);
const material = new THREE.MeshLambertMaterial({ color: color });
const mesh = new THREE.Mesh(geometry, material);
mesh.position.set(x, y + 0.5, z);
mesh.castShadow = true;
mesh.receiveShadow = true;
this.scene.add(mesh);
}
onWindowResize() {
this.camera.aspect = window.innerWidth / window.innerHeight;
this.camera.updateProjectionMatrix();
this.renderer.setSize(window.innerWidth, window.innerHeight);
}
animate() {
requestAnimationFrame(() => this.animate());
// Simple rotation for testing
this.scene.rotation.y += 0.001;
this.renderer.render(this.scene, this.camera);
}
}
// Initialize the application when the page loads
document.addEventListener('DOMContentLoaded', () => {
new SimpleVillageApp();
}); |