JSFiddle - React, Tailwind, and code Playground

by Paul West

HTML

<script src="https://cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>

CSS

body {
  color: #ffffff;
  background-color: #000000;
  margin: 0px;
  overflow: hidden;
}

JavaScript

var camera, scene, renderer;
var mesh, geometry, material;

init();
animate();

function init() {
  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
  camera.position.z = 220;
  scene = new THREE.Scene();
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);
  
  addPointsCloud(4);
  
}

function animate() {
  requestAnimationFrame(animate);
  mesh.rotation.x += 0.003;
  mesh.rotation.y += 0.001;
  mesh.rotation.z += 0.002;
  renderer.render(scene, camera);
}

function addPointsCloud(detailsLevel) {
  geometry = new THREE.IcosahedronGeometry(102, detailsLevel);
  
  var colors = [];
  geometry.vertices.forEach(function(){
    colors.push(new THREE.Color(0x333333));
  });
  geometry.colors = colors;
  
  material = new THREE.PointsMaterial( { size:2, vertexColors: THREE.VertexColors} );
  mesh = new THREE.Points(geometry, material);

  scene.add(mesh);
}

document.addEventListener('click', function() {
  
  mesh.geometry.colors[100].set(0xff0000);
  mesh.geometry.colorsNeedUpdate = true;
  console.log(mesh.geometry);
})