ThreeJS Fiddling

Fidling with ThreeJS

by gxlpes

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/97/three.js"></script>
<!doctype html>
<html>

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
  </head>

  <body id="body" class='bg-orange-200 w-full h-full max-w-7xl px-14'>

    <div class="mx-auto mt-14 flex h-full items-center w-full flex-col-reverse items-center justify-center md:min-h-[40rem] md:flex-row lg:mt-0">
      <section class="flex h-full w-full flex-col items-center justify-center gap-6 text-left selection:bg-primary selection:text-white md:items-start md:text-left">
      <h1 class="sm:text-md w-full text-5xl tracking-tighter md:text-5xl xl:text-6xl">
        Testing here blablabla
      </h1>
      </section>
      <canvas id="main" class="relative h-3/4 max-h-[25rem] w-full rounded-md bg-primary md:w-3/5 lg:w-1/2"> </canvas>
    </div>


  </body>

CSS

body {
  margin: 0;
  padding: 0;
}

canvas { 
}

JavaScript

const canvas = document.getElementById('main');
const body = document.getElementById('body');

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(40, canvas.clientWidth / canvas.clientHeight, 1, 1000)

var renderer = new THREE.WebGLRenderer({
  canvas
});
renderer.setSize(canvas.clientWidth, canvas.clientHeight)

var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({
  color: 0x00ff00
});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 5;

function resizeRendererToDisplaySize(renderer) {
  const canvas = renderer.domElement;
  const pixelRatio = window.devicePixelRatio;
  const width = Math.floor(canvas.clientWidth * pixelRatio);
  const height = Math.floor(canvas.clientHeight * pixelRatio);
  const needResize = canvas.width !== width || canvas.height !== height;
  if (needResize) {
    renderer.setSize(width, height, false);
  }
  return needResize;
}

function animate() {
  resizeRendererToDisplaySize(renderer);
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}

requestAnimationFrame(animate);