pbogden/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Playing around with three.js

  
## button.js
function button() {

var buttonColor = "#428bca";

var width= 110, height=45,       // rect dimensions
    fontSize = 1.38*height/3,    // font fills rect if fontSize  = 1.38*rectHeight
    x0 = 75, y0 = 75,
    x0Text = x0 + width/2, y0Text = y0 + 0.66*height,
    text = "Start";

// "buttonDispatch" is global
buttonDispatch = d3.dispatch('buttonStart');
buttonDispatch.on("buttonStart", function() { console.log('button heard the buttonStart'); });

// "svg" is global
svg.append("rect")                 // button background
    .attr("id","buttonBackground")
    .style("pointer-events", "none")
    .attr("width", width + "px")
    .attr("height", height + "px")
    .style("fill", buttonColor)
    .attr("x", x0)
    .attr("y", y0)
    .attr("ry", height/10);

var text = svg.append("text")      // button text
    .attr("id","buttonText")
    .attr("x", x0Text)
    .attr("y", y0Text)
    .style("text-anchor", "middle")
    .style("fill", "#ffffff")
    .style("stroke", "none")
    .style("pointer-events", "none")
    .style("font-family", "'Helvetica Neue', Helvetica, Arial, sans-serif")
    .style("font-size", fontSize + "px")
    .text(text);

svg.append("rect")  // transparent overlay to catch mouse events
    .attr("id","myButton")
    .attr("width", width + "px")
    .attr("height", height + "px")
    .style("opacity", 0)
    .style("pointer-events", "all")
    .attr("x", x0)
    .attr("y", y0)
    .attr("ry", height/2)
    .on("click", clickedButton)

  function clickedButton() {

      buttonDispatch.buttonStart();

      d3.select("#buttonBackground")
          .style("fill-opacity", 0)
        .transition().ease("linear").delay(1000).duration(2000)
          .style("fill", buttonColor);

      d3.select("#buttonText")
          .style("fill", '#333')
        .transition().ease("linear").duration(1000)
          .style("fill","#fff")
          .text("Again")
        .transition()
          .call(function(){ d3.select("#buttonBackground").style("fill-opacity",1) })
  };
};

## index.html
<!doctype html>
<meta charset='utf-8'>
<title>three</title>
<style>
  body { margin: 0; }
  canvas { width: 100%; height: 100% }
  svg { position: absolute; top: 0; left: 0; }
  text {
    -webkit-user-select: none; /* webkit (safari, chrome) browsers */
    -moz-user-select: none; /* mozilla browsers */
    -khtml-user-select: none; /* webkit (konqueror) browsers */
    -ms-user-select: none; /* IE10+ */
  }
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.js"></script>
<script src="button.js"></script>
<body>
<script>
var camera, scene, renderer,
    geometry, material, mesh;

var dots = [];

var buttonDispatch;

var svg = d3.select('body').append('svg')
    .attr('width', 200)
    .attr('height', 200);

init();
animate();

button();
buttonDispatch.on('buttonStart', initDot)

function initDot() {

    // Create a green dot
    var geometry = new THREE.BoxGeometry(10, 10, 10);
    var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    var dot = new THREE.Mesh(geometry, material);

    // Add it to the scene
    scene.add(dot);
    var theta = 2 * Math.PI * Math.random();
    dots.push({ dot: dot, dx: Math.sin(theta), dy: Math.cos(theta) }); // update dots in animate()
}

function init() {

     // To display anything, you need 3 things: (1) Scene, (2) Camera, (3) Renderer

    // (1) Scene
    scene = new THREE.Scene();

    // (2) Camera -- arguments: field of view, aspect ratio, clipping plane (near & far)
    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.z = 1000;  // Move camera away from (0, 0, 0), default location for scene.add(mesh)

    // (3) Renderer -- WebGL parameters: size (x & y)
    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);


     // The cube needs three things: (1) Geometry, (2) Material, (3) Mesh

    // (1) Geometry -- BoxGeometry contains all the points (vertices) and fill (faces) of the cube
    geometry = new THREE.BoxGeometry(200, 200, 200);

    // (2) Material -- Add color to the box
    material = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true });

    // (3) Mesh -- Apply the material to the geometry, then add it to the scene
    mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

    // Add Renderer to the DOM as a <canvas> element
    document.body.appendChild(renderer.domElement);
}

