level designer

seek, arrival

by RGMGx

HTML

<div id="info">Level Designer
<br>  <button id="print" style="width:20%">Print Layout</button>
</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://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
}

body {
  overflow: hidden
}

JavaScript

class Obstacle {
	constructor (center,size) {
		this.center = center.clone();  
		this.mesh = new THREE.Mesh (new THREE.CylinderGeometry(size,size,1,20),
			new THREE.MeshBasicMaterial());
		this.mesh.position.copy (center);
		this.size = size;
    scene.add (this.mesh)
	}
  // ES6 class can NOT directly stringify
  // https://stackoverflow.com/questions/42107492/json-stringify-es6-class-property-with-getter-setter/42696429
  toJSON (){
  	return {center: this.center, size: this.size}
  }
}

class Target {
	constructor (id, pos) {
		this.id = id;
		this.pos = pos.clone();
		this.mesh = new THREE.Mesh (new THREE.CylinderGeometry (8,8,3,20), 
		    new THREE.MeshBasicMaterial ({color:'yellow'}));
		this.found = false;  // default: not found yet
		this.mesh.position.copy (pos)
		scene.add (this.mesh);
	}
	toJSON() {
  	return {id: this.id, pos: this.pos}
  }	
}

$('#print').click ( function() {
  console.log ( JSON.stringify (myScene) );
});

////////////////////
var camera, scene, renderer;
var myScene;
var targetID = 0;

var raycaster;
var mouse = new THREE.Vector2();
var pickables = [];

init();
animate();

function init() {

  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 4000);
  camera.position.z = 800;
  camera.position.y = 700;

  var gridXZ = new THREE.GridHelper(800, 80, 'red', 'white');
  scene.add(gridXZ);

  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor(0x888888);

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

  document.body.appendChild(renderer.domElement);

  /////////////////////////////////////////////////////////////////////
  plane = new THREE.Mesh(new THREE.PlaneGeometry(800, 800), new THREE.MeshBasicMaterial({
    transparent: true,
    opacity: 0.5,
    visible: true
  }));
  scene.add(plane);
  plane.rotation.x = -Math.PI / 2;
  pickables = [plane];

	raycaster = new...