three.js dev template - module

by gandarufuuu

HTML

<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
    
<script type="importmap">
	{
		"imports": {
			"three": "https://unpkg.com/three/build/three.module.js",
      "three/addons/": "https://unpkg.com/three/examples/jsm/"
		}
	}
</script>

CSS

body {
	margin: 0px;
}

JavaScript

// Simple three.js example

import * as THREE from 'three';
import {
  OrbitControls
} from 'three/addons/controls/OrbitControls.js';

let mesh, renderer, scene, camera, controls;
let particleSystem;
let sparkleMaterial
const clock = new THREE.Clock();

init();
animate();

function init() {

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

  // scene
  scene = new THREE.Scene();

  // camera
  camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 10000);
  camera.position.set(20, 20, 20);

  // controls
  controls = new OrbitControls(camera, renderer.domElement);

  // ambient
  scene.add(new THREE.AmbientLight(0x222222));

  // light
  const light = new THREE.DirectionalLight(0xffffff, 1);
  light.position.set(20, 20, 0);
  scene.add(light);

  // axes
  scene.add(new THREE.AxesHelper(20));
  scene.background = new THREE.Color(0x444444);

  // PARTICLES
  const particles = 100;
  const radius = 20;
  const positions = [];
  const sizes = [];
  let geometry = new THREE.BufferGeometry();

  for (let i = 0; i < particles; i++) {
    positions.push((Math.random() * 2 - 1) * (radius / 2));
    positions.push((Math.random() * 2 - 1) * (radius / 2));
    positions.push((Math.random() * 2 - 1) * (radius / 2));
    sizes.push(Math.random() * 5);
  }

  geometry.setAttribute(
    'position',
    new THREE.Float32BufferAttribute(positions, 3)
  );
  geometry.setAttribute(
    'size',
    new THREE.Float32BufferAttribute(sizes, 1).setUsage(THREE.DynamicDrawUsage)
  );

  // SHADER
  const vertexShader = `
  uniform float time;
  attribute float size;
  void main() {
    vec4 modelPosition = modelMatrix * vec4(position, 1.0);
    modelPosition.y += sin(time + modelPosition.x ) * 0.2;
    modelPosition.z += cos(time + modelPosition.x ) * 0.2;
    modelPosition.x += cos(time +...