index.scroll
Changed around line 15: script
- three.min.js
- stars.js
-
+
+ three.min.js
+ stars.js
index.scroll
Changed around line 1
+ stars.css
+
Changed around line 16: script
- stars.css
stars.css
Changed around line 1
+ body {
+ margin: 0;
+ background: black;
+ }
+ #controls {
+ position: absolute;
+ top: 10px;
+ left: 10px;
+ background: rgba(255, 255, 255, 0.2);
+ padding: 10px;
+ border-radius: 5px;
+ color: white;
+ }
+ input, button {
+ margin: 5px;
+ padding: 5px;
+ background: rgba(255, 255, 255, 0.1);
+ border: 1px solid rgba(255, 255, 255, 0.3);
+ color: white;
+ border-radius: 3px;
+ }
+ button:hover {
+ background: rgba(255, 255, 255, 0.2);
+ }
+ .slider-container {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ margin-top: 10px;
+ padding-top: 10px;
+ border-top: 1px solid rgba(255, 255, 255, 0.3);
+ }
+ #speedSlider {
+ flex-grow: 1;
+ accent-color: #ffffff;
+ }
+ #speedValue {
+ min-width: 3em;
+ text-align: right;
+ }
stars.html
Changed around line 0
-
-
-
-
- Speed:
-
- 0
-
-
-
index.scroll
Changed around line 16: script
+
+
+ Speed:
+
+ 0
+
index.scroll
Changed around line 14: script
- stars.html
+ stars.css
+ stars.js
stars.css
stars.js
Changed around line 1
+ let scene, camera, renderer;
+ let stars = [];
+ let textMeshes = [];
+ let zPosition = -5; // Starting Z position for new text
+ let speed = 0.04; // Current speed (starts paused)
+
+ function init() {
+ scene = new THREE.Scene();
+ scene.background = new THREE.Color(0x000000);
+
+ camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+ camera.position.z = 5;
+
+ renderer = new THREE.WebGLRenderer({ antialias: true });
+ renderer.setSize(window.innerWidth, window.innerHeight);
+ document.body.appendChild(renderer.domElement);
+
+ // Add lights
+ const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
+ scene.add(ambientLight);
+
+ const pointLight = new THREE.PointLight(0xffffff, 1);
+ pointLight.position.set(5, 5, 5);
+ scene.add(pointLight);
+
+ // Create stars
+ createStars();
+
+
+ window.lines.split("\n").map(line => createText(line))
+
+ // Add event listeners
+ document.addEventListener('wheel', onMouseWheel);
+ document.addEventListener('mousemove', onMouseMove);
+ document.addEventListener('mousedown', onMouseDown);
+ document.addEventListener('mouseup', onMouseUp);
+
+ // Set up speed slider
+ const speedSlider = document.getElementById('speedSlider');
+ const speedValue = document.getElementById('speedValue');
+ speedSlider.addEventListener('input', function(e) {
+ speed = e.target.value / 500; // Convert to a reasonable speed value
+ speedValue.textContent = e.target.value;
+ });
+ }
+
+ function createStars() {
+ const starsGeometry = new THREE.BufferGeometry();
+ const starPositions = [];
+
+ for(let i = 0; i < 5000; i++) {
+ const x = (Math.random() - 0.5) * 2000;
+ const y = (Math.random() - 0.5) * 2000;
+ const z = (Math.random() - 0.5) * 2000;
+ starPositions.push(x, y, z);
+ }
+
+ starsGeometry.setAttribute('position',
+ new THREE.Float32BufferAttribute(starPositions, 3));
+
+ const starsMaterial = new THREE.PointsMaterial({
+ color: 0xFFFFFF,
+ size: 2,
+ sizeAttenuation: true
+ });
+
+ const starField = new THREE.Points(starsGeometry, starsMaterial);
+ scene.add(starField);
+ stars.push(starField);
+ }
+
+ function createText(text) {
+ // Create canvas for text
+ const canvas = document.createElement('canvas');
+ const context = canvas.getContext('2d');
+ canvas.width = 512;
+ canvas.height = 128;
+
+ // Set text properties
+ context.fillStyle = 'rgba(0, 0, 0, 0)'; // Transparent background
+ context.fillRect(0, 0, canvas.width, canvas.height);
+ context.fillStyle = '#ffffff'; // White text
+ context.font = '60px Arial';
+ context.textAlign = 'center';
+ context.textBaseline = 'middle';
+ context.fillText(text, canvas.width / 2, canvas.height / 2);
+
+ // Create texture from canvas
+ const texture = new THREE.CanvasTexture(canvas);
+
+ // Create plane geometry for the text
+ const geometry = new THREE.PlaneGeometry(4, 1);
+ const material = new THREE.MeshBasicMaterial({
+ map: texture,
+ transparent: true,
+ side: THREE.DoubleSide
+ });
+
+ const textMesh = new THREE.Mesh(geometry, material);
+ textMesh.position.z = zPosition; // Place text at current Z position
+ zPosition -= 5; // Move next text further back
+
+ scene.add(textMesh);
+ textMeshes.push(textMesh);
+ }
+
+ function updateText() {
+ const newText = document.getElementById('textInput').value;
+ createText(newText);
+ }
+
+ // Mouse control variables
+ let isMouseDown = false;
+ let mouseX = 0;
+ let mouseY = 0;
+
+ function onMouseDown(event) {
+ isMouseDown = true;
+ mouseX = event.clientX;
+ mouseY = event.clientY;
+ }
+
+ function onMouseUp() {
+ isMouseDown = false;
+ }
+
+ function onMouseMove(event) {
+ if (isMouseDown) {
+ const deltaX = event.clientX - mouseX;
+ const deltaY = event.clientY - mouseY;
+
+ camera.position.x += deltaX * 0.01;
+ camera.position.y -= deltaY * 0.01;
+
+ mouseX = event.clientX;
+ mouseY = event.clientY;
+ }
+ }
+
+ function onMouseWheel(event) {
+ camera.position.z += event.deltaY * 0.01;
+
+ // Animate stars when zooming
+ stars.forEach(starField => {
+ starField.rotation.z += event.deltaY * 0.0001;
+ });
+ }
+
+ function animate() {
+ requestAnimationFrame(animate);
+
+ // Automatic movement based on speed
+ if (speed > 0) {
+ camera.position.z -= speed;
+
+ // Rotate stars based on movement speed
+ stars.forEach(starField => {
+ starField.rotation.z += speed * 0.01;
+ });
+ }
+
+ renderer.render(scene, camera);
+ }
+
+ window.addEventListener('resize', onWindowResize, false);
+
+ function onWindowResize() {
+ camera.aspect = window.innerWidth / window.innerHeight;
+ camera.updateProjectionMatrix();
+ renderer.setSize(window.innerWidth, window.innerHeight);
+ }
+
+ init();
+ animate();
stars.html
Changed around line 48
-
stars.js