We are building a single-page web app entirely in one file: index.html.
 Requirements:
 - Use the pre-provided three.min.js (so we'll include it via <script src="three.min.js"></script>)
 - Visualize the Lorenz attractor as a glowing 3D butterfly trajectory that draws over time.
 - Include orbit-drag camera controls (we can use THREE.OrbitControls).

 Steps for the Lorenz attractor:
 1. We'll compute points of the Lorenz attractor by solving the Lorenz system of ODEs.
 2. We'll use a series of points to form a line (using THREE.Line or THREE.BufferGeometry) and update it over time.
 3. To make it "glowing", we can use a material with emissive property or a shader. However, a simpler way is to use a points system with a custom shader? 
    But the requirement says "butterfly trajectory", meaning a connected line. We can use a THREE.Line with a material that has a glow effect.

 Alternative approach for glow:
   - We can use a THREE.Line with a basic material that has an emissive color and then add a bloom pass for glow? 
   - However, the requirement states to avoid external resources and keep it self-contained. We don't want to include additional THREE.js post-processing files.

 Since we are limited to the base THREE (with three.min.js), we'll stick to simple materials and maybe simulate a glow by:
   - Using a tube geometry? Or use a thick line with a gradient from a bright color to transparent.

 4. We can use a transparent cylinder (tube) for the line? But that might be heavy for a long trajectory.

 Another idea: use a line with a texture that has a gradient (like a glowy texture). We can create a canvas texture dynamically.

 However, let's keep it simple: we'll use a set of points that grow in number and connect them with a line that has a material with emissive color and some transparency.

 5. We'll update the geometry by adding points over time.

 For camera controls: we'll include the OrbitControls from the THREE.js examples? But note: we don't have an extra file for OrbitControls.

 Since we are only allowed one HTML file and we have three.min.js, but OrbitControls is not included in three.min.js. So we must find a way.

 Option: 
   - The problem says "three.min.js" is present. It does not say anything about OrbitControls. We must assume that OrbitControls is not included.

 We have two options:
   a) Embed the OrbitControls source code into our HTML? (as long as we don't break the self-contained requirement)
   b) Implement a simple orbit control by ourselves? That would be complex.

 Since OrbitControls is part of the THREE examples, and we are allowed to use the pre-provided three.min.js, we might need to include the OrbitControls source from the web? 
 But the requirement says: "NO external resources, CDNs or network requests".

 Therefore, we must avoid including OrbitControls from a CDN.

 We have to do without OrbitControls? Or we can try to embed the source? But note: the requirement says the artifact runs fully sandboxed with no network.

 However, the problem says: "These library file(s) are ALREADY present in the current directory — load each with a plain <script src="NAME"></script> using its exact filename"

 It only lists three.min.js. We don't have OrbitControls file in the current directory. So we cannot rely on having OrbitControls.

 Alternative: we can include the OrbitControls source from the THREE.js repository? But we are not allowed to create extra files.

 Solution: We can embed the OrbitControls as an inline script? But note: we are only allowed to write one file (index.html). We can include the OrbitControls code directly in the HTML within a <script> tag.

 How to get the OrbitControls source? It's available in the THREE.js repository: 
   https://github.com/mrdoob/three.js/blob/master/examples/jsm/controls/OrbitControls.js

 But we cannot rely on network. We must hope that the user has provided OrbitControls? The tool call above says: we have three.min.js. So we don't have it.

 We have to change the plan: can we do without OrbitControls? We can implement simple drag controls? 

 Considering complexity, let me check: the problem says "orbit-drag camera controls". So we must have it.

 We have to either:
   - Embed the entire OrbitControls code in our HTML? But that would be a lot of code and we don't know the exact version.

 Since we don't know the version of THREE, and we don't have OrbitControls, and we cannot use network, we must find a way within the constraints.

 Alternatively, we can write a minimal version of orbit controls? That might be feasible because we only need rotation and zoom with mouse.

 However, to save time and complexity, and since the requirement does not specify the exact controls, I will assume that we can use the built-in OrbitControls if we have it? But we don't.

 So, we'll embed the OrbitControls source in our HTML. But wait: we have three.min.js only. So we don't have the OrbitControls module.

 How about: we include the OrbitControls source from the three.js project as a string in our script? 

 We can get a stable version from a CDN? Not allowed.

 Alternatively, we could hope that the user has a local copy? But the problem says only three.min.js is present.

 Therefore, we cannot use OrbitControls.

 We need a solution: we'll implement a very simple orbit control? Or use THREE.TrackballControls? Same problem.

 Let me check the available controls in three.min.js: it doesn't include any controls.

 We must implement a very simple version:

   - On mouse down: record the current position.
   - On mouse move: calculate the change in position and update the camera's rotation.
   - On mouse wheel: zoom.

 But note: we only have to build a simple orbit control that rotates the camera around a target (the center of the scene).

 We'll do:

   let isDragging = false;
   let previousMousePosition = { x:0, y:0 };

   function onMouseDown(event) {
       isDragging = true;
       previousMousePosition = { x: event.clientX, y: event.clientY };
   }

   function onMouseUp(event) {
       isDragging = false;
   }

   function onMouseMove(event) {
       if (!isDragging) return;
       const deltaMove = {
           x: event.clientX - previousMousePosition.x,
           y: event.clientY - previousMousePosition.y
       };

       // Rotate the camera around the center
       camera.rotation.y += deltaMove.x * 0.01;
       camera.rotation.x += deltaMove.y * 0.01; // note: be cautious with up vector

       previousMousePosition = { x: event.clientX, y: event.clientY };
   }

   function onMouseWheel(event) {
       // For zoom, we can move the camera along the Z axis? Or adjust fov?
       // Since we are in an orbit control, we might want to move the camera closer to the target.
       camera.position.z *= (event.deltaY > 0) ? 1.1 : 0.9;
   }

   But note: rotating with camera.rotation only works if the camera is looking at the center? We can set the camera to look at the center (0,0,0) and then rotate around.

   We'll set:
        camera.position.set(0,0,50);
        camera.lookAt(0,0,0);

   Then when rotating, we are rotating the camera around the origin? But the problem: we are changing the rotation, but we lose the lookAt behavior.

   Instead, we should update the camera position around the target:

   A better approach: use spherical coordinates.

   Let's store the spherical angles (phi, theta) and the radius (distance). Then update phi and theta based on mouse movement.

   Steps:

      let spherical = { 
          radius: 50, 
          theta: Math.PI/2, // polar angle (from positive y-axis)
          phi: 0 // azimuthal angle (in the xy plane)
      }

      Then update:
          spherical.theta = Math.max(0.1, Math.min(Math.PI - 0.1, spherical.theta + deltaY * 0.01));
          spherical.phi += deltaX * 0.01;

      Then compute the camera position:

        camera.position.x = spherical.radius * Math.sin(spherical.theta) * Math.cos(spherical.phi);
        camera.position.y = spherical.radius * Math.cos(spherical.theta);
        camera.position.z = spherical.radius * Math.sin(spherical.theta) * Math.sin(spherical.phi);

      camera.lookAt(0,0,0);

   And then for zoom: change the radius.

   This is a minimal orbit control.

 6. We'll implement our own minimal orbit control.

 Steps for the Lorenz attractor:

   The Lorenz equations:

      dx/dt = sigma * (y - x)
      dy/dt = x * (rho - z) - y
      dz/dt = x * y - beta * z

   Parameters: we'll use the classic: sigma=10, rho=28, beta=8/3.

   We'll start at (0.1, 0, 0) and do Euler steps? But Euler is unstable, so we'll use a better method? Like Runge-Kutta? 
   But for simplicity, we can do Euler and use a small step.

   However, the Lorenz attractor needs a stable integration, so we'll use a better method: we'll use a 4th order Runge-Kutta (RK4) method.

   We'll precompute some points? Or we can compute dynamically as we add points.

 7. We'll continuously add points to the line geometry over time.

 8. We'll use points as well? Or just line?

   We want a glowing trail. We can do:

     - A line that is built over time, and we update the geometry by adding new points.
     - The line material: we can use THREE.LineBasicMaterial with a bright color and set to transparent and adjust the opacity per segment? 

   Alternatively, we can use a shader on the line to make the head brighter? But we can't do custom shaders without extra code.

   We can simulate by having a circular gradient texture for the line. We'll create a canvas texture for the line texture.

   Steps for the texture:

        const canvas = document.createElement('canvas');
        canvas.width = 256;
        canvas.height = 1;
        const context = canvas.getContext('2d');
        const gradient = context.createLinearGradient(0,0,256,0);
        gradient.addColorStop(0, 'rgba(0,0,0,0)'); // transparent at start
        gradient.addColorStop(0.1, 'rgba(255,255,255,1)'); // full white at 10%
        gradient.addColorStop(0.5, 'rgba(100,100,255,0.8)'); // then blue and fade out
        gradient.addColorStop(1, 'rgba(0,0,0,0)'); // transparent at end
        context.fillStyle = gradient;
        context.fillRect(0,0,256,1);

        Then create a texture from this canvas and use it in the line material as LineDashedMaterial? Or LineBasicMaterial with map.

   But note: three.js lines don't support textures? Actually, the LineBasicMaterial has a `map` property for a texture.

   We can try:

        const lineMaterial = new THREE.LineBasicMaterial({
            color: 0x4488ff,
            linewidth: 2,
            map: texture, // the gradient map
            transparent: true
        });

   However, the documentation says that linewidth doesn't work without WebGLRenderer's lineWidth set, which is not consistently supported.

   To make the line thick we can use a TubeGeometry? But that would be heavy.

 9. Another idea: use a series of particles? We can draw a thick line using a Points material with additive blending? 

   We'll do:
        particlesGeometry = new THREE.BufferGeometry();
        particlesMaterial = new THREE.PointsMaterial({
            color: 0x4488ff,
            size: 0.3,
            blending: THREE.AdditiveBlending, // for glow effect
            transparent: true,
            opacity: 1
        });

   Then we add points as we compute them.

   But the problem says "butterfly trajectory", meaning a continuous curve. We can see the particles as a trace? That might work.

 10. We'll use particles (THREE.Points) for the trail. We can set the point size to get a continuous trail.

 11. Algorithm:

        Initialize: 
            scene, camera, renderer, controls

        Parameters for Lorenz:
            sigma = 10, rho = 28, beta = 8/3
        Initial state: (0.1, 0, 0)
        Time step: dt = 0.01

        Array of positions: we'll store the positions for the trail. We'll discard old points? Or we can keep a fixed number? 
        We want it to grow continuously? Or until it hits a limit? We'll set a max of 5000 points? And then remove the first when we add a new one? Or we can let it grow indefinitely? Performance may degrade.

        Alternatively, we can update a buffer geometry without keeping the entire array? But we are adding one point at a time.

        Steps in the animation loop:

            // Compute new point using RK4 integration
            let newPoint = integrate(currentState, dt);
            currentState = newPoint;

            // Add to the geometry
            positions.push(newPoint.x, newPoint.y, newPoint.z);
            // Update the particle system's geometry.

            if (positions.length > MAX_POINTS * 3) {
                // Remove the oldest point? 
                positions.splice(0, 3); // remove first three numbers
            }

            particlesGeometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));

 12. We'll use RK4 for integration.

 Implementation:

        const dt = 0.01;

        function f(state) {
            const [x, y, z] = state;
            return [
                sigma * (y - x),
                x * (rho - z) - y,
                x * y - beta * z
            ];
        }

        function rk4(state) {
            const k1 = f(state);
            const k2 = f(state.map((val, idx) => val + 0.5*dt*k1[idx]));
            const k3 = f(state.map((val, idx) => val + 0.5*dt*k2[idx]));
            const k4 = f(state.map((val, idx) => val + dt*k3[idx]));

            const nextState = state.map((val, idx) => val + dt * (k1[idx] + 2*k2[idx] + 2*k3[idx] + k4[idx]) / 6);
            return nextState;
        }

 13. Now, we build the HTML structure:

        <!DOCTYPE html>
        <html>
        <head>
            <meta charset="utf-8">
            <title>Lorenz Attractor</title>
            <script src="three.min.js"></script>
            <style>
                body { margin: 0; }
                canvas { display: block; }
            </style>
        </head>
        <body>
            <script>
                // Our code here
            </script>
        </body>
        </html>

 14. We'll write the JavaScript code within the <script> tag.

 Considering the constraints and complexity, we'll go with the particles approach and minimal orbit control.

 Steps of the script:

        // Constants
        const sigma = 10;
        const rho = 28;
        const beta = 8/3;
        const dt = 0.01;
        const MAX_POINTS = 5000;

        // Set up
        let scene = new THREE.Scene();
        scene.background = new THREE.Color(0x000000);

        let camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        // Camera position: set in spherical
        camera.position.set(0, 0, 50);
        camera.lookAt(0,0,0);

        let renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // Particles for the trail
        let particlesGeometry = new THREE.BufferGeometry();
        let positions = []; // will hold x,y,z of all points

        // Initial point: start at (0.1,0,0)
        let currentState = [0.1, 0, 0];
        positions.push(...currentState);

        // Material for points: we want glowing
        let particlesMaterial = new THREE.PointsMaterial({
            color: 0x4488ff,
            size: 0.3,
            blending: THREE.AdditiveBlending,
            transparent: true,
            opacity: 1
        });

        let particles = new THREE.Points(particlesGeometry, particlesMaterial);
        scene.add(particles);

        // Orbit controls state for our custom control
        let isDragging = false;
        let previousMousePosition = { x:0, y:0 };
        let spherical = {
            radius: 50,
            theta: Math.PI/2, // starting at top? -> this is polar angle: 0 is top, PI is bottom; we start at equator? Let's start with a side view.
            phi: 0
        };

        // Event listeners for mouse controls
        document.addEventListener('mousedown', onMouseDown, false);
        document.addEventListener('mouseup', onMouseUp, false);
        document.addEventListener('mousemove', onMouseMove, false);
        document.addEventListener('wheel', onMouseWheel, false);

        function onMouseDown(event) {
            isDragging = true;
            previousMousePosition.x = event.clientX;
            previousMousePosition.y = event.clientY;
        }

        function onMouseUp(event) {
            isDragging = false;
        }

        function onMouseMove(event) {
            if (isDragging) {
                const deltaX = event.clientX - previousMousePosition.x;
                const deltaY = event.clientY - previousMousePosition.y;

                // Update phi and theta
                spherical.phi -= deltaX * 0.01; // azimuthal angle (we rotate horizontally by moving mouse horizontally)
                spherical.theta -= deltaY * 0.01; // polar angle (we rotate vertically by moving mouse vertically)

                // Clamp theta to avoid flipping
                spherical.theta = Math.max(0.1, Math.min(Math.PI - 0.1, spherical.theta));

                // Update camera position
                camera.position.x = spherical.radius * Math.sin(spherical.theta) * Math.cos(spherical.phi);
                camera.position.y = spherical.radius * Math.cos(spherical.theta);
                camera.position.z = spherical.radius * Math.sin(spherical.theta) * Math.sin(spherical.phi);

                camera.lookAt(0,0,0);

                previousMousePosition.x = event.clientX;
                previousMousePosition.y = event.clientY;
            }
        }

        function onMouseWheel(event) {
            spherical.radius = Math.max(1, Math.min(100, spherical.radius * (event.deltaY > 0 ? 1.1 : 0.9)));
            camera.position.x = spherical.radius * Math.sin(spherical.theta) * Math.cos(spherical.phi);
            camera.position.y = spherical.radius * Math.cos(spherical.theta);
            camera.position.z = spherical.radius * Math.sin(spherical.theta) * Math.sin(spherical.phi);
            camera.lookAt(0,0,0);
        }

        // Window resize handler
        window.addEventListener('resize', function() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        });

        // Integration function
        function f(state) {
            const [x, y, z] = state;
            return [
                sigma * (y - x),
                x * (rho - z) - y,
                x * y - beta * z
            ];
        }

        function rk4(state) {
            const k1 = f(state);
            const k2 = f(state.map((val, idx) => val + 0.5*dt*k1[idx]));
            const k3 = f(state.map((val, idx) => val + 0.5*dt*k2[idx]));
            const k4 = f(state.map((val, idx) => val + dt*k3[idx]));

            const nextState = state.map((val, idx) => val + dt * (k1[idx] + 2*k2[idx] + 2*k3[idx] + k4[idx]) / 6);
            return nextState;
        }

        // Animation loop
        function animate() {
            requestAnimationFrame(animate);

            // Update state with one step
            currentState = rk4(currentState);
            positions.push(...currentState);

            // If we have more points than max, remove the first
            if (positions.length > MAX_POINTS*3) {
                positions.splice(0, 3);
            }

            particlesGeometry.dispose();
            particlesGeometry = new THREE.BufferGeometry();
            particlesGeometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
            particles.geometry = particlesGeometry;

            renderer.render(scene, camera);
        }

        // Also we need to update the geometry on the particles at the beginning? We did push one point, so let's set it now.

        particlesGeometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));

        // Start animation
        animate();

 15. Let's test: we have set initial point at [0.1,0,0]. Then in the first step, we add new point and then update the geometry.

 However, note: the positions array is growing by 3 numbers per frame. The max_points is 5000 -> but we start with one point.

 16. We might adjust the color and point size for a better glow effect.

 But wait: at the beginning, we have only one point? Then we see one tiny dot? We might want to precompute a few to start?

 Alternatively, we can precompute the first 1000 points? Or just let it run and the points will accumulate quickly.

 17. We'll write the entire code in the <script> tag.

 18. We assume three.min.js is in the same directory as index.html.

 We are done.

 However, note: the camera controls use spherical coordinates and we update the camera in the event handlers. 

 We set the lookAt(0,0,0) after updating the position? Yes.

 Let me write the entire index.html content.

 But note: we set the attribute for the particles geometry initially? We did:

        particles = new THREE.Points(particlesGeometry, particlesMaterial);
        scene.add(particles);

        Then later in the first frame of animate, we update the geometry? Then we set the attribute again? And then dispose the old geometry? That's inefficient.

 We can update the geometry without creating a new one? 

        particlesGeometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));

   But we can also update just the buffer attribute? Actually, we can do:

        particlesGeometry.attributes.position.needsUpdate = true;

   How to update: we are replacing the entire attribute? Because we are changing the array? 

        particlesGeometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));

   This works but creates a new buffer attribute each time. We can update the existing one? Or we can create an initial buffer attribute and then only update the array and set needsUpdate.

        // Initialize the attribute at the beginning:
        const positionAttribute = new THREE.Float32BufferAttribute(positions, 3);
        particlesGeometry.setAttribute('position', positionAttribute);

        // Then in animate:
        if (particlesGeometry.attributes.position) {
            positionAttribute.copyVector3sArray(positions.map((v, i, a) => [a[i], a[i+1], a[i+2]])); // This is tricky because positions is a flat array.
        }

   That won't work because we cannot update the item size? The array length might change.

   Another way: we can set the buffer attribute's array to a new Float32Array.

        positionAttribute.array = new Float32Array(positions);
        positionAttribute.count = positions.length / 3;
        positionAttribute.needsUpdate = true;

   However, we cannot change the array. The setArray method might be available? Let me check: 

        From the docs: BufferAttribute has .array and .needsUpdate.

        We can do:

            const attribute = particlesGeometry.attributes.position;
            attribute.array = new Float32Array(positions);
            attribute.count = positions.length / 3;
            attribute.needsUpdate = true;

   But that creates a new array each frame? And disposes the old one? Yes, but it's acceptable.

   Alternatively, we can preallocate a buffer of max size? Then update only the count? And then copy using set?

   We'll preallocate an array of MAX_POINTS * 3, and then use:

        positionAttribute.set(positions);
        positionAttribute.count = positions.length / 3;
        positionAttribute.needsUpdate = true;

   How does set work? 

        new THREE.BufferAttribute().set(array, offset) -> but we are replacing? 

   We'll do:

        // At start:
        const positionsArray = new Float32Array(MAX_POINTS * 3);
        const positionAttribute = new THREE.BufferAttribute(positionsArray, 3);
        positionAttribute.setUsage(THREE.DynamicDrawUsage);
        particlesGeometry.setAttribute('position', positionAttribute);

        let pointCount = 0;

        // Then in animate:
        if (pointCount < MAX_POINTS) {
            // Add currentState at the end
            positionsArray[pointCount*3] = currentState[0];
            positionsArray[pointCount*3+1] = currentState[1];
            positionsArray[pointCount*3+2] = currentState[2];
            pointCount++;
        } else {
            // Shift all points down by one, and add at the end
            positionsArray.copyWithin(0, 3, MAX_POINTS*3); // shift left by 3 floats
            positionsArray[MAX_POINTS*3-3] = currentState[0];
            positionsArray[MAX_POINTS*3-2] = currentState[1];
            positionsArray[MAX_POINTS*3-1] = currentState[2];
        }

        positionAttribute.needsUpdate = true;

   This avoids creating a new array every frame.

  But note: the problem says "draws over time", meaning the curve grows? But we want to show the entire history? But limited by MAX_POINTS.

   We want to have a trail that fades? But we are just showing the last 5000 points.

   We can also adjust the opacity per point? We can set per-vertex colors? That would be more complex.

   Let's stick to the preallocated buffer approach.

  However, for simplicity in the code, we'll do the first method: create a new buffer attribute each frame? 

  But note: we have a comment: particlesGeometry.dispose() -> that disposes the old geometry. This is necessary to avoid memory leaks? 

  We are creating a new BufferGeometry every frame? That would be heavy.

  So we change: we will create the geometry once, and update the position attribute by replacing the underlying array? Or we can use the dynamic buffer.

  Actually, we can do:

        if (positions.length > MAX_POINTS*3) {
            positions = positions.slice(positions.length - MAX_POINTS*3);
        }

        particlesGeometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));

        This creates a new attribute each frame? But does it dispose the old one? We are replacing the attribute on the geometry, then the old attribute remains?

        To prevent memory leak, we should dispose the old attribute. 

        Alternatively, we can update: create the attribute once and then set the array and count? And set needsUpdate.

   We'll do:

        // At start:
        const positionAttribute = new THREE.BufferAttribute(new Float32Array(MAX_POINTS*3), 3);
        particlesGeometry.setAttribute('position', positionAttribute);

        Then in the loop:

            let count = Math.min(positions.length/3, MAX_POINTS);
            // Copy positions into a Float32Array of length (count*3)
            const buffer = new Float32Array(count*3);
            // Take the last (count*3) floats from positions
            buffer.set(positions.slice(Math.max(0, positions.length - MAX_POINTS*3)));
            positionAttribute.array = buffer;
            positionAttribute.count = count;
            positionAttribute.needsUpdate = true;

   But now the array of positions might be growing? And we are truncating to MAX_POINTS*3? Actually, we are truncating to the last MAX_POINTS points.

   Alternatively, we can keep the entire array? Or limit the positions array?

   We decide to keep the entire array? Or to limit it? Actually, we set:

        if (positions.length > MAX_POINTS*3) {
            positions.splice(0, positions.length - MAX_POINTS*3); // we keep the last MAX_POINTS*3 numbers
        }

   Then directly:

        positionAttribute.array.set(positions);
        positionAttribute.count = positions.length / 3;
        positionAttribute.needsUpdate = true;

   But the length of positions is at most MAX_POINTS*3. And the array in the attribute was initialized to MAX_POINTS*3? But if we are starting, it's less.

   So we can create the attribute without setting the initial array? Actually, we can do:

        positionAttribute = new THREE.BufferAttribute(new Float32Array(MAX_POINTS*3), 3);

        Then to update, we set:

            positionAttribute.set(positions); // This won't work because positions is too big? We are truncating positions to MAX_POINTS*3.

        How to set: we can do:

            positionAttribute.copyArray(positions); // copies the array? But positions might be less than MAX_POINTS*3? Then the rest is untouched? But then the buffer attribute's array is longer than the current count? 

        We set the count to positions.length/3.

        But the buffer attribute has a fixed array (size MAX_POINTS*3) and we set the count? Then only the first count points are rendered.

        This works.

   Steps:

        // At start:
        let positions = [0.1, 0, 0];
        const MAX_POINTS = 5000;
        const positionAttribute = new THREE.BufferAttribute(new Float32Array(MAX_POINTS * 3), 3);
        positionAttribute.setUsage(THREE.DynamicDrawUsage); // for performance
        particlesGeometry.setAttribute('position', positionAttribute);
        particlesGeometry.setDrawRange(0, 1); // we have one point initially

        // Then in the loop:

            positions.push(...currentState);
            if (positions.length > MAX_POINTS*3) {
                positions.splice(0, 3); // remove one point (the oldest) -> but we are keeping the trail length constant? 
                // Now the total points: MAX_POINTS
            }

            const count = Math.min(MAX_POINTS, positions.length/3);
            positionAttribute.copyArray(positions); // copies the entire positions array? But the buffer has MAX_POINTS*3. What if positions is less? Then we have zeros? But we set the count to positions.length/3?

            Actually, we set to count? But we are truncating positions to MAX_POINTS*3? Yes.

            So we can set:

                positionAttribute.needsUpdate = true;
                particlesGeometry.setDrawRange(0, count);

            Or we set:

                positionAttribute.count = count;

            But the count is the number of points? We set as:

                positionAttribute.count = count;

            Then call needsUpdate.

        However, the BufferAttribute: the constructor set itemSize=3, and we have a fixed array (MAX_POINTS * 3).

        How to update: we copy the entire positions array? But if the positions array has less than MAX_POINTS*3, then we have to set the rest to zero? But we don't want to render them.

        We set the count appropriately? And use setDrawRange? Actually, the buffer attribute has a count? And we are setting it? Then the geometry will render up to count points.

        We set:

            positionAttribute.count = count;
            positionAttribute.needsUpdate = true;

        Then in the BufferAttribute, we have a copyArray function? Actually, no such method. We can do:

            const array = positionAttribute.array;
            for (let i = 0; i < positions.length; i++) {
                array[i] = positions[i];
            }

        But if positions.length is less than MAX_POINTS*3, then we only set that many? And then set the count to positions.length/3.

        And if it grows, we update more? 

        But now, we are truncating positions to MAX_POINTS*3, so positions.length is always MAX_POINTS*3? Only when the points are less than MAX_POINTS we have length < MAX_POINTS*3.

        We can change: we keep an array that never exceeds MAX_POINTS*3? Then positions.length is at most MAX_POINTS*3.

        Then:

            for (let i = 0, n = positions.length; i < n; i++) {
                array[i] = positions[i];
            }

        positionAttribute.count = positions.length/3; // which is at most MAX_POINTS
        positionAttribute.needsUpdate = true;

        But note: when we start, positions has 3 elements? Then set count=1.

        This is inefficient? We are copying MAX_POINTS*3 every frame? But MAX_POINTS=5000 -> 15000 floats, which is acceptable.

        We can do:

            positionAttribute.array.set(positions); // copy the array, but positions might have less? Then we set the rest? Actually, we are truncating positions to MAX_POINTS*3.

        If we always have MAX_POINTS*3? Then no problem.

        And we set the count to MAX_POINTS? But sometimes we have less? Actually, we remove one point and add one? So we always have <=MAX_POINTS points.

        We started at one point, then when we hit MAX_POINTS, we start removing one per frame? Then we have exactly MAX_POINTS points.

        So:

            if (positions.length > MAX_POINTS*3) {
                positions.splice(0, 3);
                positionAttribute.array.set(positions); // because positions is exactly MAX_POINTS*3
                positionAttribute.count = MAX_POINTS; // no change in count? It was already MAX_POINTS? So we don't need to update count, unless we are growing? 
            } else {
                positionAttribute.array.set(positions);
                positionAttribute.count = positions.length/3;
            }

         But we are updating every frame? 

         Alternatively, we can update every frame? Because the array is updated? Then:

            // Always set the array:
            positionAttribute.array.set(positions); // but note: positions might be longer than MAX_POINTS*3? We are truncating above? 

         We truncate the positions array to MAX_POINTS*3? So positions.length <= MAX_POINTS*3.

         Then we do:

            const numToCopy = Math.min(positions.length, MAX_POINTS*3);
            positionAttribute.array.set(positions.subarray(0, numToCopy)); // or set the entire array and then set the count?
            positionAttribute.count = numToCopy / 3;

         But we are truncating with splice, so positions.length is <= MAX_POINTS*3.

         Then we set:

            positionAttribute.array.set(positions);
            positionAttribute.count = positions.length/3; 
            positionAttribute.needsUpdate = true;

 19. We'll do:

        // Precreate the buffer attribute with max size
        const initialArray = new Float32Array(MAX_POINTS * 3);
        const positionAttribute = new THREE.BufferAttribute(initialArray, 3);
        particlesGeometry.setAttribute('position', positionAttribute);
        particlesGeometry.setDrawRange(0, 0); // but we start with one point? We'll update in the first frame.

        Then in animate:

            // ... compute new currentState and push it to positions
            if (positions.length > MAX_POINTS*3) {
                positions.splice(0, 3);
            }
            positionAttribute.array.set(positions);
            positionAttribute.count = positions.length/3;
            positionAttribute.needsUpdate = true;

 20. Now, let me write the entire code.

 Due to the complexity, I'll write the code in the script tag.

 Note: the code above for RK4 is not storing the entire array of states? We are storing positions for rendering? But the currentState is also stored? We are only updating it.

  We are also not scaling the Lorenz attractor? It has a typical scale of about (-20,20) in x,y and (0,50) in z? But we set the camera at 50 units? That might be too close? We might need to scale the positions? 

  The Lorenz attractor points: 
      The typical range: 
          x: ±20
          y: ±30
          z: 0 to 50

  But we set the camera at (0,0,50) and look at (0,0,0). So we should adjust the camera to see the entire attractor.

  We can set:

      camera.position.set(0, 0, 70);
      spherical.radius = 70;

  And then lookAt(0, 15, 0) maybe? Because the attractor is centered? Actually, the Lorenz attractor is symmetric? It has two lobes? The center of mass is around (0,0,25)? Then we set the lookAt to (0,0,25)? 

  But we are plotting points without transformation? So we'll set:

      We'll set the point positions as computed? So they are in the world coordinates.

  To adjust the view, we can set:

        camera.position.set(0, 0, 70);
        camera.lookAt(0,0,0);

  But the attractor is contained in a bounding box of (-20,30) to (20,30,50). 

  Alternatively, we can scale the positions to fit? Or use an orthographic camera? We'll leave it as is.

  We'll try and adjust camera.

 21. We set the point size: we set 0.3? That might be too small? Let's set 0.5 or 1.0.

 22. Also, we can change the color to a more bluish? 0x4488ff.

 23. We are ready to write.

 We'll write the entire index.html content.