JSFiddle - React, Tailwind, and code Playground

by Paul West

CSS

body{
  overflow: hidden;
  margin: 0;
}

JavaScript

import * as THREE from "https://threejs.org/build/three.module.js";

let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 100);
camera.position.set(0, 0, 5);
let renderer = new THREE.WebGLRenderer();
renderer.setSize(innerWidth, innerHeight);
renderer.setClearColor(0x888888);
document.body.appendChild(renderer.domElement);

let c = new THREE.Color();
let m = new THREE.MeshBasicMaterial({vertexColors: true});

let g1 = new THREE.PlaneGeometry(2, 2);

let c1 = [];
let p1 = g1.attributes.position;
for(let i = 0; i < p1.count; i++){
	c.set(Math.random() * 0xffffff);
  c1.push(c.r, c.g, c.b);
}
g1.setAttribute("color", new THREE.Float32BufferAttribute(c1, 3));
console.log(g1);

let plane1 = new THREE.Mesh(g1, m);
plane1.position.x = -1.5;
scene.add(plane1);

let g2 = new THREE.PlaneGeometry(2, 2).toNonIndexed();

let c2 = [];
let p2 = g2.attributes.position;
for(let i = 0; i < p2.count; i++){
	c.set(Math.random() * 0xffffff);
  c2.push(c.r, c.g, c.b);
}
g2.setAttribute("color", new THREE.Float32BufferAttribute(c2, 3));
console.log(g2);

let plane2 = new THREE.Mesh(g2, m);
plane2.position.x = 1.5;
scene.add(plane2);

renderer.setAnimationLoop( _ => {
	renderer.render(scene, camera);
})