hw5

by 蔡 育曄

HTML

<div id="info">HW5</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/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>
<script src="https://rawgit.com/mrdoob/three.js/master/examples/js/loaders/MTLLoader.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/master/examples/js/loaders/OBJLoader.js"></script>

CSS

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

body {
  overflow: hidden;
}

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.BoxGeometry(3, 2, 2),
      new THREE.MeshLambertMaterial());
    mesh.castShadow = true;
    mesh.receiveShadow = true;
    let button = new THREE.Object3D();
    button.add(mesh);
    mesh.material.color.setHSL (this.hsl.h, this.hsl.s, this.hsl.l)
    mesh.position.y = 1;
    button.name = name;  // a string
    return button;
  }

}
var scene, renderer, camera;
var controls, button, button2;
var loader = new THREE.TextureLoader();
var raycaster = new THREE.Raycaster();
var pickables = [];
var isOn, isOn2,spotLight, lampLight;
var mouse = new THREE.Vector2()
init();
animate();

function buildGrip() {
	var grip = new THREE.Object3D();
  loader.setCrossOrigin ('');  
  let griptexture = loader.load( "https://i.imgur.com/ZYkgCtb.jpg");
  var gripMaterial = new THREE.MeshLambertMaterial({map: griptexture});
  var gripMesh = new THREE.Mesh(new THREE.BoxGeometry(8,1,1),gripMaterial);
  gripMesh.position.z = 1.25;
  grip.add(gripMesh);
  var gripMesh2 = new THREE.Mesh(new THREE.BoxGeometry(1,1,1.5),gripMaterial);
  gripMesh2.position.x = 3.5;
  grip.add(gripMesh2);
  var gripMesh3 = gripMesh2.clone();
  gripMesh3.position.x = -3.5;
  grip.add(gripMesh3);
  return grip;
}

function buildHalfPenHolder() {

  loader.setCrossOrigin (''); 
  let texture = loader.load( "https://i.imgur.com/rQxO5m9.jpg");
  var material = new THREE.MeshLambertMaterial({map: texture});
  var...