demo/demo10.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>My first three.js app</title>
		<style>
			body { margin: 0; }
      #info {
      	position: absolute;
      	top: 10px;
      	width: 100%;
      	text-align: center;
      	z-index: 100;
      	display:block;
      }
		</style>
</head>
<body>
   <canvas id="mainCanvas" width="400px" height="300px"></canvas>
</body>
<script src="https://cdn.bootcss.com/three.js/91/three.js"></script>
<script>
function init(){
  var renderer = new THREE.WebGLRenderer({
    canvas: document.getElementById('mainCanvas')
  });
    renderer.setClearColor(0x000000);
    var scene = new THREE.Scene();

    // camera
    var camera = new THREE.OrthographicCamera(-5, 5, 3.75, -3.75, 0.1, 100);
    camera.position.set(25, 25, 25);
    camera.lookAt(new THREE.Vector3(0, 0, 0));
    scene.add(camera);

    // light
    var light = new THREE.PointLight(0xffffff, 1, 200);
    light.position.set(10, 15, 25);
    scene.add(light);

    var material = new THREE.MeshPhongMaterial({
        color: 0xffffff,
        specular: 0xffff00,
        shininess: 1000
    });

    var sphere = new THREE.Mesh(new THREE.SphereGeometry(3, 20, 8), material);
    scene.add(sphere);

    renderer.render(scene, camera);
}
init();
</script>
</html>