netget
Version:
Rette Adepto/ Recibido Directamente.
64 lines (54 loc) • 2.3 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Matrix-Style Space Environment</title>
<script src="https://cdn.jsdelivr.net/npm/three@0.150.0/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100%; display: block; }
</style>
</head>
<body>
<script>
// Set up the scene, camera, and renderer as usual
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// Add a simple grid to the scene
const gridHelper = new THREE.GridHelper(200, 50, 0x0033ff, 0x0033ff); // Blueish grid
scene.add(gridHelper);
// Set up and position the camera
camera.position.set(0, 50, 100);
camera.lookAt(0, 0, 0);
// Lighting
const ambientLight = new THREE.AmbientLight(0x404040); // Soft white light
scene.add(ambientLight);
const pointLight = new THREE.PointLight(0xffffff, 1, 100);
pointLight.position.set(10, 50, 25);
scene.add(pointLight);
// OrbitControls for camera movement
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.05;
controls.screenSpacePanning = false;
// Animation loop
function animate() {
requestAnimationFrame(animate);
controls.update(); // Only needed if controls.enableDamping = true, or if controls.autoRotate = true
renderer.render(scene, camera);
}
animate();
// Ensure the canvas resizes with the window
window.addEventListener('resize', onWindowResize, false);
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
</script>
</body>
</html>