ball test(HUD)

by 蔡 育曄

HTML

<div id='ratio' style='position:absolute;top:15vh;text-align:center;color:yellow;width:100%'>center text
</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://jyunming-chen.github.io/tutsplus/js/KeyboardState.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

CSS

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

JavaScript

class Button {
	constructor (size, x, y){
		this.size = size;
		this.centerX = x;
		this.centerY = y;
	}
	d1To (v) { // 1-norm
		return Math.abs (v[0]-this.centerX) + Math.abs(v[1]-this.centerY);
	}
	d2To (v) { // 2-norm
		return Math.sqrt ( (v[0]-this.centerX)*(v[0]-this.centerX) 
				+ (v[1]-this.centerY)*(v[1]-this.centerY) );
	}
	dInfTo (v) { // inf-norm
		return Math.max( Math.abs (v[0]-this.centerX), Math.abs(v[1]-this.centerY) )
	}
}

var camera, scene, sceneHUD, cameraHUD;
var renderer, controls;
var loader = new THREE.TextureLoader();
var keyboard = new KeyboardState();
var obj1,obj2,cube,target;
var ball;

var whRatio, halfW, halfH;
var button1;
var cubeSpin = false;
init();
animate();

function init() {

	renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor(0x888888);
  //renderer.setClearColor(new THREE.Color('lightgrey'), 0)
 // renderer.domElement.style.position = 'absolute'
	//renderer.domElement.style.top = '0px'
	//renderer.domElement.style.left = '0px'
  document.body.appendChild(renderer.domElement);
  
	// width/height ratio
	whRatio = window.innerWidth/window.innerHeight;  
  // for multi-pass rendering
	renderer.autoClear = false;
  
	scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.z = 500;
  scene.add(camera);
  
  // eye-coordinate bounds
	halfH = 10;
	halfW = halfH * whRatio;
  
  sceneHUD  = new THREE.Scene();
  cameraHUD = new THREE.OrthographicCamera (-halfW,halfW, halfH,-halfH, -10,10);
  
  var buttonSize = halfH/3;
	button = new THREE.Mesh (new THREE.PlaneGeometry(buttonSize, buttonSize), 
			new THREE.MeshBasicMaterial({color:"yellow", transparent:true, opacity:0.8}));	
	button1 = new Button (buttonSize, 0, -halfH/2);
	button.position.set (button1.centerX, button1.centerY, 0);
	sceneHUD.add (button);

  var gridXZ = new THREE.GridHelper(400, 20, 'red', 'white');
 ...