HW

buttons

by joe chan

HTML

<h1 style="text-align:center"> Homework 4  </h1>
<hr>
<div id="container" style="float:left; background:pink; width:60vw; height:60vw"></div>
<div id="gui" style="float:right; background:green; width:35vw; height:60vw">
  <button id='clear' style="width:45%">Clear</button>
  <button id='save' style="width:45%">Save</button>
  <button id='restore' style="width:45%">Restore</button>
  <br> Type
  <br>
  <input type="radio" id='s1' name='geom' value='TorusKnot'> TorusKnot
  <br>
  <input type="radio" id='s2' name='geom' value='sphere'> Sphere
  <br>
  <br> Material
  <br>
  <input type="radio" id='m1' name='mat' value='Basic'>Basic
  <br>
  <input type="radio" id='m2' name='mat' value='Normal'>Normal
  <br>
  <br> Color (for Basic)
  <br>
  <input type="radio" id='c1' name='color' value='skyblue'>skyblue
  <br>
  <input type="radio" id='c2' name='color' value='pink'>pink
  <br>
 
  <br>


</div>

<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>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

CSS

#info {
  position: absolute;
  top: 2%;
  width: 100%;
  padding: 10px;
  text-align: center;
  color: #ffff00
}

body {
  overflow: hidden;
}

JavaScript

var scene, renderer, camera;
var controls;
var meshl, angle = 0,
  turn = false;
var pickplane;
var mesh = [];
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();

init();
animate();

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

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

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

  var states = [];
  mesh.forEach(function(mesh) {
    states.push(mesh.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);
    buildmesh(new THREE.Vector3(state.pos[0], 0, state.pos[1]));
  });
});


function init() {
  var width = $('#container').innerWidth();
  var height = $('#container').innerHeight();

  scene = new THREE.Scene();
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(width, height);
  renderer.setClearColor(0x888888);
  $('#container').append(renderer.domElement);

  var gridXZ = new THREE.GridHelper(200, 20, 'red', 'white');
  scene.add(gridXZ);

  camera = new THREE.PerspectiveCamera(50, width / height, 1, 1000);
  camera.position.set(0,125,250) ;

  // var geometry = new THREE.BoxGeometry(100, 20, 20);
  // var material = new THREE.MeshBasicMaterial();

  // mesh = new THREE.Mesh(geometry, material);
  //scene.add(mesh);
  /////////////////////////////////
  var cyl_geom = new THREE.RingGeometry(2, 5, 32);
  var cyl_mat = new THREE.MeshBasicMaterial({
    color: 0xff3333,
  });
  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 THREE.MeshBasicMaterial());
  pickplane.rotation.x = -Math.PI / 2;
  scene.add(pickplane);
  pickplane.material.visible = false;
  
  controls = new THREE.OrbitControls(camera, renderer.domElement);
  
 ...