~/blog

import * as THREE from "three";

// scene, the container that holds everything
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x2d353b);

// mesh(object): geometry(shape) + material(apperance)
const geometry = new THREE.BoxGeometry(1, 1, 1); // 1x1x1 cube shape
const material = new THREE.MeshBasicMaterial({
  color: 0xa7c080,
  transparent: true,
  opacity: 0.7,
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

// camera, what we see and from where
const sizes = { width: 300, height: 300 };
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height);
camera.position.z = 3; // move camera back a bit
scene.add(camera);

// renderer, draws everything to the canvas
const canvas = document.querySelector("canvas.webgl");
const renderer = new THREE.WebGLRenderer({
  canvas,
});
renderer.setSize(sizes.width, sizes.height);
renderer.render(scene, camera); // render it

// animation loop
function animate() {
  mesh.rotation.x += 0.01;
  mesh.rotation.y += 0.1;
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}

animate();