We are building a single-page web app that visualizes the Lorenz attractor as a glowing 3D butterfly trajectory.
 The app must be self-contained in one index.html file, with CSS in a <style> tag and JS in a <script> tag.
 We are allowed to use the existing three.min.js in the current directory (so we can load it via <script src="three.min.js"></script>).
 Requirements:
   - Visualize the Lorenz attractor (a 3D butterfly trajectory) that draws over time.
   - Use orbit-drag camera controls (THREE.OrbitControls).
   - The trajectory should be glowing.

 Approach:
   - We'll set up a Three.js scene with a camera, renderer, and OrbitControls.
   - We'll simulate the Lorenz attractor by solving the Lorenz system of differential equations.
   - We'll represent the trajectory as a line (or a tube) that grows over time, adding points as the simulation progresses.
   - To achieve a glowing effect, we can use a shader or a simple solution: use a points system with a glowing texture or a line with a gradient material.

 However, note that we are constrained to a single HTML file and cannot load external textures. Therefore, we can:
   - Create a gradient for the line by varying the color from the start (e.g., red) to the end (e.g., blue) and use a material that emits light? 
   - Alternatively, use a Points (particle system) with a custom shader? But without external textures, we can create a canvas texture for the point sprite.

 Since we cannot load external resources, and we want simplicity, we can:
   - Use a Line with a material that has a gradient and emissive property? But Three.js LineBasicMaterial doesn't support gradients along the line.

 Another idea: use a TubeGeometry and then set the vertex colors for a gradient? But that requires more code and we are drawing over time.

 Alternatively, we can use a Points system to represent the trajectory as a series of points. We can make the points glow by using a sprite with a radial gradient that we generate in a canvas.

 Steps for Points with generated texture:
   1. Create a canvas, draw a radial gradient (white in the center, transparent at the edges) to use as a point sprite.
   2. Use that as a texture for PointsMaterial.
   3. Then we update the points geometry by adding points as we simulate the Lorenz system.

 However, note: the requirement says "trajectory", so a line might be more appropriate. But a line with a glow is tricky without shaders.

 Considering the constraints (no external resources, no separate shader files), we can write a simple shader in the script? Yes, we can embed the shader code as a string.

 But let's try a simpler approach first: use a line with a material that has a high emissive color and then use a bloom pass? However, we don't have the Three.js post-processing library included.

 Since we are only allowed to use the existing three.min.js, and it might not include post-processing, we cannot rely on that.

 Therefore, we decide to use Points for the trajectory and generate a glow texture on the fly.

 Steps in the HTML file:
   - Create a canvas for the point sprite texture (hidden) and draw a circle with radial gradient.
   - Use this texture in a PointsMaterial for the points representing the Lorenz trajectory.

 Simulation:
   - We'll use the Lorenz equations:
        dx/dt = σ*(y - x)
        dy/dt = x*(ρ - z) - y
        dz/dt = x*y - β*z
     with the classic parameters: σ = 10, ρ = 28, β = 8/3.

   - We'll start at an initial point (say, [0.1, 0, 0]) and integrate using Euler or a better method (like Runge-Kutta) but Euler is simpler and might suffice for visualization.

   - We'll update the simulation at each animation frame, adding the new point to the points geometry.

   - We'll set a fixed time step (dt) and iterate.

 Implementation:

   We'll create:
     - A scene, camera, renderer (with antialiasing).
     - OrbitControls for camera control.
     - A Points object to hold the trajectory points.

   Steps in JavaScript:
     1. Set up Three.js scene.
     2. Create a canvas for the point texture and get the texture.
     3. Create a PointsMaterial with the generated texture, setting blending, transparent, etc.
     4. Create a BufferGeometry for the points and a Points object.
     5. Set up the simulation state (x, y, z) and parameters.
     6. In the animation loop, update the simulation and add the new point to the geometry.
     7. Update the points geometry's attributes.

   Note: We don't know the total number of points in advance, so we'll start with an empty geometry and then add points dynamically.

   We can pre-allocate a large array? Or we can use a dynamic buffer? We'll start with a fixed maximum number of points (say, 50000) and then stop when we reach it.

   Alternatively, we can use a ring buffer? But for simplicity, we'll set a maximum and stop adding when we hit it.

   We'll use a Float32Array for the positions and update the count in the geometry.

   Steps for the points:
     - Create an array to hold positions (maxPoints * 3).
     - Start with count = 0.
     - Each step, set the next position and increment count.
     - Then set geometry.setDrawRange(0, count) and update the position attribute.

   However, note that we are drawing over time, so we want to see the trajectory grow.

   We'll also adjust the camera to look at the center of the attractor.

   Let's code the HTML structure:

   We'll have a <div> for the renderer, and then the script.

   Important: The file must be named index.html.

   We'll write the entire HTML, CSS, and JS in one file.

   CSS: make the canvas fullscreen.

   Let's write the HTML skeleton.

   Note: We are using three.min.js from the same directory, so we load it with a script tag.

   We'll also include the OrbitControls from the three.min.js? Actually, OrbitControls is an addon and might not be included in three.min.js. We must check.

   Since we don't know if three.min.js includes OrbitControls, and the user provided it, we assume it does? But typically, three.min.js is the core library.

   We need to include OrbitControls separately? But the user said "pre-provided three.min.js", so we cannot assume OrbitControls is included.

   However, the problem says "using the pre-provided three.min.js", so we must use only that. Therefore, we cannot use OrbitControls unless it's included.

   Let me check: the user said "global THREE", so if OrbitControls is included, it would be THREE.OrbitControls.

   But if it's not, we have a problem.

   Since we are constrained, we must assume that the provided three.min.js does not include OrbitControls. Therefore, we cannot use it? 

   But the requirement says "orbit-drag camera controls". So we must have OrbitControls.

   Alternative: we can write a simple orbit control? That would be complex.

   Therefore, I will assume that the provided three.min.js does include OrbitControls. If not, we might have to do without.

   Alternatively, we can note that the user might have provided a custom build of three.js that includes OrbitControls? We'll proceed with that assumption.

   If OrbitControls is not available, we'll skip and use a static camera? But the requirement is clear.

   Let's proceed and hope the provided three.min.js has OrbitControls.

   Otherwise, we might have to include the OrbitControls source? But we cannot create additional files.

   We cannot: because the requirement is one file.

   So we must rely on the provided three.min.js having OrbitControls.

   Now, let's code.

   Steps:

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

   In the script:

     // Check if OrbitControls is available
     if (THREE.OrbitControls === undefined) {
        console.error('OrbitControls not found in three.min.js');
        // We might have to provide a fallback? But we cannot. We'll just use a static camera.
     }

     // Parameters for Lorenz system
     const sigma = 10;
     const rho = 28;
     const beta = 8/3;

     // Time step
     const dt = 0.01;

     // Initial state
     let x = 0.1;
     let y = 0;
     let z = 0;

     // Maximum number of points (so we don't run out of memory)
     const maxPoints = 50000;
     let pointCount = 0;
     const positions = new Float32Array(maxPoints * 3);

     // Create a scene
     const scene = new THREE.Scene();
     scene.background = new THREE.Color(0x000000);

     // Create a camera
     const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
     camera.position.z = 50;

     // Create a renderer
     const renderer = new THREE.WebGLRenderer({ antialias: true });
     renderer.setSize(window.innerWidth, window.innerHeight);
     document.body.appendChild(renderer.domElement);

     // Create OrbitControls if available
     let controls;
     if (THREE.OrbitControls) {
        controls = new THREE.OrbitControls(camera, renderer.domElement);
        controls.enableDamping = true;
        controls.dampingFactor = 0.25;
     }

     // Create a texture for the point sprite (glow)
     function createGlowTexture() {
        const canvas = document.createElement('canvas');
        const size = 64;
        canvas.width = size;
        canvas.height = size;
        const ctx = canvas.getContext('2d');
        const gradient = ctx.createRadialGradient(size/2, size/2, 0, size/2, size/2, size/2);
        gradient.addColorStop(0, 'rgba(255,255,255,1)');
        gradient.addColorStop(0.2, 'rgba(255,255,255,0.8)');
        gradient.addColorStop(1, 'rgba(255,255,255,0)');
        ctx.fillStyle = gradient;
        ctx.fillRect(0, 0, size, size);
        const texture = new THREE.CanvasTexture(canvas);
        return texture;
     }

     const texture = createGlowTexture();

     // Create material for points
     const material = new THREE.PointsMaterial({
        size: 0.3,
        map: texture,
        blending: THREE.AdditiveBlending,
        transparent: true,
        depthTest: false,
        opacity: 0.8,
        color: 0x00ffff // cyan color for the glow
     });

     // Create geometry and points
     const geometry = new THREE.BufferGeometry();
     geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
     const points = new THREE.Points(geometry, material);
     scene.add(points);

     // Function to update the simulation
     function simulate() {
        // Lorenz equations
        const dx = sigma * (y - x) * dt;
        const dy = (x * (rho - z) - y) * dt;
        const dz = (x * y - beta * z) * dt;

        x += dx;
        y += dy;
        z += dz;

        // Add the new point if we haven't reached maxPoints
        if (pointCount < maxPoints) {
           positions[pointCount * 3] = x;
           positions[pointCount * 3 + 1] = y;
           positions[pointCount * 3 + 2] = z;
           pointCount++;
           geometry.attributes.position.needsUpdate = true;
           geometry.setDrawRange(0, pointCount);
        }
     }

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

        // Simulate a few steps per frame to speed up the drawing
        for (let i = 0; i < 10; i++) {
           simulate();
        }

        if (controls) {
           controls.update();
        }

        renderer.render(scene, camera);
     }

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

     // Start animation
     animate();

   This should draw the Lorenz attractor as a series of glowing points.

   We are using a cyan color for the glow. We can adjust the color and size as needed.

   Note: The camera is positioned at (0,0,50) and the Lorenz attractor is centered at (0,0,0). The attractor spans roughly from -20 to 20 in each dimension? So 50 is a good distance.

   We are simulating 10 steps per frame to make the drawing faster.

   Let's write the entire index.html.

   We must be cautious: the script is long, so we'll write it as a string in the write function.

   We'll create the HTML content as a string and write it to index.html.

   We are in the current directory: /tmp/ws, so we write to index.html.

   We'll use the write function.

   But note: we are only allowed to use the functions provided (read, bash, edit, write). We'll use write to create index.html.

   We'll construct the entire HTML string.

   Important: We must escape any special characters? Actually, we are writing a string without any external variables, so we can write it as is.

   Let's code the string.

   We'll break the script into a string and concatenate.

   Alternatively, we can use a template literal? But note that we are in a JSON argument, so we must escape double quotes and backslashes? Actually, we are going to write a string that contains JavaScript, which might have quotes.

   We'll write the entire HTML as a string and then call write.

   Steps:

   content = `<!DOCTYPE html> ... `

   We'll write the entire HTML.

   We'll include the script as above.

   We'll also adjust the point size and color if needed.

   Let's write the HTML string.

   Note: We must be cautious with the script content: we have to escape any ` and ${} if we use template literals? Actually, we are not interpolating, so we can use a template string without interpolation. But we are writing a string that contains backticks? We don't have any in the code.

   Alternatively, we can use a function to generate the string without interpolation.

   We'll write:

   let content = `<!DOCTYPE html>
   <html>
   <head>
     <title>Lorenz Attractor</title>
     <style>
       body { margin: 0; }
       canvas { display: block; }
     </style>
   </head>
   <body>
     <script src="three.min.js"></script>
     <script>
        // ... our JavaScript code ...
     </script>
   </body>
   </html>`

   Then write to "index.html".

   We'll format the JavaScript code as a string without interpolation.

   We must be careful: if the JavaScript code contains backticks, we must escape them? Actually, we are using a template literal for the entire HTML, so any backtick in the JavaScript must be escaped with a backslash. But our JavaScript code doesn't have backticks? We used single quotes and double quotes.

   So we are safe.

   Let's write the JavaScript code as a string inside the template.

   We'll write the entire script.

   We'll also add a check for OrbitControls: if it's not available, we log an error but continue.

   We'll write the code exactly as above, but note: we are writing it as a string inside a template literal, so we must be cautious of backticks? We don't have any.

   Now, we call write with the content.

   We are ready.

   We'll write the entire index.html file.

   We'll use the write function.

   Function call:
     write(path: "index.html", content: the string)

   We'll generate the string.

   Since the string is long, we'll write it in the function call as a string.

   But note: the function call is in JSON, so we must escape double quotes and backslashes in the JavaScript code? Actually, we are writing a string that contains double quotes and backslashes.

   We can use a JSON stringifier? But we are writing by hand.

   Alternatively, we can write the content without escaping because we are using a template literal in the function call? But the function call is in JSON, so we must represent the content as a JSON string.

   Therefore, we must escape all double quotes and backslashes in the content.

   How to do that? We can use a tool? But we are in code.

   Alternatively, we can write the content without double quotes? But the JavaScript code has double quotes.

   We'll escape the double quotes in the JavaScript code: replace " with \".

   Also, we must escape backslashes: replace \ with \\.

   This is error-prone.

   Alternatively, we can write the HTML content without any double quotes? We can use single quotes for the entire HTML string? But the JavaScript code uses both single and double quotes.

   We can change the JavaScript code to use single quotes for strings? Then we can wrap the entire content in double quotes.

   But then we have to escape any double quotes in the content? Actually, we can change the JavaScript code to use single quotes for all string literals? Then we can safely wrap the entire content in double quotes.

   Let me change the JavaScript code to use single quotes for strings, then we can write:

     content = " ... the entire HTML with single quotes ... "

   Then we don't need to escape double quotes? But we might have single quotes? Actually, we have apostrophes? We'll change them to escape: \' when inside single quoted string? But we are changing the JavaScript to use single quotes, so we must escape any single quote in the JavaScript.

   Alternatively, we can use template literals for the JavaScript code? But we are already using a template literal for the HTML.

   This is getting messy.

   Better: we write the JavaScript code without changing quotes and then escape the double quotes in the entire content string.

   We'll do:

     content = `<!DOCTYPE html> ... <script> ... </script> ...`

   Then, when we put this string into the JSON argument for write, we must escape double quotes and backslashes.

   We'll do:

     content.replace(/"/g, '\\"').replace(/\\/g, '\\\\')   ... but we are not doing that in the function call, we are writing the string.

   Actually, we are writing the function call as a JSON string. So we must escape the content string appropriately.

   Since this is a demo, and we are generating the function call, we can write the content without escaping? But that would break.

   Alternatively, we can write the content as a string without any double quotes? Impossible.

   We decide to change the JavaScript code to use single quotes for all string literals. Then we can wrap the entire content in double quotes.

   Steps:

     In the JavaScript code, change every double quote (") to single quote (')? But note: we have a string that contains a single quote? For example, in the radial gradient? We have 'rgba(255,255,255,1)'. That's safe.

   We'll change:

        gradient.addColorStop(0, 'rgba(255,255,255,1)');

   And:

        console.error('OrbitControls not found in three.min.js');

   And:

        const material = new THREE.PointsMaterial({
          ... -> use single quotes for keys? No, keys are unquoted or quoted? In JavaScript, object keys can be unquoted. But we are using double quotes for the string values? We'll change the string values to single quotes.

   We'll go through the JavaScript code and change every string from double to single quotes? Actually, we only have a few strings.

   Let me rewrite the JavaScript code with single quotes:

        console.error('OrbitControls not found in three.min.js');

        // In createGlowTexture:
        gradient.addColorStop(0, 'rgba(255,255,255,1)');
        gradient.addColorStop(0.2, 'rgba(255,255,255,0.8)');
        gradient.addColorStop(1, 'rgba(255,255,255,0)');

        // In PointsMaterial:
        color: 0x00ffff   // This is a number, not a string.

        // Also, the string for the canvas context: '2d' -> can be single quoted.

   So we change:

        const ctx = canvas.getContext('2d');

   And:

        // The color in the material is a number, so no quotes.

   Then we can write the entire content in double quotes.

   Now, the entire HTML string (which includes the JavaScript) uses single quotes for strings, so we can wrap the entire content in double quotes without escaping.

   But note: the HTML itself has double quotes? For example:

        <script src="three.min.js"></script>

   We cannot change that to single quotes? Actually, we can:

        <script src='three.min.js'></script>

   That's valid.

   So we change:

        <script src='three.min.js'></script>

   And:

        <style>
          body { margin: 0; }
          canvas { display: block; }
        </style>

   This doesn't have quotes.

   So now, the entire content string can be written in double quotes without any escaped double quotes.

   We'll write the content as:

        "<!DOCTYPE html>\n<html>\n<head> ... </html>"

   And then we pass that as a string to the write function.

   We are ready.

   We'll write the function call.

   Note: The content is long, but we are allowed to write it.

   We'll write the entire index.html.

   We'll use the write function.

   Let's generate the function call.

We are building a single-page web app that visualizes the Lorenz attractor using the THREE.js library (already present as three.min.js).
 The app should:
   - Visualize the Lorenz attractor as a glowing 3D butterfly trajectory that draws over time.
   - Include orbit-drag camera controls (THREE.OrbitControls).

 Steps:
 1. We'll create an index.html file that includes:
    - A <script> tag to load three.min.js (which is in the current directory).
    - A <style> tag for basic full-page styling.
    - A <script> tag for our custom JavaScript code.

 2. The JavaScript code will:
    - Set up a THREE.js scene, camera, and renderer.
    - Use OrbitControls for camera interaction.
    - Implement the Lorenz attractor equations to generate points over time.
    - Render the attractor as a continuous line that grows (draws over time).
    - Make the line glow (we can use a shader or a simple approach with a bright color and bloom effect; however, without additional libraries, we'll use a simple approach: a bright color and maybe a points system for glow? But note: we cannot use extra libraries. Alternatively, we can use a THREE.Line with a material that has high emissive and maybe use a point light? But note: the requirement is a glowing butterfly trajectory).

    However, note: we are limited to what THREE.js provides without extra post-processing. Since we cannot include extra libraries (like bloom pass) and we are in a single file, we can simulate a glow by:
        - Using a bright color (like cyan) and a dark background.
        - Adding a points system along the line? But that might be heavy.

    Alternatively, we can use a Line with a material that has `linewidth` and a bright color, but note: WebGL doesn't support linewidth in all browsers.

    Another idea: use a TubeGeometry? But that is more complex and might be heavy.

    Let's keep it simple: we'll use a THREE.Line with a basic material and a bright color. We can also add a points system (using Points) with a small size to create a trail effect? But the problem says "glowing", so we can do:

        - A line (THREE.Line) for the trajectory, with a bright color and maybe a second line that is wider and more transparent? But without shaders, we can't do multi-pass.

    Given constraints, I propose:
        - Use a single line with a bright color and set the material to be `THREE.LineBasicMaterial` with a color like cyan (#00ffff) and set `linewidth` to 1 (but note: linewidth is not supported everywhere). Alternatively, we can use a thicker line by using `TubeGeometry`? But that is more complex.

    We'll do:
        - Use a simple Line with LineBasicMaterial and a bright color. We'll also set the background to black for contrast.

    Steps for the Lorenz attractor:
        - We'll use the classic Lorenz equations:
            dx/dt = σ * (y - x)
            dy/dt = x * (ρ - z) - y
            dz/dt = x * y - β * z

        - Common parameters: σ = 10, ρ = 28, β = 8/3.

        - We'll start at a point (x0, y0, z0) = (0.1, 0, 0)

        - We'll integrate using Euler method (or better: Runge-Kutta? but Euler is simpler and might be enough for visualization). Since we are drawing over time, we can update the positions step by step.

    Implementation:
        - We'll create an array to store the points (Vector3).
        - Each frame, we compute a few steps of the Lorenz equations and add the new point to the array.
        - Then we update the geometry of the line to include the new points.

    To draw over time, we'll start with an empty line and then add points as time progresses.

 3. We'll also add a render loop that updates the line and renders the scene.

 4. We'll use OrbitControls for camera controls.

 Important: We must not use any external resources (all in one file).

 Let's structure the HTML file:

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

 Now, the JavaScript code:

 Steps:
   a. Initialize scene, camera, renderer.
   b. Add OrbitControls.
   c. Set up the Lorenz attractor simulation.
   d. Create a line that will be updated with new points.
   e. In the render loop, update the simulation and the line.

 We'll use a fixed time step for the simulation.

 Code outline:

   // Parameters
   const sigma = 10;
   const rho = 28;
   const beta = 8/3;
   let x = 0.1, y = 0, z = 0;
   const dt = 0.01;

   // Points array
   const points = [];
   points.push(new THREE.Vector3(x, y, z));

   // Create a geometry and line
   const geometry = new THREE.BufferGeometry();
   const material = new THREE.LineBasicMaterial({ color: 0x00ffff });
   const line = new THREE.Line(geometry, material);
   scene.add(line);

   // In the animation loop:
   function animate() {
      // Update the Lorenz system for a few steps (e.g., 5 steps per frame)
      for (let i = 0; i < 5; i++) {
          // Compute derivatives
          const dx = sigma * (y - x);
          const dy = x * (rho - z) - y;
          const dz = x * y - beta * z;

          // Update positions
          x += dx * dt;
          y += dy * dt;
          z += dz * dt;

          points.push(new THREE.Vector3(x, y, z));
      }

      // Update the line geometry
      geometry.setFromPoints(points);

      // Render
      renderer.render(scene, camera);
      requestAnimationFrame(animate);
   }

   // Start animation
   animate();

 5. We'll also set the camera position appropriately to see the attractor.

 6. We'll set the background color to black.

 However, note: the Lorenz attractor points are in a small range? Actually, they are in a bounded region but we might need to scale them to see better.

 We can scale the points by a factor (like 10) to make them more visible.

 Alternatively, we can adjust the camera position.

 Let's set:
   camera.position.z = 50;

 But note: the Lorenz attractor spans from about -20 to 20 in each dimension? Actually, it's centered around 0 and spans roughly -20 to 20 in x and y, and 0 to 50 in z? We'll scale by 0.1 to make it fit? Or we can adjust the camera.

 We'll set the camera to look at the center and be at (0, 0, 50). Then we'll see the butterfly.

 Alternatively, we can scale the points by 0.1? But let's not scale and set camera to (30, 30, 30) and look at (0,0,0).

 7. We'll add a point light? Actually, we are using LineBasicMaterial which doesn't require lighting. So no light needed.

 8. We'll set the renderer to have a black background.

 Implementation:

   renderer.setClearColor(0x000000);

 9. We'll also set the size of the renderer to the window.

 Let's code accordingly.

 Important: We must include OrbitControls. We note that OrbitControls is in the THREE.js examples, but we are using the minified three.min.js? Actually, the minified three.min.js does not include OrbitControls. We have a problem.

 However, the user said: "These library file(s) are ALREADY present in the current directory — load each with a plain <script src="NAME"></script> using its exact filename (never a CDN or URL), then build on top of it: three.min.js."

 So we have only three.min.js? Then OrbitControls is not included.

 We must check: does the provided three.min.js include OrbitControls? Typically, the minified build does not include controls. We have two options:

   Option 1: The user might have provided a custom build? But the instruction says "three.min.js".

   Option 2: We need to include OrbitControls separately? But we cannot create separate files and we cannot use CDN.

   However, the instruction says: "These library file(s) are ALREADY present in the current directory". So if OrbitControls is not in three.min.js, then it must be provided as an additional file? But the user only mentioned three.min.js.

   We must assume that three.min.js is the only library file provided.

   Therefore, we cannot use OrbitControls? Then we must implement our own camera controls? That is complex.

   Alternatively, we can use a static camera? But the requirement says "orbit-drag camera controls".

   Let me re-read: the user said "with orbit-drag camera controls". So we must have it.

   How can we include OrbitControls without an extra file? We cannot because we are not allowed to create separate files and we cannot use CDN.

   But note: the user might have provided a custom build of three.js that includes OrbitControls? Or maybe the three.min.js they provided is built with OrbitControls? We don't know.

   Alternatively, we can include the OrbitControls source code inline? But that would be long and messy.

   Given the constraints, I propose:

      We write the OrbitControls source code inline? But that is against the spirit of the requirement? And it's a lot of code.

   Another idea: the user might have provided an additional file? But they only mentioned three.min.js.

   Let me check the instruction: "These library file(s)" — plural. So maybe there are multiple? But the user only said "three.min.js". So we have only one.

   We must ask: do we have OrbitControls? But we cannot ask because we are an agent and must produce the file.

   Alternatively, we can note that the user said "pre-provided three.min.js (global THREE)" — so we have THREE. We can check if THREE.OrbitControls is defined? But we are writing the code now, we don't know at runtime.

   We must decide: if we don't have OrbitControls, we cannot do drag controls. So we must include the source of OrbitControls? But that would be a violation of the "single file" requirement? Because we are including a lot of code.

   However, the requirement says: "Build a single-page web app and write it ALL into one self-contained file". So we can include the OrbitControls source code as a string and then eval? That is bad practice.

   Alternatively, we can copy the entire OrbitControls source code from the three.js examples and include it in our script? But that would be long.

   Considering the complexity, I think we have to do that. But note: the OrbitControls source is about 1000 lines? That would make our file huge.

   Alternatively, we can use a simpler camera control? We can write a simple orbit control? That might be acceptable? But it's complex.

   Given the time, and since the user specifically asked for OrbitControls, I think we must include the OrbitControls source.

   How? We can get the source from the three.js GitHub: https://github.com/mrdoob/three.js/blob/dev/examples/jsm/controls/OrbitControls.js

   But we cannot access the network. So we cannot.

   Therefore, we must rely on the provided three.min.js including OrbitControls? Or we must note that we cannot do it.

   But the user said "pre-provided three.min.js" — we don't know what it includes.

   Let's assume that the provided three.min.js does not include OrbitControls. Then we must do without? Or we must write a simple version.

   We'll write a very simple orbit control: 

        We'll listen to mousedown, mousemove, mouseup and update the camera rotation.

   However, that is beyond the scope of a quick example.

   Alternatively, we can use the built-in TrackballControls? But we don't have that either.

   Given the dilemma, I propose we proceed without controls? But the requirement says "with orbit-drag camera controls".

   We must try to include a minimal orbit control.

   We can write a simple version:

        var drag = false;
        var lastX, lastY;

        function onMouseDown(event) {
            drag = true;
            lastX = event.clientX;
            lastY = event.clientY;
        }

        function onMouseMove(event) {
            if (drag) {
                var deltaX = event.clientX - lastX;
                var deltaY = event.clientY - lastY;
                // Update camera rotation
                camera.rotation.y += deltaX * 0.01;
                camera.rotation.x += deltaY * 0.01;
                lastX = event.clientX;
                lastY = event.clientY;
            }
        }

        function onMouseUp() {
            drag = false;
        }

        Then attach these events to the canvas.

   But note: the camera rotation might not be what we want. We want to orbit around the center.

   We can use a camera that looks at a point and then rotate around that point? That requires spherical coordinates.

   We'll store the camera position in spherical coordinates relative to the center (0,0,0).

   Steps:

        let theta = 0, phi = 0;
        let radius = 50;

        Then when dragging:

            theta -= deltaX * 0.01;
            phi -= deltaY * 0.01;

        Then update camera position:

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

        And then camera.lookAt(0,0,0);

   We'll implement that.

   Given the complexity, we'll do a minimal version.

   Alternatively, we can use THREE.Spherical to help.

   We'll do:

        let spherical = new THREE.Spherical();
        spherical.radius = radius;
        spherical.theta = Math.PI / 2; // initial angles? 
        spherical.phi = Math.PI / 2;

        Then on drag:

            spherical.theta -= deltaX * 0.01;
            spherical.phi -= deltaY * 0.01;

        Then set camera position from spherical.

   But note: we are already using THREE? So we can use THREE.Spherical.

   Let's do:

        const spherical = new THREE.Spherical();
        spherical.radius = 50;

        Then in the mousemove:

            spherical.theta -= deltaX * 0.01;
            spherical.phi = THREE.MathUtils.clamp(spherical.phi - deltaY * 0.01, 0.1, Math.PI - 0.1);

        Then:

            camera.position.setFromSpherical(spherical);
            camera.lookAt(0,0,0);

   We'll set initial camera position accordingly.

   We'll also handle zoom? Maybe with mouse wheel? The requirement says "orbit-drag", so we can skip zoom? Or add it.

   We'll add zoom with wheel:

        function onMouseWheel(event) {
            spherical.radius *= 1 + event.deltaY * 0.01;
            // Clamp radius?
            spherical.radius = Math.max(10, Math.min(100, spherical.radius));
            camera.position.setFromSpherical(spherical);
            camera.lookAt(0,0,0);
        }

   But note: event.deltaY might be negative for zoom in? We'll adjust.

   Alternatively: event.deltaY positive means scroll down -> zoom out.

   So: spherical.radius *= (1 - event.deltaY * 0.001); but then we clamp.

   Actually, we can do:

        spherical.radius -= event.deltaY * 0.1;
        spherical.radius = Math.max(10, Math.min(100, spherical.radius));

   Then update.

   We'll attach the events.

 10. We must remember to remove the event listeners when the app is unmounted? But it's a simple page.

 Given the complexity, we'll implement a basic version.

 Alternatively, we can use the existing OrbitControls if it's available? But we don't know.

 We'll write the code conditionally: if THREE.OrbitControls is defined, use it; else, use our custom controls.

 But we don't know at coding time. So we'll try to use OrbitControls if available, else fall back to our custom.

 How to check? We can do:

    if (typeof THREE.OrbitControls !== 'undefined') {
        // use OrbitControls
    } else {
        // use custom
    }

 But we don't know. And we cannot rely on it.

 Given the time, I think we should assume that the provided three.min.js does not include OrbitControls. So we'll write our own.

 We'll write a minimal version without zoom first? Or with zoom? We'll do both.

 Steps for custom controls:

    - Add event listeners for mousedown, mousemove, mouseup, wheel.
    - Use a state variable for dragging.

    We'll create a function to update the camera from spherical coordinates.

    Let spherical = new THREE.Spherical(50, Math.PI/2, Math.PI/2); // radius, phi, theta

    But note: the initial camera position: we want to look at (0,0,0) from (30,30,30) -> that would be:

        spherical.radius = Math.sqrt(30*30+30*30+30*30) ≈ 51.96
        spherical.theta = Math.atan2(30,30) = Math.PI/4? Actually, we need to convert cartesian to spherical.

    Alternatively, we can set the initial camera position and then derive the spherical coordinates from that.

    We'll set:

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

    Then we can get the spherical coordinates from the camera position:

        let spherical = new THREE.Spherical();
        spherical.setFromVector3(camera.position);

    Then store that.

    Then on drag, update theta and phi.

    We'll do:

        let controls = {
            enabled: true,
            spherical: new THREE.Spherical(),
            radius: 50, // we'll set from camera initially
            theta: 0,
            phi: 0,
            // ... and methods
        }

    Actually, we'll just update the spherical from the current camera position at the start.

    Then:

        function updateCamera() {
            controls.spherical.theta = controls.theta;
            controls.spherical.phi = controls.phi;
            controls.spherical.radius = controls.radius;
            camera.position.setFromSpherical(controls.spherical);
            camera.lookAt(0,0,0);
        }

    Then in the mouse events:

        onMouseDown: set drag=true, store lastX, lastY.

        onMouseMove: if drag, compute deltaX, deltaY -> update controls.theta and controls.phi.

        onMouseUp: drag=false.

        onWheel: update controls.radius.

    We'll set:

        controls.theta = spherical.theta;
        controls.phi = spherical.phi;
        controls.radius = spherical.radius;

    Then updateCamera() after each change.

 11. We'll attach the event listeners to the renderer's domElement.

 Given the complexity and time, we'll implement a basic version.

 However, note: the Lorenz simulation might be heavy? We are updating the line geometry every frame. We might need to cap the number of points? Or use a fixed array? But the requirement says "draw over time", so we want to keep adding points.

 12. We'll also note that the line might get very long. We can limit the number of points? Or just let it run.

 We'll let it run and hope it's okay.

 Implementation:

   We'll write the code accordingly.

 Let's code.

 Due to the complexity, we'll write the entire index.html.

 We'll write the index.html file with the following:

   - Basic HTML structure.
   - Style: body and canvas full size.
   - Script: three.min.js included.
   - Script: our code.

 We'll write the custom controls.

 We'll assume the three.min.js does not include OrbitControls.

 Let's write the code.

 Note: We must scale the Lorenz points? The Lorenz attractor in the equations above produces points that are in the range of about -20 to 20? We can multiply by 1 to keep it as is, and set the camera at radius 50. Then we can see it.

 Alternatively, we can scale the points by 5? Let's multiply each point by 5.

   points.push(new THREE.Vector3(x*5, y*5, z*5));

 We'll do that.

 Now, we write the file.