JSFiddle - React, Tailwind, and code Playground

by tfoller

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>SAT Timing</title>
  </head>
  <body>
    <canvas id='bg'></canvas>
    <script type="module" src="main.js"></script>
  </body>
</html>

CSS

canvas {
  border: solid 1px red;
  position: fixed;
}

JavaScript

//import 'style.css'
import * as THREE from 'https://unpkg.com/three/build/three.module.js'

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); //ange, aspect ratio, view frustum

const renderer = new THREE.WebGLRenderer({
  canvas: document.querySelector('#bg'),
});

renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
camera.position.setZ(30);

const geometry = new THREE.TorusGeometry(10, 3, 16, 100);
const material = new THREE.MeshStandardMaterial({
  color: 0x55286F,
  wireframe: true
});

const torus = new THREE.Mesh(geometry, material);
const ambientLight = new THREE.AmbientLight(0xffffff)
ambientLight.position.set(20, 20, 20)
scene.add(torus)

const pointLight = new THREE.PointLight(0xffffff)
pointLight.position.set(20, 20, 20)

scene.add(pointLight, ambientLight)

const lightHelper = new THREE.PointLightHelper(pointLight)
const gridHelper = new THREE.GridHelper();
scene.add(lightHelper, gridHelper)

function animate() {

  requestAnimationFrame(animate);
  torus.rotation.x += 0.01;
  torus.rotation.y += 0.005;
  torus.rotation.z += 0.01

  renderer.render(scene, camera);
}
animate()