Cube Example

by Cody Bennett

CSS

canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

JavaScript

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

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const fov = 70;
const aspectRatio = window.innerWidth / window.innerHeight;
const near = 0.01;
const far = 10;

const camera = new THREE.PerspectiveCamera(fov, aspectRatio, near, far);
camera.position.z = 1;

const scene = new THREE.Scene();

const geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);
const material = new THREE.MeshNormalMaterial();

const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

const animation = () => {
  mesh.rotation.x += 0.01;
  mesh.rotation.y += 0.02;

  renderer.render(scene, camera);
};

renderer.setAnimationLoop(animation);