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';
import {OrbitControls} from 'https://threejs.org/examples/jsm/controls/OrbitControls.js';
import {BufferGeometryUtils} from "https://threejs.org/examples/jsm/utils/BufferGeometryUtils.js";
import {GUI} from "https://threejs.org/examples/jsm/libs/dat.gui.module.js";


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

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

let light = new THREE.DirectionalLight(0xffffff, 1);
light.position.setScalar(10);
scene.add(light, new THREE.AmbientLight(0xffffff, 0.5));

let pg = new THREE.PlaneGeometry(10, 10);
pg.rotateX(Math.PI * -0.5);
let pm = new THREE.MeshLambertMaterial({color: "gray"});
let p = new THREE.Mesh(pg, pm);
scene.add(p);

let bg = new THREE.BoxGeometry(2, 2, 2);
bg.translate(0, 1, 0);
let bm = new THREE.MeshLambertMaterial({color: "red"});
let b = new THREE.Mesh(bg, bm);
scene.add(b)

let clock = new THREE.Clock();

renderer.setAnimationLoop(() => {
	let t = clock.getElapsedTime();
  b.scale.setScalar(1 + Math.sin(t) * 0.25);
  renderer.render(scene, camera);
})