polyforest · nbilyk · Dec 5, 2025 · Dec 5, 2025
diff --git a/.gitignore b/.gitignore
@@ -56,7 +56,6 @@ node_modules/
 .env
 
 dist/
-/www/
 /generated-types/
 /jsdocs/
 /act/

diff --git a/buildSrc/build.ts b/buildSrc/build.ts
diff --git a/buildSrc/util/copyFiles.ts b/buildSrc/util/copyFiles.ts
diff --git a/package.json b/package.json
@@ -32,10 +32,9 @@
         "build": "lerna run build",
         "watch": "lerna run watch --parallel",
         "prewww": "lerna run build",
-        "www": "tsx ./buildSrc/build.ts",
         "test": "lerna run test",
         "validate": "lerna run build && lerna run lint && lerna run test",
-        "serve": "npm run www && http-server www"
+        "serve": "http-server www"
     },
     "repository": {
         "type": "git",

diff --git a/packages/example/src/index.ts b/packages/example/src/index.ts
@@ -28,8 +28,6 @@ const scene = new Scene()
 scene.background = new Color(0x111111)
 scene.fog = new Fog(0x111111, 1, 10)
 
-const clock = new Clock()
-
 const grid = new GridHelper(20, 20, 0x000000, 0xffffff)
 grid.material.opacity = 0.2
 grid.material.transparent = true
@@ -96,6 +94,7 @@ loader
     })
     .catch(console.error)
 