function animate() {

    // Start a loop that renders the scene 60 times/second
    requestAnimationFrame(animate);

    mesh.rotation.x = 0;
    mesh.rotation.y += 0.02;

    dots.forEach(function (dot, i) {
        var delta = 10;
        dot.dot.position.x += delta * dot.dx;
        dot.dot.position.y += delta * dot.dy;
    });

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

## thumbnail.png

      
    Raw
  

              thumbnail.png
	function button() {

	var buttonColor = "#428bca";

	var width= 110, height=45, // rect dimensions
	fontSize = 1.38height/3, // font fills rect if fontSize = 1.38rectHeight
	x0 = 75, y0 = 75,
	x0Text = x0 + width/2, y0Text = y0 + 0.66*height,
	text = "Start";

	// "buttonDispatch" is global
	buttonDispatch = d3.dispatch('buttonStart');
	buttonDispatch.on("buttonStart", function() { console.log('button heard the buttonStart'); });

	// "svg" is global
	svg.append("rect") // button background
	.attr("id","buttonBackground")
	.style("pointer-events", "none")
	.attr("width", width + "px")
	.attr("height", height + "px")
	.style("fill", buttonColor)
	.attr("x", x0)
	.attr("y", y0)
	.attr("ry", height/10);

	var text = svg.append("text") // button text
	.attr("id","buttonText")
	.attr("x", x0Text)
	.attr("y", y0Text)
	.style("text-anchor", "middle")
	.style("fill", "#ffffff")
	.style("stroke", "none")
	.style("pointer-events", "none")
	.style("font-family", "'Helvetica Neue', Helvetica, Arial, sans-serif")
	.style("font-size", fontSize + "px")
	.text(text);

	svg.append("rect") // transparent overlay to catch mouse events
	.attr("id","myButton")
	.attr("width", width + "px")
	.attr("height", height + "px")
	.style("opacity", 0)
	.style("pointer-events", "all")
	.attr("x", x0)
	.attr("y", y0)
	.attr("ry", height/2)
	.on("click", clickedButton)

	function clickedButton() {

	buttonDispatch.buttonStart();

	d3.select("#buttonBackground")
	.style("fill-opacity", 0)
	.transition().ease("linear").delay(1000).duration(2000)
	.style("fill", buttonColor);

	d3.select("#buttonText")
	.style("fill", '#333')
	.transition().ease("linear").duration(1000)
	.style("fill","#fff")
	.text("Again")
	.transition()
	.call(function(){ d3.select("#buttonBackground").style("fill-opacity",1) })
	};
	};
	<!doctype html>
	<meta charset='utf-8'>
	<title>three</title>
	<style>
	body { margin: 0; }
	canvas { width: 100%; height: 100% }
	svg { position: absolute; top: 0; left: 0; }
	text {
	-webkit-user-select: none; /* webkit (safari, chrome) browsers */
	-moz-user-select: none; /* mozilla browsers */
	-khtml-user-select: none; /* webkit (konqueror) browsers */
	-ms-user-select: none; /* IE10+ */
	}
	</style>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.js"></script>
	<script src="button.js"></script>
	<body>
	<script>
	var camera, scene, renderer,
	geometry, material, mesh;

	var dots = [];

	var buttonDispatch;

	var svg = d3.select('body').append('svg')
	.attr('width', 200)
	.attr('height', 200);

	init();
	animate();

	button();
	buttonDispatch.on('buttonStart', initDot)

	function initDot() {

	// Create a green dot
	var geometry = new THREE.BoxGeometry(10, 10, 10);
	var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
	var dot = new THREE.Mesh(geometry, material);

	// Add it to the scene
	scene.add(dot);
	var theta = 2 * Math.PI * Math.random();
	dots.push({ dot: dot, dx: Math.sin(theta), dy: Math.cos(theta) }); // update dots in animate()
	}

	function init() {

	// To display anything, you need 3 things: (1) Scene, (2) Camera, (3) Renderer

	// (1) Scene
	scene = new THREE.Scene();

	// (2) Camera -- arguments: field of view, aspect ratio, clipping plane (near & far)
	camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
	camera.position.z = 1000; // Move camera away from (0, 0, 0), default location for scene.add(mesh)

	// (3) Renderer -- WebGL parameters: size (x & y)
	renderer = new THREE.WebGLRenderer();
	renderer.setSize(window.innerWidth, window.innerHeight);


	// The cube needs three things: (1) Geometry, (2) Material, (3) Mesh

	// (1) Geometry -- BoxGeometry contains all the points (vertices) and fill (faces) of the cube
	geometry = new THREE.BoxGeometry(200, 200, 200);

	// (2) Material -- Add color to the box
	material = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true });

	// (3) Mesh -- Apply the material to the geometry, then add it to the scene
	mesh = new THREE.Mesh(geometry, material);
	scene.add(mesh);

	// Add Renderer to the DOM as a <canvas> element
	document.body.appendChild(renderer.domElement);
	}

	function animate() {

	// Start a loop that renders the scene 60 times/second
	requestAnimationFrame(animate);

	mesh.rotation.x = 0;
	mesh.rotation.y += 0.02;

	dots.forEach(function (dot, i) {
	var delta = 10;
	dot.dot.position.x += delta * dot.dx;
	dot.dot.position.y += delta * dot.dy;
	});

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