JSFiddle - React, Tailwind, and code Playground

by marquizzo

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Three.js</title>
		<style>
			body { margin: 0; }
		</style>
	</head>
	<body>
	</body>
</html>

JavaScript

import * as THREE from 'https://cdn.skypack.dev/three';
import { OrbitControls } from "https://cdn.skypack.dev/three@0.133/examples/jsm/controls/OrbitControls.js";

// Three.js boilerplate
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.z = 5;
const controls = new OrbitControls( camera, renderer.domElement );
const texLoader = new THREE.TextureLoader();

///////////////////////////////////// GEOMETRY
const geometry = new THREE.BufferGeometry();
// Create square
const vertices = new Float32Array([
-1, -1, 0, 
1, -1, 0,
-1, 1, 0,
1, 1, 0
]);

// Standard UV mapping
const uvs = new Float32Array([
0, 0,
1, 0,
0, 1,
1, 1
]);
const indices = [0, 1, 2, 3, 2, 1];
geometry.setIndex(indices);
geometry.setAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
geometry.setAttribute( 'uv', new THREE.BufferAttribute( uvs, 2 ) );
geometry.computeVertexNormals();


///////////////////////////////////// MATERIAL
// Create basic material with grid texture
const uvGrid = texLoader.load("https://raw.githubusercontent.com/mrdoob/three.js/d9af9952fc32c2a1281707946177135b90297aab/examples/textures/uv_grid_opengl.jpg");
uvGrid.anisotropy = 16;
const material = new THREE.MeshBasicMaterial( {
  side: THREE.DoubleSide,
  map: uvGrid
} );

// Top & bottom meshes
const mesh1 = new THREE.Mesh( geometry, material );
scene.add( mesh1 );
mesh1.position.y = -1.2;

// Clone geometry
const geom2 = geometry.clone();
geom2.translate(0, -1, 0);
const mesh2 = new THREE.Mesh(geom2, material);
scene.add( mesh2 );
mesh2.position.y = 2.2;


///////////////////////////////////// RENDER LOOP
const map = THREE.MathUtils.mapLinear;
let sin = 0;
const posAttribute = geometry.getAttribute("position");

const animate = function (time)...