pbogden/README.md

## README.md

      
    Raw
  

              README.md
            
          
    The missing gist for this nice tutorial.

  
## index.html
<!doctype html>
<meta charset="utf-8" />
<title>three.js sample</title>
<style>
  #container {
    background: #000;
    width: 400px;
    height: 300px;
  }
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.js"></script>
<script>

// set the scene size
var WIDTH = 400,
    HEIGHT = 300;

// set some camera attributes
var VIEW_ANGLE = 45,
    ASPECT = WIDTH / HEIGHT,
    NEAR = 0.1,
    FAR = 10000;

// get the DOM element to attach to
var container = d3.select("body").append("div").attr("id", "container");

// create a WebGL renderer, camera and scene
var renderer = new THREE.WebGLRenderer();
var camera = new THREE.PerspectiveCamera(  VIEW_ANGLE, ASPECT, NEAR, FAR  );
var scene = new THREE.Scene();

// the camera starts at 0,0,0 so pull it back
camera.position.z = 300;

// start the renderer
renderer.setSize(WIDTH, HEIGHT);

// attach the render-supplied DOM element
container.append(function() { return renderer.domElement; });

// create the sphere's material
var sphereMaterial = new THREE.MeshLambertMaterial( { color: 0xCC0000 });

// set up the sphere vars
var radius = 50, segments = 16, rings = 16;

// create a new mesh with sphere geometry and material
var sphere = new THREE.Mesh(
     new THREE.SphereGeometry(radius, segments, rings),
     sphereMaterial);

// add the sphere to the scene
scene.add(sphere);

// and the camera
scene.add(camera);

// create a point light
var pointLight = new THREE.PointLight( 0xFFFFFF );

// set its position
pointLight.position.x = 10;
pointLight.position.y = 50;
pointLight.position.z = 130;

// add to the scene
scene.add(pointLight);

// draw!
renderer.render(scene, camera);
</script>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!doctype html>
	<meta charset="utf-8" />
	<title>three.js sample</title>
	<style>
	#container {
	background: #000;
	width: 400px;
	height: 300px;
	}
	</style>
	</head>
	<body>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.js"></script>
	<script>

	// set the scene size
	var WIDTH = 400,
	HEIGHT = 300;

	// set some camera attributes
	var VIEW_ANGLE = 45,
	ASPECT = WIDTH / HEIGHT,
	NEAR = 0.1,
	FAR = 10000;

	// get the DOM element to attach to
	var container = d3.select("body").append("div").attr("id", "container");

	// create a WebGL renderer, camera and scene
	var renderer = new THREE.WebGLRenderer();
	var camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR );
	var scene = new THREE.Scene();

	// the camera starts at 0,0,0 so pull it back
	camera.position.z = 300;

	// start the renderer
	renderer.setSize(WIDTH, HEIGHT);

	// attach the render-supplied DOM element
	container.append(function() { return renderer.domElement; });

	// create the sphere's material
	var sphereMaterial = new THREE.MeshLambertMaterial( { color: 0xCC0000 });

	// set up the sphere vars
	var radius = 50, segments = 16, rings = 16;

	// create a new mesh with sphere geometry and material
	var sphere = new THREE.Mesh(
	new THREE.SphereGeometry(radius, segments, rings),
	sphereMaterial);

	// add the sphere to the scene
	scene.add(sphere);

	// and the camera
	scene.add(camera);

	// create a point light
	var pointLight = new THREE.PointLight( 0xFFFFFF );

	// set its position
	pointLight.position.x = 10;
	pointLight.position.y = 50;
	pointLight.position.z = 130;

	// add to the scene
	scene.add(pointLight);

	// draw!
	renderer.render(scene, camera);
	</script>