JSFiddle - React, Tailwind, and code Playground

by lighty1235

CSS

body{
  overflow: hidden;
  margin: 0;
}

JavaScript

import * as THREE from "https://cdn.skypack.dev/[email protected]";
import {
  OrbitControls
} from "https://cdn.skypack.dev/[email protected]/examples/jsm/controls/OrbitControls.js";

let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 1000);
camera.position.set(0, 0, 10);
camera.lookAt(scene.position);
let renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(innerWidth, innerHeight);
renderer.setClearColor(0x404040);
document.body.appendChild(renderer.domElement);

let controla = new OrbitControls(camera, renderer.domElement);

function generateCircleGeometry(pointsCount, radius) {
     const geometry = new THREE.BufferGeometry();
     const positions = new Float32Array(pointsCount * 3);

     for (let i = 0; i < pointsCount; i++) {
          const angle = (i / pointsCount) * Math.PI * 2;
          positions[i * 3] = Math.cos(angle) * radius;
          positions[i * 3 + 1] = Math.sin(angle) * radius;
          positions[i * 3 + 2] = 0;
     }

     geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
     return geometry;
}

function generateCubeGeometry(pointsCount, size) {
     const geometry = new THREE.BufferGeometry();
     const positions = new Float32Array(pointsCount * 3);

     for (let i = 0; i < pointsCount; i++) {
          positions[i * 3] = (Math.random() - 0.5) * size;
          positions[i * 3 + 1] = (Math.random() - 0.5) * size;
          positions[i * 3 + 2] = (Math.random() - 0.5) * size;
     }

     geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
     return geometry;
}

const pointsCount = 1000;
const circleGeometry = generateCircleGeometry(pointsCount, 1);
const cubeGeometry = generateCubeGeometry(pointsCount, 2);

const material = new THREE.PointsMaterial({ color: 0x888888, size: 0.05 });

const circlePoints = new THREE.Points(circleGeometry, material);
const cubePoints = new THREE.Points(cubeGeometry,...