Drawing a 3D cylinder and a cone
The method adopted for drawing is more or less the same in each of the recipes. This recipe shows some more shapes. The output is as follows:
How to do it…
The HTML code:
<html>
<head>
<title>Cylinders</title>
<script src="../threeLib/build/three.min.js"></script>
<script src="cylinders.js">
</script>
</head>
<body onload="init()">
<center>
<canvas width="800" height="600" id="MyCanvasArea" style="border:2px solid blue;" tabindex="0">
Canvas tag is not supported by your browser
</canvas>
<h1>3D rotating cylinder and cone using three.js</h1>
<h1>Use arrow keys to make the shapes rotate.<br>
Press Enter key or spacebar to reset</h1>
</center>
</body>
</html>The JavaScript code:
var can;
var scene;
var camera;
var renderer;
var cylinder;
var cone;
var rotX=0;
var rotY=0;
function init() {
can=document.getElementById...
