52 lines
1.4 KiB
JavaScript
52 lines
1.4 KiB
JavaScript
let camera, scene, renderer;
|
|
let geometry, material, mesh;
|
|
|
|
init();
|
|
animate();
|
|
|
|
function init() {
|
|
|
|
// Computes the aspect ratio of the window.
|
|
let aspectRatio = window.innerWidth / window.innerHeight;
|
|
|
|
// Creates a camera and sets its parameters and position.
|
|
camera = new THREE.PerspectiveCamera(70, aspectRatio, 0.01, 10);
|
|
camera.position.z = 1;
|
|
|
|
// Creates the scene that contains our objects.
|
|
scene = new THREE.Scene();
|
|
|
|
// Creates a geometry (vertices and faces) corresponding to a cube.
|
|
geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);
|
|
|
|
// Creates a material that paints the faces depending on their normal.
|
|
material = new THREE.MeshNormalMaterial();
|
|
|
|
// Creates a mesh that associates the geometry with the material.
|
|
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);
|
|
|
|
}
|
|
|
|
// This function will be called at each frame.
|
|
function animate() {
|
|
|
|
// Makes the mesh rotate to have a nice animation
|
|
mesh.rotation.x += 0.01;
|
|
mesh.rotation.y += 0.02;
|
|
|
|
// Renders the scene with the camera.
|
|
renderer.render(scene, camera);
|
|
|
|
// Re-triggers animate() when the moment has come.
|
|
requestAnimationFrame(animate);
|
|
|
|
}
|