JSFiddle - React, Tailwind, and code Playground

by govizlora

HTML

<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

CSS

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

JavaScript

// Setup
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild(renderer.domElement);
const scene = new THREE.Scene();
scene.background = new THREE.Color(0xffffff);
const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight);
camera.position.set(3, 3, 3);
camera.lookAt(0, 0, 0);

// Shape
const shape = new THREE.Shape();
shape.moveTo(0, 0);
shape.lineTo(0, 1);
shape.lineTo(1, 1);
shape.lineTo(1, 0);
shape.lineTo(0, 0);

// Shader
const vertexShader = `
attribute vec3 color;
attribute vec3 offset;
varying vec3 vColor;

void main() {
  vColor = color;
  gl_Position = projectionMatrix * modelViewMatrix * vec4( position + offset, 1.0 );
}
`;

const fragmentShader = `
varying vec3 vColor;

void main() {
  gl_FragColor = vec4(vColor, 1.0);
}
`

// Mesh
const refGeo = new THREE.ExtrudeBufferGeometry(shape, { depth: 1, bevelEnabled: false });
const geometry = new THREE.InstancedBufferGeometry();
geometry.attributes.position = refGeo.attributes.position;
geometry.attributes.uv = refGeo.attributes.uv;
geometry.groups = refGeo.groups;
geometry.addAttribute('color', new THREE.InstancedBufferAttribute(new Float32Array([1, 0, 0, 1, 0, 0]), 3));
geometry.addAttribute('offset', new THREE.InstancedBufferAttribute(new Float32Array([0, 0, 0, 2, 0, 0]), 3));
const material = new THREE.ShaderMaterial({ vertexShader, fragmentShader })
const mesh = new THREE.Mesh(geometry, [material, material]);
scene.add(mesh);

// Render
renderer.render(scene, camera);