Update index.html

index.html

@@ -16,68 +16,77 @@
     <script src="https://threejs.org/examples/js/libs/dat.gui.min.js"></script>
     <script src="https://threejs.org/examples/js/curves/NURBSCurve.js"></script>
     <script>
-        // Set up the scene
-        const scene = new THREE.Scene();
+        function init() {
+            // Set up the scene
+            const scene = new THREE.Scene();
 
-        // Set up the camera
-        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
-        camera.position.z = 5;
+            // Set up the camera
+            const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+            camera.position.z = 5;
 
-        // Set up the renderer
-        const renderer = new THREE.WebGLRenderer();
-        renderer.setSize(window.innerWidth, window.innerHeight);
-        document.body.appendChild(renderer.domElement);
+            // Set up the renderer
+            const renderer = new THREE.WebGLRenderer();
+            renderer.setSize(window.innerWidth, window.innerHeight);
+            document.body.appendChild(renderer.domElement);
 
-        // Set up the skybox
-        const loader = new THREE.CubeTextureLoader();
-        const texture = loader.load([
-            'https://threejs.org/examples/textures/cube/SwedishRoyalCastle/pz.jpg',
-            'https://threejs.org/examples/textures/cube/SwedishRoyalCastle/nz.jpg',
-            'https://threejs.org/examples/textures/cube/SwedishRoyalCastle/py.jpg',
-            'https://threejs.org/examples/textures/cube/SwedishRoyalCastle/ny.jpg',
-            'https://threejs.org/examples/textures/cube/SwedishRoyalCastle/px.jpg',
-            'https://threejs.org/examples/textures/cube/SwedishRoyalCastle/nx.jpg'
-        ]);
-        scene.background = texture;
+            // Set up the skybox
+            const loader = new THREE.CubeTextureLoader();
+            const texture = loader.load([
+                'https://threejs.org/examples/textures/cube/SwedishRoyalCastle/pz.jpg',
+                'https://threejs.org/examples/textures/cube/SwedishRoyalCastle/nz.jpg',
+                'https://threejs.org/examples/textures/cube/SwedishRoyalCastle/py.jpg',
+                'https://threejs.org/examples/textures/cube/SwedishRoyalCastle/ny.jpg',
+                'https://threejs.org/examples/textures/cube/SwedishRoyalCastle/px.jpg',
+                'https://threejs.org/examples/textures/cube/SwedishRoyalCastle/nx.jpg'
+            ]);
+            scene.background = texture;
 
-        // Set up the lighting
-        const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
-        scene.add(ambientLight);
-        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
-        directionalLight.position.set(0, 1, 0);
-        scene.add(directionalLight);
+            // Set up the lighting
+            const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
+            scene.add(ambientLight);
+            const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
+            directionalLight.position.set(0, 1, 0);
+            scene.add(directionalLight);
 
-        // Set up the geometry
-        const lsystem = new LSystem();
-        lsystem.addRule('F', 'F+F-F-F+F');
-        lsystem.setAxiom('F+F+F+F');
-        lsystem.iterate(3);
-        const lines = lsystem.getLines();
-        const material = new THREE.LineBasicMaterial({ color: 0xffffff });
-        const geometry = new THREE.BufferGeometry().setFromPoints(lines);
-        const fractal = new THREE.LineSegments(geometry, material);
-        scene.add(fractal);
+            // Set up the geometry
+            const fractal = generateFractal();
+            scene.add(fractal);
 
-        // Set up the controls
-        const controls = new THREE.OrbitControls(camera, renderer.domElement);
+            // Set up the controls
+            const controls = new THREE.OrbitControls(camera, renderer.domElement);
 
-        // Set up the animation
-        function animate() {
-            requestAnimationFrame(animate);
+            // Set up the animation
+            function animate() {
+                requestAnimationFrame(animate);
 
-            fractal.rotation.x += 0.01;
-            fractal.rotation.y += 0.01;
+                fractal.rotation.x += 0.01;
+                fractal.rotation.y += 0.01;
 
-            controls.update();
-            renderer.render(scene, camera);
+                controls.update();
+                renderer.render(scene, camera);
+            }
+            animate();
+
+            // Set up the GUI
+            const gui = new dat.GUI();
+            gui.add(fractal.material, 'linewidth', 0.1, 10);
+            gui.add(fractal.material, 'opacity', 0.1, 1);
+            gui.add(fractal.material, 'transparent');
         }
-        animate();
 
-        // Set up the GUI
-        const gui = new dat.GUI();
-        gui.add(fractal.material, 'linewidth', 0.1, 10);
-        gui.add(fractal.material, 'opacity', 0.1, 1);
-        gui.add(fractal.material, 'transparent');
+        function generateFractal() {
+            const lsystem = new LSystem();
+            lsystem.addRule('F', 'F+F-F-F+F');
+            lsystem.setAxiom('F+F+F+F');
+            lsystem.iterate(3);
+            const lines = lsystem.getLines();
+            const material = new THREE.LineBasicMaterial({ color: 0xffffff });
+            const geometry = new THREE.BufferGeometry().setFromPoints(lines);
+            const fractal =  new THREE.LineSegments(geometry, material);
+        return fractal;
+    }
+
+    window.onload = init;
 </script>
 </body>
-</html>
+</html>