<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
Keyboard Shortcuts
Shortcut | Action |
---|---|
ctrl + [num] | Toggle nth panel |
ctrl + 0 | Close focused panel |
ctrl + enter | Re-render output. If console visible: run JS in console |
Ctrl + l | Clear the console |
ctrl + / | Toggle comment on selected lines |
ctrl + ] | Indents selected lines |
ctrl + [ | Unindents selected lines |
tab | Code complete & Emmet expand |
ctrl + shift + L | Beautify code in active panel |
ctrl + s | Save & lock current Bin from further changes |
ctrl + shift + s | Open the share options |
ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts |
JS Bin URLs
URL | Action |
---|---|
/ | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
/edit | Edit the current bin |
/watch | Follow a Code Casting session |
/embed | Create an embeddable version of the bin |
/latest | Load the very latest bin (/latest goes in place of the revision) |
/[username]/last | View the last edited bin for this user |
/[username]/last/edit | Edit the last edited bin for this user |
/[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
/quiet | Remove analytics and edit button from rendered output |
.js | Load only the JavaScript for a bin |
.css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. |