Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://getfirebug.com/firebug-lite-
debug.js"></script>
<meta name="description" content="CS4406 Computer Graphics - Exercise #1" />
<meta charset="utf-8" />
<title>Sample Three.js</title>
<style>
#container {
background: #000000;
width: 100%;
height: 100%;
}
</style>
<meta charset=utf-8 />
<title>CS4406 Computer Graphics - Exercise #1</title>
<style id="jsbin-css">
</style>
</head>
<body>
<div id="container">
</div>
</body>
<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> 
<script src="http://uopeopleweb.com/js/dat.gui.min.js"></script>
<script src="https://threejs.org/build/three.js"></script>
<script 
src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitCont
rols.js"></script>
<script src="http://uopeopleweb.com/js/math.js"></script>
<script src="http://uopeopleweb.com/js/Detector.js"></script>
<script type="text/javascript">
</script>
</html>
 
var WIDTH = 500, HEIGHT = 500;
// set some camera attributes
var VIEW_ANGLE = 45, ASPECT = WIDTH / HEIGHT, NEAR = 1, FAR = 1000;
// get the DOM element to attach to
var $container = $('#container');
// create a WebGL renderer, camera, and a scene
var renderer = new THREE.WebGLRenderer();
var scene = new THREE.Scene();
var clock = new THREE.Clock();
var camera = new THREE.PerspectiveCamera(VIEW_ANGLE,ASPECT,NEAR,FAR);
// the camera starts at 0,0,0 so pull it back
camera.position.z = 200; 
// add the camera to the scene
scene.add(camera);
// set up the camera controls. Please keep in mind that what this does is move
// because the entire scene is moving the position of the camera and lights in 
// the scene doesn't change so the lighting on the surface of the object(s) 
var cameraControls = new THREE.OrbitControls(camera, renderer.domElement);
cameraControls.addEventListener( 'mousemove', renderer );
cameraControls.autoRotate = true;
// start the renderer
renderer.setSize(WIDTH, HEIGHT);
// attach the render-supplied DOM element
$container.append(renderer.domElement);
// 
// Following this is where you must place your own custom code to complete the
// 
// create a point light
var areaLight = new THREE.RectAreaLight( 0xffffff, 1);
// add to the scene
scene.add(areaLight);
// create the sphere's material
var sphereMaterial = new THREE.MeshNormalMaterial( {color: 0xffffff });
// set up the sphere vars
var radius = 50, segments = 32, rings = 32;
// create a new mesh with sphere geometry -
// we will cover the sphereMaterial next!
var sphere = new THREE.Mesh(
new THREE.SphereGeometry(radius, segments, rings),
sphereMaterial);
function animate() {
requestAnimationFrame(animate)
; render();
}
function render() {
cameraControls.update();
renderer.render(scene,
camera);
}
animate();(ani
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
locadococopro
0viewers