First scene - simple cube

Simple three.js scene, simple cube with basic material

by hirako2000

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/94/three.min.js"></script>

CSS

body {
  margin: 0;
}

JavaScript

let renderer;
let scene;
let camera;
let mesh;
let geometry;
let material;

init();
animate();

// initialize stuff
function init() {

	// Renderer
	renderer = new THREE.WebGLRenderer({
  	antialias: true
  });
  renderer.setSize(window.innerWidth, window.innerHeight);
  
  // Add  renderer's dom element to dom
  document.body.appendChild(renderer.domElement);
  
  // Scene 
  scene = new THREE.Scene();
  
  // Camera
  // fov — Camera frustum vertical field of view.
  // aspect — Camera frustum aspect ratio.
  // near — Camera frustum near plane.
  // far — Camera frustum far plane.
  camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.z = 10;
  
  // Mesh
  // Height, Width, Depth
  geometry = new THREE.BoxGeometry(2, 2, 2);
  material = new THREE.MeshBasicMaterial({
  	color: 0xffffff,
    wireframe: false
  })
  
  mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);
}

function animate() {
	requestAnimationFrame(animate);
  render();
}

function render() {
	renderer.render(scene, camera);
}