three.js dev template - module

HTML

<script type="importmap">
	{
		"imports": {
			"three": "https://unpkg.com/three@0.141/build/three.module.js",
      "three/addons/": "https://unpkg.com/three@0.141/examples/jsm/"
		}
	}
</script>

<div id="magic">
</div>

CSS

body {
	margin: 0px;
}


#magic {
  width: 100vw;
  height: 100vh;
    font-family: "Roboto" !important;
  color: white;
  font-size: 9px;
  background-color: #333;  /* Added a background color for clarity */
}

JavaScript

import * as THREE from 'three';
import {
  FontLoader
} from 'three/addons/loaders/FontLoader.js';

async function preload()  {
  const fontLoader = new FontLoader();
  const textureLoader = new THREE.TextureLoader();

  const [ font, particle ] = await Promise.all( [
    fontLoader.loadAsync("https://res.cloudinary.com/dydre7amr/raw/upload/v1612950355/font_zsd4dr.json"),
    textureLoader.loadAsync( "https://res.cloudinary.com/dfvtkoboz/image/upload/v1605013866/particle_a64uzf.png" ),
  ] );
  
  const environment = new Environment(font, particle);
}

if (
  document.readyState === "complete" ||
  (document.readyState !== "loading" && !document.documentElement.doScroll)
)
  preload();
else document.addEventListener("DOMContentLoaded", preload);

let magicDivInViewport = false; // Track if the magic div is in the viewport

class Environment {
  constructor(font, particle) {
    this.font = font;
    this.particle = particle;
    this.container = document.querySelector("#magic");
    this.scene = new THREE.Scene();
    this.createCamera();
    this.createRenderer();
    this.setup();
    this.bindEvents();
    this.startTimer();
  }

  startTimer() {
    this.mouseEnabled = false;
    this.createParticles.onMouseDown();
    this.createParticles.disableMouseTracking(); // Disable mouse tracking

    setTimeout(() => {
      this.createParticles.onMouseUp();
      this.createParticles.enableMouseTracking(); // Enable mouse tracking
      this.mouseEnabled = true;
    }, 6000);
  }

  bindEvents() {
    window.addEventListener("resize", this.onWindowResize.bind(this));
    window.addEventListener("scroll", this.checkMagicDivInViewport.bind(this));
  }

  checkMagicDivInViewport() {
    const magicDiv = document.querySelector("#magic");
    const rect = magicDiv.getBoundingClientRect();
    magicDivInViewport = rect.top <= window.innerHeight && rect.bottom >= 0;

    if (!magicDivInViewport) {
      // Magic div is out of view, stop JavaScript associated with it
     ...