Three.js base

A base/starter fiddle for Three.js

by Paul West

HTML

<script src="https://cdn.rawgit.com/mrdoob/stats.js/r17/build/stats.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/109/three.min.js"></script>
<!DOCTYPE html>
<html lang="en">

  <head>
    <title>three.js webgl - custom attributes [particles]</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

  </head>

  <body>
    <div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - custom attributes example - particles</div>
    <div id="container"></div>

    <script type="x-shader/x-vertex" id="vertexshader">
      attribute float size;
			attribute vec3 customColor;
			varying vec3 vColor;
			void main() {
				vColor = customColor;
				vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
				gl_PointSize = size * ( 300.0 / -mvPosition.z );
				gl_Position = projectionMatrix * mvPosition;
			}
		</script>

    <script type="x-shader/x-fragment" id="fragmentshader">
      uniform vec3 color;
			uniform sampler2D pointTexture;
			varying vec3 vColor;
			void main() {
				gl_FragColor = vec4( color * vColor, 1.0 );
				gl_FragColor = gl_FragColor * texture2D( pointTexture, gl_PointCoord );
			}
		</script>
  </body>

</html>

CSS

body {
  margin: 0;
  background-color: #000;
  color: #fff;
  font-family: Monospace;
  font-size: 13px;
  line-height: 24px;
  overscroll-behavior: none;
}

a {
  color: #ff0;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

button {
  cursor: pointer;
  text-transform: uppercase;
}

canvas {
  display: block;
}

#info {
  position: absolute;
  top: 0px;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  text-align: center;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: none;
  z-index: 1;
  /* TODO Solve this in HTML */
}

a,
button,
input,
select {
  pointer-events: auto;
}

.dg.ac {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  z-index: 2 !important;
  /* TODO Solve this in HTML */
}

JavaScript

var camera, scene, renderer, mesh, material, stats;
var renderer, scene, camera, stats;
var sphere;
var WIDTH = window.innerWidth;
var HEIGHT = window.innerHeight;
let curve = new THREE.CatmullRomCurve3([
  new THREE.Vector3(-100, 0, 0),
  new THREE.Vector3(-40, 20, 0),
  new THREE.Vector3(40, -20, 0),
  new THREE.Vector3(100, 0, 0)
], false);
init();
animate();

function init() {
  camera = new THREE.PerspectiveCamera(40, WIDTH / HEIGHT, 1, 10000);
  camera.position.z = 300;
  scene = new THREE.Scene();
  const vertices = curve.getSpacedPoints(100);
  const lineGeometry = new THREE.Geometry();
  lineGeometry.vertices = vertices;
  const lineMaterial = new THREE.LineBasicMaterial({
    color: 0xff0000
  });
  const line = new THREE.Line(lineGeometry, lineMaterial)
  scene.add(line);
  var amount = 10;
  var positions = new Float32Array(amount * 3);
  var colors = new Float32Array(amount * 3);
  var sizes = new Float32Array(amount);
  var vertex = new THREE.Vector3();
  var color = new THREE.Color(0xffffff);
  for (var i = 0; i < amount; i++) {
    vertex.x = 0;
    vertex.y = 0;
    vertex.z = 0;
    vertex.toArray(positions, i * 3);
    if (vertex.x < 0) {
      color.setHSL(0.5 + 0.1 * (i / amount), 0.7, 0.5);
    } else {
      color.setHSL(0.0 + 0.1 * (i / amount), 0.9, 0.5);
    }
    color.toArray(colors, i * 3);
    sizes[i] = 50;
  }
  var geometry = new THREE.BufferGeometry();
  geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
  geometry.setAttribute('customColor', new THREE.BufferAttribute(colors, 3));
  geometry.setAttribute('size', new THREE.BufferAttribute(sizes, 1));
  //
  var material = new THREE.ShaderMaterial({
    uniforms: {
      color: {
        value: new THREE.Color(0xffffff)
      },
      pointTexture: {
        value: new THREE.TextureLoader().load("https://raw.githubusercontent.com/mrdoob/three.js/master/examples/textures/sprites/spark1.png")
      }
    },
    vertexShader:...