I'm trying to rotate a cube about all 3 axes (x,y,z), im using the code shown below:
`
<html>
<head>
<title>CM20219 – Coursework 2 – WebGL</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body { margin: 0; overflow: hidden; }
canvas { width: 100%; height: 100%; }
</style>
</head>
<body>
<script src="three.js"></script>
<script>
"use strict"; // https://stackoverflow.com/q/1335851/72470
// Global variables that are available in all functions.
// Note: You can add your own here, e.g. to store the rendering mode.
var camera, scene, renderer, mesh;
// Initialise the scene, and draw it for the first time.
init();
animate();
// Listen for keyboard events, to react to them.
// Note: there are also other event listeners, e.g. for mouse events.
document.addEventListener('keydown', handleKeyDown);
// Scene initialisation. This function is only run once, at the very beginning.
function init()
{
scene = new THREE.Scene();
// Set up the camera, move it to (3, 4, 5) and look at the origin (0, 0, 0).
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(3, 4, 5);
camera.lookAt(new THREE.Vector3(0, 0, 0));
// Draw a helper grid in the x-z plane (note: y is up).
scene.add(new THREE.GridHelper(10, 20, 0xffffff));
// TO DO: Draw a cube (requirement 1).
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
const vertices = cube.vertices
const wireframe = cube.wireframe
scene.add( wireframe);
scene.add( cube );
scene.add( vertices );
camera.position.z = 5;
// TO DO: Visualise the axes of the global coordinate system (requirment 2).
const axeshelper = new THREE.AxesHelper(5)
scene.add(axeshelper)
// Basic ambient lighting.
scene.add(new THREE.AmbientLight(0xffffff));
// TO DO: add more complex lighting for 'face' rendering mode (requirement 4).
const light = new THREE.AmbientLight(0x404040);
scene.add( light );
// Set up the Web GL renderer.
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio); // HiDPI/retina rendering
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// Handle resizing of the browser window.
window.addEventListener('resize', handleResize, false);
}
// Handle resizing of the browser window.
function handleResize()
{
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
// Animation loop function. This function is called whenever an update is required.
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
cube.rotation.z += 0.01;
renderer.render(scene, camera);
}
// Handle keyboard presses.
function handleKeyDown(event)
{
switch (event.keyCode)
{
// Render modes.
case 70: // f = face
alert('TO DO: add code for face render mode (requirement 4).');
break;
case 69: // e = edge
alert('TO DO: add code for edge render mode (requirement 4).');
break;
case 86: // v = vertex
alert('TO DO: add code for vertex render mode (requirement 4).');
break;
// TO DO: add code for starting/stopping rotations (requirement 3).
}
}
</script>
</body>
</html>
`
I think the issue lies in the fact that I dont have access to the rotation function. Is there a way i can build this function mathematically using matrices or something? Apologies if the solution is super obvious, I'm really new to this programming language.
Thanks!
