HW4 demo

formatting

by joe chan

HTML

<h1 style="text-align:center"> Homework 4 Demo </h1>
<hr>
<div id="container" style="float:left; margin:3px; width:60vw; height:60vw">
</div>

<div style="float:left; margin-left: 10px; width:32vw;">

  <div>
    Sphere radius:
    <input id="radius" type="range" min=3 max=30 value=5>
    <span id='radiusPrint'>
</span>
    <br>
  </div>
  <br>
  <div style='background-color:pink'>
    Color Selector:
    <br>
    <input type=radio name='c' value='red'>red
    <input type=radio name='c' value='blue'>blue
    <input type=radio name='c' value='green'>green
  </div>
  <br>
  <button id='clear' style="width:45%">Clear</button>
  <button id='save' style="width:45%">Save</button>
  <button id='restore' style="width:45%">Restore</button>
</div>

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js">


</script>

JavaScript

$('#radius').change(function() {
  $('#radiusPrint').text($(this).val());
});

var camera, scene, renderer, controls;
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
var pickplane;
var cyl;
var spheres = [];

init();
animate();

$('#clear').click(function() {

  spheres.forEach(function(sphere) {
    scene.remove(sphere);
  });
  spheres = [];

});

$('#save').click(function() {

  var states = [];
  spheres.forEach(function(sphere) {
    states.push(sphere.name);
  });

  localStorage.setItem('stateStr', JSON.stringify(states));

});

$('#restore').click(function() {

  var states = JSON.parse(localStorage.getItem('stateStr'));
  states.forEach(function(stateStr) {
    console.log(stateStr);
    var state = JSON.parse(stateStr);
    buildSphere(state.rad, new THREE.Vector3(state.pos[0], 0, state.pos[1]));
  });

});

function buildSphere(rad, pos) {

  var sphere = new THREE.Mesh(new THREE.SphereGeometry(rad, 20, 20), new THREE.MeshNormalMaterial());

  scene.add(sphere);
  var prop = {
    rad: rad,
    pos: [pos.x, pos.z]
  };
  console.log(prop);
  sphere.name = JSON.stringify(prop);
  console.log(sphere.name);

  spheres.push(sphere);
  sphere.position.copy(pos);

}

function init() {

  var ww = $("#container").innerWidth();
  var hh = $("#container").innerHeight();
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(ww, hh);
  renderer.setClearColor(0x888888);
  $("#container").append(renderer.domElement);

  ////////////////////////////////////////////////

  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(50, ww / hh, 1, 1000);
  camera.position.z = 500;
  scene.add(camera);

  var cyl_geom = new THREE.RingGeometry(5, 10, 32);
  var cyl_mat = new THREE.MeshBasicMaterial({
    color: 0xff1234,
  });
  cyl = new THREE.Mesh(cyl_geom, cyl_mat);
  cyl.rotation.x = -Math.PI/2;
  cyl.position.set(-20, 0, 20);
  scene.add(cyl);

  pickplane = new THREE.Mesh(new THREE.PlaneGeometry(200, 200),
    new...