Skip to content

Instantly share code, notes, and snippets.

@paprikka
Created August 2, 2013 15:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save paprikka/6140987 to your computer and use it in GitHub Desktop.
Save paprikka/6140987 to your computer and use it in GitHub Desktop.
App = ->
$debug = $ '#debug'
log = (t)-> $debug.html t
W = 400
H = 300
VIEW_ANGLE = 45
ASPECT = W / H
NEAR = .1
FAR = 10000
$viewport = $ '#viewport'
renderer = new THREE.CanvasRenderer
camera = new THREE.PerspectiveCamera VIEW_ANGLE, ASPECT, NEAR, FAR
scene = new THREE.Scene
scene.add camera
camera.position.z = 300
renderer.setSize W, H
$viewport.append renderer.domElement
log 'ready…'
sphereMaterial = new THREE.MeshLambertMaterial color: 0xFF8000
radius = 50
segments = 16
rings = 16
geom = new THREE.SphereGeometry radius, segments, rings
sphere = new THREE.Mesh geom, sphereMaterial
scene.add sphere
pointLight = new THREE.PointLight 0xFFFFFF
pointLight.position.x = 10
pointLight.position.x = 50
pointLight.position.z = 130
scene.add pointLight
renderer.render scene, camera
$ App
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r58/three.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="viewport" class="viewport"></div>
<div id='debug'>Loading...</div>
</body>
</html>
* {
box-sizing: border-box;
}
html, body, .viewport{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.viewport{
background-color: #1f1f1f;
}
#debug{
color: #fafafa;
font-family: consolas;
position: absolute;
width: 100%;
left: 0;
bottom: 0;
background-color: rgba(255,255,255,.2);
padding: 10px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment