JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
<div id="splash"></div>
JavaScript
class PointsMeshGraph {
constructor(domElement, countX = 100, countY = 100) {
this.dt = 0;
this.countX = countX;
this.countY = countY;
this.domElement = domElement;
this.scene = new THREE.Scene();
this.renderer = new THREE.WebGLRenderer({ alpha: true, antialias: false });
this.renderer.setPixelRatio(window.devicePixelRatio);
this.renderer.setSize(
window.innerWidth,
window.innerHeight
);
this.renderer.setClearColor(0xffffff, 0);
this.domElement.insertBefore(
this.renderer.domElement,
this.domElement.firstChild
);
// Camera & Conrols
this.camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
1,
1000
);
this.camera.position.set(0, 0, 65);
this.camera.lookAt(0, 0, 0);
// initialize a flat array of (x,y,z) pairs of particles
const numParticles = this.countX * this.countY;
const positions = new Float32Array(numParticles * 3);
// initialize by iterating through every element on the x-y grid
// and manually setting the i -> x, i+1 -> y, i+2 -> z in each group of 3
let i = 0;
for (let dx = 0; dx < this.countX; dx += 1) {
for (let dy = 0; dy < this.countY; dy += 1) {
positions[i] = dx - this.countX / 2;
positions[i + 1] = 0;
positions[i + 2] = dy - this.countY / 2;
i += 3; // increment to next group of 3
}
}
this.geometry = new THREE.BufferGeometry();
this.geometry.addAttribute(
'position',
new THREE.BufferAttribute(positions, 3)
);
// Option 1 - particles only
const materialOptions = {
color: new THREE.Color(0x0076de),
size: 0.5
};
this.material = new THREE.PointsMaterial(materialOptions);
this.particles = new THREE.Points(this.geometry, this.material);
this.scene.add(this.particles);
}
onWindowResize = () => {
this.camera.aspect = window.innerWidth / window.innerHeight;
...