30 lines
1.0 KiB
JavaScript
30 lines
1.0 KiB
JavaScript
|
// Computes the aspect ratio of the window.
|
||
|
|
let aspectRatio = window.innerWidth / window.innerHeight;
|
||
|
|
|
||
|
|
// Creates a camera and sets its parameters and position.
|
||
|
|
let camera = new THREE.PerspectiveCamera(70, aspectRatio, 0.01, 10);
|
||
|
|
camera.position.z = 1;
|
||
|
|
|
||
|
|
// Creates the scene that contains our objects.
|
||
|
|
let scene = new THREE.Scene();
|
||
|
|
|
||
|
|
// Creates a geometry (vertices and faces) corresponding to a cube.
|
||
|
|
let geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);
|
||
|
|
|
||
|
|
// Creates a material that paints the faces depending on their normal.
|
||
|
|
let material = new THREE.MeshNormalMaterial();
|
||
|
|
|
||
|
|
// Creates a mesh that associates the geometry with the material.
|
||
|
|
let mesh = new THREE.Mesh(geometry, material);
|
||
|
|
|
||
|
|
// Adds the mesh to the scene.
|
||
|
|
scene.add(mesh);
|
||
|
|
|
||
|
|
// Creates the renderer and append its canvas to the DOM.
|
||
|
|
renderer = new THREE.WebGLRenderer({ antialias: true });
|
||
|
|
renderer.setSize(window.innerWidth, window.innerHeight);
|
||
|
|
document.body.appendChild(renderer.domElement);
|
||
|
|
|
||
|
|
// Renders the scene with the camera.
|
||
|
|
renderer.render(scene, camera);
|