hw4-1

by Millieyan

HTML

<div id="title">CG04<br> 上下左右可控制方形位子AS可轉動方形</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/96/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.min.js"></script>
<script src="https://jyunming-chen.github.io/tutsplus/js/KeyboardState.js"></script>

CSS

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

body {
  overflow: hidden;
}

JavaScript

var camera, scene, renderer, clock, stats;
var circle, rectangle;
var ball = [];
var keyboard = new KeyboardState();
var mouse = new THREE.Vector2();

init();
animate();
document.addEventListener('mousedown', onDocumentMouseDown, false);

function init() {
  scene = new THREE.Scene();
  clock = new THREE.Clock();
  raycaster = new THREE.Raycaster();

  let long = window.innerWidth / window.innerHeight;

  stats = new Stats();
  stats.domElement.style.position = 'absolute';
  stats.domElement.style.top = '0px';
  stats.domElement.style.zIndex = 100;
  document.body.appendChild(stats.domElement);

  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  camera = new THREE.OrthographicCamera(-150 * long, 150 * long, 150, -150, 1, 50);
  camera.position.z = 30;


  plane = new THREE.Mesh(new THREE.PlaneGeometry(200, 200), new THREE.MeshBasicMaterial({
    transparent: true,
    opacity: 0.0,
    visible: true,
     color: 0x000000
  }));
  ball = [plane];

  circle = new THREE.Mesh(new THREE.CircleGeometry(10, 30), new THREE.MeshBasicMaterial({
    color: 0x000000
  }));
  rectangle = new THREE.Mesh(new THREE.PlaneGeometry(200, 200), new THREE.MeshBasicMaterial({
    color: 0x000000
  }));
  rectangle.position.z = -1;
  scene.add(plane, circle, rectangle);
}

function animate() {
  stats.update();
  keyboard.update();
  if (keyboard.pressed("up")) {
    rectangle.position.y += 1;
  }
  if (keyboard.pressed("down")) {
    rectangle.position.y -= 1;
  }
  if (keyboard.pressed("left")) {
    rectangle.position.x -= 1;
  }
  if (keyboard.pressed("right")) {
    rectangle.position.x += 1;
  }
  if (keyboard.pressed("A")) {
    rectangle.rotation.z -= 0.01;
  }
  if (keyboard.pressed("S")) {
    rectangle.rotation.z += 0.01;
  }
  if (check_Intersect()) {
    circle.material.color.copy(new THREE.Color(0xff0000));
  } //方格內
  else {
    circle.material.color.copy(new...