+const clock = new Clock()
 function render() {
     const dT = Math.min(clock.getDelta(), 0.1)
     controls.update()

diff --git a/resources/example.html b/resources/example.html
diff --git a/www/codepen-helper.js b/www/codepen-helper.js
@@ -0,0 +1,69 @@
+(function () {
+    const btn = document.createElement('a');
+    btn.id = 'editButton';
+    btn.href = '#';
+    btn.textContent = 'Edit on CodePen';
+    Object.assign(btn.style, {
+        position: 'absolute',
+        top: '10px',
+        right: '10px',
+        padding: '10px 20px',
+        background: '#333',
+        color: 'white',
+        textDecoration: 'none',
+        fontFamily: 'sans-serif',
+        borderRadius: '5px',
+        zIndex: '1000',
+        fontSize: '14px',
+        opacity: '0.8',
+    });
+    document.body.appendChild(btn);
+
+    btn.addEventListener('click', (e) => {
+        e.preventDefault();
+        const form = document.createElement('form');
+        form.action = 'https://codepen.io/pen/define';
+        form.method = 'POST';
+        form.target = '_blank';
+
+        const input = document.createElement('input');
+        input.type = 'hidden';
+        input.name = 'data';
+
+        // Clone to remove button and script before serializing
+        const clone = document.documentElement.cloneNode(true);
+
+        // Remove the edit button from the clone
+        const clonedBtn = clone.querySelector('#editButton');
+        if (clonedBtn) clonedBtn.remove();
+
+        // Remove the script that includes this logic
+        const scripts = clone.querySelectorAll('script');
+        scripts.forEach((s) => {
+            if (s.src && s.src.includes('codepen-helper.js')) {
+                s.remove();
+            }
+        });
+
+        // Clean up the canvas attributes added by Three.js
+        const canvas = clone.querySelector('#mainCanvas');
+        if (canvas) {
+            canvas.removeAttribute('data-engine');
+            canvas.removeAttribute('width');
+            canvas.removeAttribute('height');
+            canvas.removeAttribute('style');
+        }
+
+        const data = {
+            title: 'Three Particles Example',
+            html: '<!doctype html>\n' + clone.outerHTML,
+            editors: '100', // HTML open
+        };
+
+        input.value = JSON.stringify(data);
+        form.appendChild(input);
+        document.body.appendChild(form);
+        form.submit();
+        document.body.removeChild(form);
+    });
+})();
diff --git a/www/example.html b/www/example.html
@@ -0,0 +1,146 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <title>Three Particles Example</title>
+        <style>
+            body,
+            html {
+                margin: 0;
+                width: 100%;
+                height: 100%;
+                overflow: hidden;
+            }
+            #mainCanvas {
+                width: 100%;
+                height: 100%;
+                display: block;
+                background-color: #191919;
+            }
+        </style>
+        <script type="importmap">
+            {
+                "imports": {
+                    "three": "https://unpkg.com/three@0.181.2/build/three.module.js",
+                    "three/addons/": "https://unpkg.com/three@0.181.2/examples/jsm/",
+                    "three-particles": "https://unpkg.com/three-particles@0.15.0/dist/index.js"
+                }
+            }
+        </script>
+    </head>
+    <body>
+        <canvas id="mainCanvas"></canvas>
+        <script type="module">
+            import {
+                AmbientLight,
+                Clock,
+                Color,
+                DirectionalLight,
+                Fog,
+                GridHelper,
+                Mesh,
+                MeshStandardMaterial,
+                PerspectiveCamera,
+                PlaneGeometry,
+                Scene,
+                Vector3,
+                WebGLRenderer,
+            } from 'three'
+            import {
+                ParticleEffect,
+                ParticleEffectLoader,
+            } from 'three-particles'
+            import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
+
+            const camera = new PerspectiveCamera()
+            camera.position.set(0, 5, 10)
+            camera.lookAt(new Vector3(0, 0.2, 0))
+
+            const scene = new Scene()
+            scene.background = new Color(0x111111)
+            scene.fog = new Fog(0x111111, 1, 30)
+
+            const grid = new GridHelper(20, 20, 0x000000, 0xffffff)
+            grid.material.opacity = 0.2
+            grid.material.transparent = true
+            scene.add(grid)
+
+            const canvas = document.querySelector('#mainCanvas')
+
+            const renderer = new WebGLRenderer({
+                canvas,
+                antialias: true,
+            })
+            renderer.setClearColor(0x191919)
+            renderer.shadowMap.enabled = true
+
+            // Lighting
+            const dirLight = new DirectionalLight(0xffffff, 2)
+            dirLight.position.set(3, 4, 2)
+            dirLight.castShadow = true
+            // Tweak shadow quality and camera bounds to cover our scene area
+            const s = 5
+            dirLight.shadow.camera.left = -s
+            dirLight.shadow.camera.right = s
+            dirLight.shadow.camera.top = s
+            dirLight.shadow.camera.bottom = -s
+            dirLight.shadow.mapSize.set(1024, 1024)
+            scene.add(dirLight)
+            scene.add(new AmbientLight(0xffffff, 0.2))
+
+            // Ground to receive shadows
+            const ground = new Mesh(
+                new PlaneGeometry(20, 20),
+                new MeshStandardMaterial({ color: 0x303030 }),
+            )
+            ground.rotation.x = -Math.PI / 2
+            ground.position.y = -0.001
+            ground.receiveShadow = true
+            scene.add(ground)
+
+            const controls = new OrbitControls(camera, renderer.domElement)
+
+            // Update the camera and WebGLRenderer when the window resizes.
+            function onResize() {
+                const width = canvas.clientWidth
+                const height = canvas.clientHeight
+                renderer.setPixelRatio(window.devicePixelRatio)
+                renderer.setSize(width, height, false)
+                camera.aspect = width / height
+                camera.updateProjectionMatrix()
+            }
+
+            window.addEventListener('resize', onResize)
+            onResize()
+
+            // Load the particle effect.
+            let particleEffect = null
+            const loader = new ParticleEffectLoader()
+
+            const particleEffectUrl =
+                'https://firebasestorage.googleapis.com/v0/b/three-particles.firebasestorage.app/o/effects%2FiU0h1i107OerR2pGyWTKWBjJ3xJ3%2Fpublic%2Fa9c7af6b-deba-4511-b4b8-6900f7e79fed-r1-cube-tornado.json?alt=media&token=7c5a5e71-9b24-473c-bf15-d52231c92c8e'
+
+            loader
+                .loadAsync(particleEffectUrl)
+                .then((model) => {
+                    particleEffect = new ParticleEffect(model)
+                    scene.add(particleEffect)
+                })
+                .catch(console.error)
+
+            const clock = new Clock()
+            function render() {
+                const dT = Math.min(clock.getDelta(), 0.1)
+                controls.update()
+                if (particleEffect) {
+                    particleEffect.update(dT)
+                }
+                renderer.render(scene, camera)
+            }
+
+            clock.start()
+            renderer.setAnimationLoop(render)
+        </script>
+        <script src="./codepen-helper.js"></script>
+    </body>
+</html>
diff --git a/resources/favicon.svg → www/favicon.svg b/resources/favicon.svg → www/favicon.svg
diff --git a/resources/index.html → www/index.html b/resources/index.html → www/index.html
@@ -7,11 +7,11 @@
             name="viewport"
             content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
         />
-        <link rel="icon" type="image/png" href="favicon.svg" />
+        <link rel="icon" type="image/png" href="./favicon.svg" />
     </head>
 
     <body>
         Coming soon™
-        <p><a href="./example">Example</a></p>
+        <p><a href="./example.html">Example</a></p>
     </body>
 </html>
-Original file line number
+Diff line change
@@ Expand Up / @@ -56,7 +56,6 @@ node_modules/ @@
     .env
     dist/
-    /www/
     /generated-types/
     /jsdocs/
     /act/
@@ Expand Down @@