JSFiddle - React, Tailwind, and code Playground

by pmankar

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 geometry, material, mesh, pointCloud;

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);
  addPointsCloud(4);
  document.body.appendChild(renderer.domElement);
}

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) {
  geom = new THREE.IcosahedronGeometry(102, detailsLevel);
  materail = new THREE.PointsMaterial();
  mesh = new THREE.Points(geom, material);
  pointCloud = mesh;
  scene.add(mesh);
}

document.addEventListener('click', function() {
  pointCloud.geometry.colorsNeedUpdate = true;
  pointCloud.geometry.colors[100] = new THREE.Color("rgb(255,0,0)");
  console.log(mesh.geometry);
  
  
  
  
})