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);

let g = new THREE.PlaneGeometry(5, 5);
let m = new THREE.MeshBasicMaterial({
	map: new THREE.TextureLoader().load("https://threejs.org/examples/textures/brick_diffuse.jpg", tex => {
  	tex.wrapS = tex.wrapT = THREE.RepeatWrapping;
  })
})
let o = new THREE.Mesh(g, m);
scene.add(o);

window.addEventListener("resize", onResize);

let clock = new THREE.Clock();

renderer.setAnimationLoop(_ => {
	
  let t = clock.getElapsedTime() * 0.5;
  let x = 2.5 + Math.cos(t) * 1.5;
  let y = 2.5 + Math.sin(t) * 1.5;
  g.attributes.position.setXY(1, x, y);
	g.attributes.position.needsUpdate = true;
  let u = (x - (-2.5)) / 5;
  let v = (y - (-2.5)) / 5;
  g.attributes.uv.setXY(1, u, v);
  g.attributes.uv.needsUpdate = true;
  renderer.render(scene, camera);
})

function onResize(event) {
  camera.aspect = innerWidth / innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(innerWidth, innerHeight);
}