web3D_hw3

by otorineko6790

HTML

<h1 style="font-size:2em; text-align:center; margin:15px">Zelda Mask</h1>

<hr>
<div id="tools">
  <a href="javascript:toggleCamera()">change cam</a>
  <button id="tView" style="width:10%">Toggle Light</button>
  <input type=range min=0 max=1 step=0.1 id='intensity'> intensity
  <select id="paintView" onclick="paintView()">
	<option value="sel">選擇畫作</option>
	<option value="p1">德庫矮人</option>
    <option value="p2">薩爾達傳說</option>
	<option value="p3">快樂的面具商人</option>
	<option value="p4">索拉面具</option>
	<option value="p5">月亮</option>
	<option value="p6">穆修拉的面具</option>
  </select>
</div>

<div id="container">
  <!--canvas id='mycanvas'></canvas-->

</div>
<img src="https://i.imgur.com/VFNHRLw.png" width="500" height="187" alt="guaid" usemap="#chanCam">

<map name="chanCam">
  <area shape="circle" coords="432, 162, 17" alt="cam1" href="javascript: chanCam('cam1');">
  <area shape="circle" coords="256, 26, 17" alt="cam2" href="javascript: chanCam('cam2');">
  <area shape="circle" coords="80, 161, 17" alt="cam3" href="javascript: chanCam('cam3');">
  <area shape="circle" coords="466, 31, 24" alt="nocam" href="javascript: chanCam('nocam');">
</map>

<p>paint</p>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quam lectus, porta eget tincidunt eget, auctor eget lorem. Cras sed est eu tellus consequat semper a ac dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat
  luctus augue sed pellentesque. In laoreet tincidunt lacinia. In pellentesque egestas enim ut auctor. Mauris et urna at est varius faucibus quis at sapien. Nam hendrerit velit at bibendum fringilla. Sed ut dignissim dui, eget sagittis est. Pellentesque
  varius nibh ut nunc condimentum viverra. Fusce erat felis, laoreet vitae ex sit amet, venenatis lobortis nibh. Suspendisse lectus massa, malesuada vel ullamcorper sed, iaculis eu dolor. Donec accumsan diam non dolor aliquet, a cursus arcu hendrerit.
  Quisque accumsan sed quam at dictum.
</p>
<br>
<p>
 ...

CSS

#container {
  width: 100%;
  height: 60vw;
  float: left;
  background-color: gray;
  margin: 10px;
  text-align: center;
}

#tools {
	text-align: center;
}

#tView {
	margin: 10px;
}

p {
  margin: 10px;
  text-align: justify;
}

JavaScript

var scene, renderer, camera;
var mouse = new THREE.Vector2();
var raycaster = new THREE.Raycaster();
var pickables = [];

var useCamera1 = false;
var lightsOff = false;
var camera1, mainView;
var lights = [],  paints = [],  cams = [],  walls = [];

class Light {
  constructor(target) {
    this.lamp = new THREE.Object3D();
    this.loader = new THREE.TextureLoader();
    this.loader.crossOrigin = ''
    this.texture = this.loader.load("https://i.imgur.com/qwHC0qr.png");

    this.lampbody = new THREE.Mesh(new THREE.CylinderGeometry(10, 10, 30), new THREE.MeshPhongMaterial({
      map: this.texture
    }));
    this.lamp.add(this.lampbody);
    //this.lamp.rotation.y = Math.PI/2;
    this.lampbody.rotation.x = Math.PI / 2;

    this.spotLight = new THREE.SpotLight(0xffffff, 1, 500);
    this.lamp.add(this.spotLight);
    this.spotLight.position.copy(this.lamp.position);
    this.spotLight.angle = 0.5;
    this.spotLight.penumbra = 0.3;
    //this.spotLight.target = target;

    scene.add(this.lamp);
  }

}

class Paint {
  constructor(name, h, w, url) {
    this.loader = new THREE.TextureLoader();
    this.loader.crossOrigin = ''
    this.texture = this.loader.load(url);
    this.paint = new THREE.Mesh(new THREE.PlaneGeometry(h, w), new THREE.MeshPhongMaterial({
      map: this.texture
    }));
    scene.add(this.paint);
	this.paint.name = name;
	pickables.push(this.paint);
  }

}

class Camera {
  constructor(point, x, y, z) {
    this.cameraObj = new THREE.Object3D();
    //this.cameraObj.add(new THREE.AxisHelper(40));
    this.cameraBody = new THREE.Mesh(new THREE.BoxGeometry(20, 12, 5), new THREE.MeshNormalMaterial());
    this.lens = new THREE.Mesh(new THREE.CylinderGeometry(5, 5, 10), new THREE.MeshNormalMaterial());
    this.lens.position.z = 5;
    this.lens.rotation.x = Math.PI / 2;
    this.cameraObj.add(this.cameraBody, this.lens);
	
	scene.add(this.cameraObj);
	this.cameraObj.position.set(x, y, z);
	this.cameraObj.lookAt(point);

	this.view = new...