HW5 (試作)

by j91157j91157

HTML

<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>

<div id="info">HW5 破壞死光
  <br>
  <button id="toggle" style="width:20%">Toggle</button>
</div>

CSS

body {
  overflow: hidden
}

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

JavaScript

class Button {
  constructor(color, name) {
    this.on = false;
    this.hsl = color.getHSL();
    this.obj = this.makeButton(name);
  }

  get isOn() {
    return this.on;
  }

  toggle() {
    this.on = !this.on;
    this.update();
   }
  

  update() {
    if (this.on) {
      this.obj.scale.set (1,0.5,1);
      this.obj.children[0].material.color.setHSL 
        (this.hsl.h, 0, 1);
    } else {
    	this.obj.scale.set(1,1,1);
    	this.obj.children[0].material.color.setHSL 
         (this.hsl.h, this.hsl.s, this.hsl.l);
    }
  }
  

  makeButton(name) {
    let mesh = new THREE.Mesh(new THREE.CylinderGeometry(0.5, 0.5, 0.5, 32),
      new THREE.MeshBasicMaterial());
    let button = new THREE.Object3D();
    button.add(mesh);
    mesh.material.color.setHSL (this.hsl.h, this.hsl.s, this.hsl.l)
    mesh.position.y = 0.5;
    button.name = name;  // a string
    return button;
  }

}

var renderer, camera, controls, scene;
var Table, PenHolder, RemoteControl;
var spotLight;
var toggle = true;
var pickables = [];
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
var button, button2;


init();
animate();

$("#toggle").click(function() {
	toggle = ! toggle;
});


function init() {

  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor(0x404040);
  document.body.appendChild(renderer.domElement);

  camera = new THREE.PerspectiveCamera(80, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.set(100, 100, 100); // important

  controls = new THREE.OrbitControls(camera, renderer.domElement);

  scene = new THREE.Scene();

  let axes = new THREE.AxisHelper(100);
  //scene.add(axes);

  let gridXZ = new THREE.GridHelper(200, 20, 'red', 'white');
  scene.add(gridXZ);
  
  
  // lighting
  var light = new THREE.AmbientLight(0x505050); // soft white light
  scene.add(light);


  spotLight = new THREE.SpotLight(0xffffff);
 ...