Drawing a 3D sphere and a torus
Some more shapes in 3D are rendered here. The output looks as follows:
How to do it…
The HTML code:
<html>
<head>
<title>Sphere and torus</title>
<script src="../threeLib/build/three.min.js"></script>
<script src="sphereandring.js">
</script>
</head>
<body onload="init()">
<center>
<canvas width="1000" height="600" id="MyCanvasArea" style="border:2px solid blue;" tabindex="0">
Canvas tag is not supported by your browser
</canvas>
<h1>3D rotating sphere and doughnut(torus) 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 sphere1,torus1;
var texture;
var rotX=0;
var rotY=0;
function init() {
can=document.getElementById("MyCanvasArea");
renderer = new...
