components.js

function Container3D(opts) {
	// store desired options
	setEntityOptions(opts, this);

	// store what kind of primitive shape this entity is
	this.prim = 'container';
	
	// set scale
	setScale(this.opts, this);	
	
	// set position
	setPosition(this.opts, this);

	// set rotation
	setRotation(this.opts, this);

	// set visibility	
	setVisibility(this.opts, this);
	
	// init common setters / getters
	initializerSettersAndGetters(this);	
}

function DAE(opts) {
	// store desired options
	setEntityOptions(opts, this);

	// store what kind of primitive shape this entity is
	this.prim = 'dae';
	
	// set asset id
	this.tag.setAttribute('collada-model', '#' + opts.asset);
	
	// set scale
	setScale(this.opts, this);	
	
	// set position
	setPosition(this.opts, this);

	// set rotation
	setRotation(this.opts, this);

	// set visibility	
	setVisibility(this.opts, this);
	
	// init common setters / getters
	initializerSettersAndGetters(this);	
}

function OBJ(opts) {
	// store desired options
	setEntityOptions(opts, this);

	// store what kind of primitive shape this entity is
	this.prim = 'obj';
	
	// set asset id
	this.tag.setAttribute('obj-model', 'obj: #' + opts.asset + '; mtl: #' + opts.mtl);
	
	console.log(this.tag);
	
	// set scale
	setScale(this.opts, this);	
	
	// set position
	setPosition(this.opts, this);

	// set rotation
	setRotation(this.opts, this);

	// set visibility	
	setVisibility(this.opts, this);
	
	// init common setters / getters
	initializerSettersAndGetters(this);	
}

function Text(opts){
	this.prim = 'text';
	this.opts = opts;
	this.value = opts.value;
	this.position = opts.position;
	this.opacity = opts.opacity;

	// init common setters / getters
	this.tag = document.createElement('a-text');
	this.tag.setAttribute('value', this.value);
	this.tag.setAttribute('position', this.position);
	this.tag.setAttribute('opacity',this.opacity);

	this.setvalue = function(v){
		this.value = v;
		this.tag.setAttribute('value', this.value);
	}
	this.setopacity = function(v){
		this.opacity = v;
		this.tag.setAttribute('opacity',this.opacity);
	}
}

function Sky(opts){
	this.prim = 'sky';
	this.opts = opts;
	this.colorred = opts.colorred;
	this.colorgreen = opts.colorgreen;
	this.colorblue = opts.colorblue;

	// init common setters / getters
	this.tag = document.createElement('a-sky');
	this.tag.setAttribute('color', 'rgb('+this.colorred+','+this.colorgreen+','+this.colorblue+')')
	this.tag.setAttribute('metalness', this.opts.metalness)

	this.getColor = function(){
		return this.colorred;
	}

	this.setColor = function(colorred,colorgreen,colorblue){
		this.colorred = colorred;
		this.colorgreen = colorgreen;
		this.colorblue = colorblue;
		this.tag.setAttribute('color', 'rgb('+this.colorred+','+this.colorgreen+','+this.colorblue+')')
	}
}

function Box(opts) {
	// store desired options
	setEntityOptions(opts, this);

	// store what kind of primitive shape this entity is
	this.prim = 'box';

	// setup geometry parameters
	if (!('width' in opts))  {
		opts.width = 1;
	}
	if (!('depth' in opts))  {
		opts.depth = 1;
	}
	if (!('height' in opts)) {
		opts.height = 1;
	}
	this.width  = opts.width;
	this.height = opts.height;
	this.depth  = opts.depth;
			 
	// set geometry
	setGeometry(this);

	// set material
	processMaterial(this);
	setMaterial(this);

	// set scale
	setScale(this.opts, this);
	
	// set position
	setPosition(this.opts, this);

	// set rotation
	setRotation(this.opts, this);

	// set visibility	
	setVisibility(this.opts, this);
	
	// set click handler
	setClickHandler(this);
	
	// init common setters / getters
	initializerSettersAndGetters(this);

}


function Plane(opts) {
	// store desired options
	setEntityOptions(opts, this);

	// store what kind of primitive shape this entity is
	this.prim = 'plane';

	// setup geometry parameters
	if (!('width' in opts))  {
		opts.width = 1;
	}
	if (!('height' in opts)) {
		opts.height = 1;
	}
	this.width  = opts.width;
	this.height = opts.height;
	this.depth  = "none";
			 
	// set geometry
	setGeometry(this);

	// set material
	processMaterial(this);
	setMaterial(this);

	// set scale
	setScale(this.opts, this);
	
	// set position
	setPosition(this.opts, this);

	// set rotation
	setRotation(this.opts, this);

	// set visibility	
	setVisibility(this.opts, this);

	// set click handler
	setClickHandler(this);
	
	// init common setters / getters
	initializerSettersAndGetters(this);
} 
 

function Sphere(opts) {
	// store desired options
	setEntityOptions(opts, this);

	// store what kind of primitive shape this entity is
	this.prim   = 'sphere';

	// setup geometry parameters
	if (!('radius' in opts)) {
		opts.radius = 1;
	}
	this.radius = opts.radius;
	
	if (!('segmentsWidth' in opts)) {
		opts.segmentsWidth = 18;
	}
	this.segmentsWidth = opts.segmentsWidth;

	if (!('segmentsHeight' in opts)) {
		opts.segmentsHeight = 36;
	}
	this.segmentsHeight = opts.segmentsHeight;

	if (!('phiStart' in opts)) {
		opts.phiStart = 0;
	}
	this.phiStart = opts.phiStart;

	if (!('phiLength' in opts)) {
		opts.phiLength = 360;
	}
	this.phiLength = opts.phiLength;

	if (!('thetaStart' in opts)) {
		opts.thetaStart = 0;
	}
	this.thetaStart = opts.thetaStart;

	if (!('thetaLength' in opts)) {
		opts.thetaLength = 360;
	}
	this.thetaLength = opts.thetaLength;
	
	// set geometry
	setGeometry(this);

	// set material
	processMaterial(this);
	setMaterial(this);

	// set scale
	setScale(this.opts, this);
	
	// set position
	setPosition(this.opts, this);

	// set rotation
	setRotation(this.opts, this);

	// set visibility	
	setVisibility(this.opts, this);

	// set click handler
	setClickHandler(this);
	
	// init common setters / getters
	initializerSettersAndGetters(this);
}



function Dodecahedron(opts) {
	// store desired options
	setEntityOptions(opts, this);

	// store what kind of primitive shape this entity is
	this.prim   = 'dodecahedron';

	// setup geometry parameters
	if (!('radius' in opts)) {
		opts.radius = 1;
	}
	this.radius = opts.radius;

	// set geometry
	setGeometry(this);

	// set material
	processMaterial(this);
	setMaterial(this);

	// set scale
	setScale(this.opts, this);
	
	// set position
	setPosition(this.opts, this);

	// set rotation
	setRotation(this.opts, this);

	// set visibility	
	setVisibility(this.opts, this);

	// set click handler
	setClickHandler(this);
	
	// init common setters / getters
	initializerSettersAndGetters(this);
}


function Dodecahedron(opts) {
	// store desired options
	setEntityOptions(opts, this);

	// store what kind of primitive shape this entity is
	this.prim   = 'dodecahedron';

	// setup geometry parameters
	if (!('radius' in opts)) {
		opts.radius = 1;
	}
	this.radius = opts.radius;

	// set geometry
	setGeometry(this);

	// set material
	processMaterial(this);
	setMaterial(this);

	// set scale
	setScale(this.opts, this);
	
	// set position
	setPosition(this.opts, this);

	// set rotation
	setRotation(this.opts, this);

	// set visibility	
	setVisibility(this.opts, this);

	// set click handler
	setClickHandler(this);
	
	// init common setters / getters
	initializerSettersAndGetters(this);
}


function Octahedron(opts) {
	// store desired options
	setEntityOptions(opts, this);

	// store what kind of primitive shape this entity is
	this.prim   = 'octahedron';

	// setup geometry parameters
	if (!('radius' in opts)) {
		opts.radius = 1;
	}
	this.radius = opts.radius;

	// set geometry
	setGeometry(this);

	// set material
	processMaterial(this);
	setMaterial(this);

	// set scale
	setScale(this.opts, this);
	
	// set position
	setPosition(this.opts, this);

	// set rotation
	setRotation(this.opts, this);

	// set visibility	
	setVisibility(this.opts, this);

	// set click handler
	setClickHandler(this);
	
	// init common setters / getters
	initializerSettersAndGetters(this);
}


function Tetrahedron(opts) {
	// store desired options
	setEntityOptions(opts, this);

	// store what kind of primitive shape this entity is
	this.prim   = 'tetrahedron';

	// setup geometry parameters
	if (!('radius' in opts)) {
		opts.radius = 1;
	}
	this.radius = opts.radius;

	// set geometry
	setGeometry(this);

	// set material
	processMaterial(this);
	setMaterial(this);

	// set scale
	setScale(this.opts, this);
	
	// set position
	setPosition(this.opts, this);

	// set rotation
	setRotation(this.opts, this);

	// set visibility	
	setVisibility(this.opts, this);

	// set click handler
	setClickHandler(this);
	
	// init common setters / getters
	initializerSettersAndGetters(this);
}


function Circle(opts) {
	// store desired options
	setEntityOptions(opts, this);

	// store what kind of primitive shape this entity is
	this.prim   = 'circle';

	// setup geometry parameters
	if (!('radius' in opts)) {
		opts.radius = 1;
	}
	this.radius = opts.radius;
	
	if (!('segments' in opts)) {
		opts.segments = 32;
	}
	this.segments = opts.segments;

	if (!('thetaStart' in opts)) {
		opts.thetaStart = 0;
	}
	this.thetaStart = opts.thetaStart;

	if (!('thetaLength' in opts)) {
		opts.thetaLength = 360;
	}
	this.thetaLength = opts.thetaLength;
	
	// set geometry
	setGeometry(this);

	// set material
	processMaterial(this);
	setMaterial(this);

	// set scale
	setScale(this.opts, this);
	
	// set position
	setPosition(this.opts, this);

	// set rotation
	setRotation(this.opts, this);

	// set visibility	
	setVisibility(this.opts, this);

	// set click handler
	setClickHandler(this);
	
	// init common setters / getters
	initializerSettersAndGetters(this);
}
 
function Cone(opts) {
	// store desired options
	setEntityOptions(opts, this);

	// store what kind of primitive shape this entity is
	this.prim   = 'cone';

	// setup geometry parameters
	if (!('height' in opts)) {
		opts.height = 2;
	}
	this.height = opts.height;

	if (!('openEnded' in opts)) {
		opts.openEnded = false;
	}
	this.openEnded = opts.openEnded;

	if (!('radiusBottom' in opts)) {
		opts.radiusBottom = 1;
	}
	this.radiusBottom = opts.radiusBottom;

	if (!('radiusTop' in opts)) {
		opts.radiusTop = 1;
	}
	this.radiusTop = opts.radiusTop;
	
	if (!('segmentsRadial' in opts)) {
		opts.segmentsRadial = 36;
	}
	this.segmentsRadial = opts.segmentsRadial;

	if (!('segmentsHeight' in opts)) {
		opts.segmentsHeight = 18;
	}
	this.segmentsHeight = opts.segmentsHeight;

	if (!('thetaStart' in opts)) {
		opts.thetaStart = 0;
	}
	this.thetaStart = opts.thetaStart;

	if (!('thetaLength' in opts)) {
		opts.thetaLength = 360;
	}
	this.thetaLength = opts.thetaLength;
	
	// set geometry
	setGeometry(this);

	// set material
	processMaterial(this);
	setMaterial(this);

	// set scale
	setScale(this.opts, this);
	
	// set position
	setPosition(this.opts, this);

	// set rotation
	setRotation(this.opts, this);

	// set visibility	
	setVisibility(this.opts, this);

	// set click handler
	setClickHandler(this);
	
	// init common setters / getters
	initializerSettersAndGetters(this);
}

function Cylinder(opts) {
	// store desired options
	setEntityOptions(opts, this);

	// store what kind of primitive shape this entity is
	this.prim   = 'cylinder';

	// setup geometry parameters
	if (!('radius' in opts)) {
		opts.radius = 1;
	}
	this.radius = opts.radius;

	if (!('height' in opts)) {
		opts.height = 2;
	}
	this.height = opts.height;
	
	if (!('segmentsRadial' in opts)) {
		opts.segmentsRadial = 36;
	}
	this.segmentsRadial = opts.segmentsRadial;

	if (!('segmentsHeight' in opts)) {
		opts.segmentsHeight = 18;
	}
	this.segmentsHeight = opts.segmentsHeight;

	if (!('openEnded' in opts)) {
		opts.openEnded = false;
	}
	this.openEnded = opts.openEnded;

	if (!('thetaStart' in opts)) {
		opts.thetaStart = 0;
	}
	this.thetaStart = opts.thetaStart;

	if (!('thetaLength' in opts)) {
		opts.thetaLength = 360;
	}
	this.thetaLength = opts.thetaLength;
	
	// set geometry
	setGeometry(this);

	// set material
	processMaterial(this);
	setMaterial(this);

	// set scale
	setScale(this.opts, this);
	
	// set position
	setPosition(this.opts, this);

	// set rotation
	setRotation(this.opts, this);

	// set visibility	
	setVisibility(this.opts, this);

	// set click handler
	setClickHandler(this);
	
	// init common setters / getters
	initializerSettersAndGetters(this);
}

function Ring(opts) {
	// store desired options
	setEntityOptions(opts, this);

	// store what kind of primitive shape this entity is
	this.prim   = 'ring';

	// setup geometry parameters
	if (!('radiusInner' in opts)) {
		opts.radiusInner = 1;
	}
	this.radiusInner = opts.radiusInner;

	if (!('radiusOuter' in opts)) {
		opts.radiusOuter = 1;
	}
	this.radiusOuter = opts.radiusOuter;

	if (!('segmentsTheta' in opts)) {
		opts.segmentsTheta = 32;
	}
	this.segmentsTheta = opts.segmentsTheta;

	if (!('segmentsPhi' in opts)) {
		opts.segmentsPhi = 8;
	}
	this.segmentsPhi = opts.segmentsPhi;

	if (!('thetaStart' in opts)) {
		opts.thetaStart = 0;
	}
	this.thetaStart = opts.thetaStart;

	if (!('thetaLength' in opts)) {
		opts.thetaLength = 360;
	}
	this.thetaLength = opts.thetaLength;
	
	// set geometry
	setGeometry(this);

	// set material
	processMaterial(this);
	setMaterial(this);

	// set scale
	setScale(this.opts, this);
	
	// set position
	setPosition(this.opts, this);

	// set rotation
	setRotation(this.opts, this);

	// set visibility	
	setVisibility(this.opts, this);
	
	// set click handler
	setClickHandler(this);

	// init common setters / getters
	initializerSettersAndGetters(this);
}

function Torus(opts) {
	// store desired options
	setEntityOptions(opts, this);

	// store what kind of primitive shape this entity is
	this.prim   = 'torus';

	// setup geometry parameters
	if (!('radius' in opts)) {
		opts.radius = 1;
	}
	this.radius = opts.radius;

	if (!('radiusTubular' in opts)) {
		opts.radiusTubular = 0.2;
	}
	this.radiusTubular = opts.radiusTubular;

	if (!('segmentsRadial' in opts)) {
		opts.segmentsRadial = 36;
	}
	this.segmentsRadial = opts.segmentsRadial;

	if (!('segmentsTubular' in opts)) {
		opts.segmentsTubular = 32;
	}
	this.segmentsTubular = opts.segmentsTubular;

	if (!('arc' in opts)) {
		opts.arc = 360;
	}
	this.arc = opts.arc;
	
	// set geometry
	setGeometry(this);

	// set material
	processMaterial(this);
	setMaterial(this);

	// set scale
	setScale(this.opts, this);
	
	// set position
	setPosition(this.opts, this);

	// set rotation
	setRotation(this.opts, this);

	// set visibility	
	setVisibility(this.opts, this);

	// set click handler
	setClickHandler(this);
	
	// init common setters / getters
	initializerSettersAndGetters(this);
}

function TorusKnot(opts) {
	// store desired options
	setEntityOptions(opts, this);

	// store what kind of primitive shape this entity is
	this.prim   = 'torusKnot';

	// setup geometry parameters
	if (!('radius' in opts)) {
		opts.radius = 1;
	}
	this.radius = opts.radius;

	if (!('radiusTubular' in opts)) {
		opts.radiusTubular = 0.2;
	}
	this.radiusTubular = opts.radiusTubular;

	if (!('segmentsRadial' in opts)) {
		opts.segmentsRadial = 36;
	}
	this.segmentsRadial = opts.segmentsRadial;

	if (!('segmentsTubular' in opts)) {
		opts.segmentsTubular = 32;
	}
	this.segmentsTubular = opts.segmentsTubular;

	if (!('p' in opts)) {
		opts.p = 2;
	}
	this.p = opts.p;

	if (!('q' in opts)) {
		opts.q = 3;
	}
	this.q = opts.q;
	
	// set geometry
	setGeometry(this);

	// set material
	processMaterial(this);
	setMaterial(this);

	// set scale
	setScale(this.opts, this);
	
	// set position
	setPosition(this.opts, this);

	// set rotation
	setRotation(this.opts, this);

	// set visibility	
	setVisibility(this.opts, this);

	// set click handler
	setClickHandler(this);
	
	// init common setters / getters
	initializerSettersAndGetters(this);
}


function setClickHandler(entity) {
	if ('clickFunction' in entity.opts) {		
		entity.clickFunction = entity.opts.clickFunction;
		entity.tag.eRef = entity;
		entity.tag.addEventListener("click", function() {
			console.log("clicked");
			this.eRef.clickFunction(this.eRef);
		}); 
	}
}


function setEntityOptions(opts, entity) {
	// store desired options
	if (opts == undefined) {
		opts = {};
	}
	entity.opts = opts;
	 
	// create a tag for this box
	entity.tag = document.createElement('a-entity');

	// setup a "children" array
	entity.children = [];
}


function setGeometry(entity) {
	if (entity.prim == 'sphere') {
		entity.tag.setAttribute('geometry', 'primitive: sphere; radius: ' + entity.radius + '; segmentsWidth: ' + entity.segmentsWidth + '; segmentsHeight: ' + entity.segmentsHeight + '; phiStart: ' + entity.phiStart + '; phiLength: ' + entity.phiLength + '; thetaStart: ' + entity.thetaStart + '; thetaLength: ' + entity.thetaLength);				
	}
	else if (entity.prim == 'circle') {
		entity.tag.setAttribute('geometry', 'primitive: circle; radius: ' + entity.radius + '; segments: ' + entity.segments + '; thetaStart: ' + entity.thetaStart + '; thetaLength: ' + entity.thetaLength);				
	}
	else if (entity.prim == 'ring') {
		entity.tag.setAttribute('geometry', 'primitive: ring; radiusInner: ' + entity.radiusInner + '; radiusOuter: ' + entity.radiusOuter + '; segmentsTheta: ' + entity.segmentsTheta + '; segmentsPhi: ' + entity.segmentsPhi + '; thetaStart: ' + entity.thetaStart + '; thetaLength: ' + entity.thetaLength);				
	}
	else if (entity.prim == 'cone') {
		entity.tag.setAttribute('geometry', 'primitive: cone; height: ' + entity.height + '; openEnded: ' + entity.openEnded + '; radiusBottom: ' + entity.radiusBottom + '; radiusTop: ' + entity.radiusTop + '; segmentsRadial: ' + entity.segmentsRadial + '; segmentsHeight: ' + entity.segmentsHeight + '; thetaStart: ' + entity.thetaStart + '; thetaLength: ' + entity.thetaLength);			}
	else if (entity.prim == 'torus') {
		entity.tag.setAttribute('geometry', 'primitive: torus; radius: ' + entity.radius + '; radiusTubular: ' + entity.radiusTubular + '; segmentsRadial: ' + entity.segmentsRadial + '; segmentsTubular: ' + entity.segmentsTubular + '; arc: ' + entity.arc);			
	}
	else if (entity.prim == 'torusKnot') {
		entity.tag.setAttribute('geometry', 'primitive: torusKnot; radius: ' + entity.radius + '; radiusTubular: ' + entity.radiusTubular + '; segmentsRadial: ' + entity.segmentsRadial + '; segmentsTubular: ' + entity.segmentsTubular + '; p: ' + entity.p + '; q: ' + entity.q);			
	}
	else if (entity.prim == 'cylinder') {
		entity.tag.setAttribute('geometry', 'primitive: cylinder; radius: ' + entity.radius + '; height: ' + entity.height + '; openEnded: ' + entity.openEnded + '; segmentsRadial: ' + entity.segmentsRadial + '; segmentsHeight: ' + entity.segmentsHeight + '; thetaStart: ' + entity.thetaStart + '; thetaLength: ' + entity.thetaLength);			}
	else if (entity.prim == 'box') {
		entity.tag.setAttribute('geometry', 'primitive: box; depth: ' + entity.depth + '; height: ' + entity.height + '; width: ' + entity.width);	
	}
	else if (entity.prim == 'plane') {
		entity.tag.setAttribute('geometry', 'primitive: plane; height: ' + entity.height + '; width: ' + entity.width);
	}


	else if (entity.prim == 'octahedron' || entity.prim == 'tetrahedron' || entity.prim == 'dodecahedron') {
		entity.tag.setAttribute('geometry', 'primitive: ' + entity.prim + '; radius: ' + entity.radius);
	}
}


function processMaterial(entity) {	
	// handle common attributes
	var opts = entity.opts;
	
	if (!('opacity' in opts)) {
		opts.opacity = 1.0;
	}
	entity.opacity = opts.opacity;

	if (!('transparent' in opts)) {
		opts.transparent = false;
	}
	entity.transparent = opts.transparent;

	if (!('shader' in opts)) {
		opts.shader = 'standard';
	}
	entity.shader = opts.shader;

	if (!('side' in opts)) {
		opts.side = 'front';
	}
	entity.side = opts.side;

	if (!('metalness' in opts)) {
		opts.metalness = 0.1;
	}
	entity.metalness = opts.metalness;

	
	if (!('repeatX' in opts)) {
		opts.repeatX = 1;
	}
	entity.repeatX = opts.repeatX;

	if (!('repeatY' in opts)) {
		opts.repeatY = 1;
	}		
	entity.repeatY = opts.repeatY;
	
	// set color values
	if ('red' in opts) {
		entity.red = parseInt(opts.red);
	}		
	else {
		entity.red = 255;
	}
	if ('green' in opts) {
		entity.green = parseInt(opts.green);
	}		
	else {
		entity.green = 255;
	}
	if ('blue' in opts) {
		entity.blue = parseInt(opts.blue);
	}		
	else {
		entity.blue = 255;
	}	
	
	if ('asset' in opts) {
		entity.asset = opts.asset;
	}
	else {
		entity.asset = 'None';
	}
}

function setMaterial(entity) {
	// set tag
	if (entity.asset == 'None') {
		entity.tag.setAttribute('material', 'opacity: ' + entity.opacity + '; transparent: ' + entity.transparent + '; shader: ' + entity.shader + '; side: ' + entity.side + '; roughness: ' + entity.roughness + '; metalness: ' + entity.metalness + '; repeat: ' + entity.repeatX + " " + entity.repeatY + '; color: rgb(' + entity.red + ',' + entity.green + ',' + entity.blue + ')');		
	}
	else {
		entity.tag.setAttribute('material', 'opacity: ' + entity.opacity + '; transparent: ' + entity.transparent + '; shader: ' + entity.shader + '; side: ' + entity.side + '; roughness: ' + entity.roughness + '; metalness: ' + entity.metalness + '; src: #' + entity.asset + '; repeat: ' + entity.repeatX + " " + entity.repeatY + '; color: rgb(' + entity.red + ',' + entity.green + ',' + entity.blue + ')');		
	}
} 


function setScale(opts, entity) {
	// set scale
	if ('scaleX' in opts) {
		entity.scaleX = opts.scaleX;		
	}
	else {
		entity.scaleX = 1;
	}
	
	if ('scaleY' in opts) {
		entity.scaleY = opts.scaleY;		
	}
	else {
		entity.scaleY = 1;
	}
	
	if ('scaleZ' in opts) {
		entity.scaleZ = opts.scaleZ;		
	}
	else {
		entity.scaleZ = 1;
	}
	
	// set tag attributes
	entity.tag.setAttribute('scale', entity.scaleX + ' ' + entity.scaleY + ' ' + entity.scaleZ);	
}
 
 
function setPosition(opts, entity) {
	// set position
	if ('x' in opts) {
		entity.x = opts.x;
	}
	else {
		entity.x = 0;
	}
	if ('y' in opts) {
		entity.y = opts.y;
	}
	else {
		entity.y = 0;
	}
	if ('z' in opts) {
		entity.z = opts.z;
	}
	else {
		entity.z = 0;
	}
	
	// set tag attributes	
	entity.tag.setAttribute('position', entity.x + ' ' + entity.y + ' ' + entity.z);
} 
 
function setRotation(opts, entity) {
	// set rotation
	if ('rotationX' in opts) {
		entity.rotationX = opts.rotationX;
	}
	else {
		entity.rotationX = 0;
	}
	if ('rotationY' in opts) {
		entity.rotationY = opts.rotationY;
	}
	else {
		entity.rotationY = 0;
	}
	if ('rotationZ' in opts) {
		entity.rotationZ = opts.rotationZ;
	}
	else {
		entity.rotationZ = 0;
	}

	// set tag attributes	
	entity.tag.setAttribute('rotation', entity.rotationX + ' ' + entity.rotationY + ' ' + entity.rotationZ);
}

function setVisibility(opts, entity) {
	// set visibility
	if ('visible' in opts) {
		entity.visible = opts.visible;
		entity.tag.setAttribute('visible', opts.visible);
	}
	else
	{
		entity.visible = true;
		entity.tag.setAttribute('visible', true);
	}	
}
 




function initializerSettersAndGetters(entity) {
	entity.nudge = function(nx,ny,nz) {
		this.x += nx;
		this.y += ny;
		this.z += nz;

		this.tag.setAttribute('position', this.x + ' ' + this.y + ' ' + this.z);
	}
	
	entity.constrainPosition = function(xmin, xmax, ymin, ymax, zmin, zmax) {
		if (this.x < xmin) { this.x = xmin; }
		if (this.y < ymin) { this.y = ymin; }
		if (this.z < zmin) { this.z = zmin; }
		if (this.x > xmax) { this.x = xmax; }
		if (this.y > ymax) { this.y = ymax; }
		if (this.z > zmax) { this.z = zmax; }

		this.tag.setAttribute('position', this.x + ' ' + this.y + ' ' + this.z);
	}

	entity.setPosition = function(nx, ny, nz) {
		this.x = nx;
		this.y = ny;
		this.z = nz;
	
		this.tag.setAttribute('position', this.x + ' ' + this.y + ' ' + this.z);
	}
	
	entity.getX = function() {
		return this.x;
	}
	
	entity.getY = function() {
		return this.y;
	}
	
	entity.getZ = function() {
		return this.z;
	}
	
	entity.setX = function(x) {
		this.x = x;
	
		this.tag.setAttribute('position', this.x + ' ' + this.y + ' ' + this.z);
	}
	
	entity.setY = function(y) {
		this.y = y;
	
		this.tag.setAttribute('position', this.x + ' ' + this.y + ' ' + this.z);
	}
	
	entity.setZ = function(z) {
		this.z = z;
	
		this.tag.setAttribute('position', this.x + ' ' + this.y + ' ' + this.z);
	}
	
	
	entity.setRotation = function(nx, ny, nz) {
		this.rotationX = nx;
		this.rotationY = ny;
		this.rotationZ = ny;
	
		this.tag.setAttribute('rotation', this.rotationX + ' ' + this.rotationY + ' ' + this.rotationZ);
	}
	
	entity.rotateX = function(nx) {
		this.rotationX = nx;
	
		this.tag.setAttribute('rotation', this.rotationX + ' ' + this.rotationY + ' ' + this.rotationZ);
	}
	
	entity.rotateY = function(ny) {
		this.rotationY = ny;
	
		this.tag.setAttribute('rotation', this.rotationX + ' ' + this.rotationY + ' ' + this.rotationZ);
	}
	
	entity.rotateZ = function(nz) {
		this.rotationZ = nz;
	
		this.tag.setAttribute('rotation', this.rotationX + ' ' + this.rotationY + ' ' + this.rotationZ);
	}
	
	entity.spinX = function(nx) {
		this.rotationX += nx;
	
		this.tag.setAttribute('rotation', this.rotationX + ' ' + this.rotationY + ' ' + this.rotationZ);
	}
	
	entity.spinY = function(ny) {
		this.rotationY += ny;
	
		this.tag.setAttribute('rotation', this.rotationX + ' ' + this.rotationY + ' ' + this.rotationZ);
	}
	
	entity.spinZ = function(nz) {
		this.rotationZ += nz;
	
		this.tag.setAttribute('rotation', this.rotationX + ' ' + this.rotationY + ' ' + this.rotationZ);
	}
	
	entity.getRotationX = function() {
		return this.rotationX;
	}
	
	entity.getRotationY = function() {
		return this.rotationY;
	}
	
	entity.getRotationZ = function() {
		return this.rotationZ;
	}
	

	
	
	entity.hide = function() {
		this.visible = false;
	
		this.tag.setAttribute('visible', this.visible);
	}
	
	entity.show = function() {
		this.visible = true;
	
		this.tag.setAttribute('visible', this.visible);
	}
	
	entity.toggleVisibility = function() {
		this.visible = !this.visible;
	
		this.tag.setAttribute('visible', this.visible);
	}
	
	entity.getVisibility = function() {
		return this.visible;
	}
	
	entity.getScale = function() {
		var s = {};
		s.x = this.scaleX;
		s.y = this.scaleY;
		s.z = this.scaleZ;
		return s;
	}
	
	entity.getScaleX = function() {
		return this.scaleX;
	}
	
	entity.getScaleY = function() {
		return this.scaleY;
	}
	
	entity.getScaleZ = function() {
		return this.scaleZ;
	}
	
	entity.setScale = function(x,y,z) {
		this.scaleX = x;
		this.scaleY = y;
		this.scaleZ = z;

		this.tag.setAttribute('scale', this.scaleX + ' ' + this.scaleY + ' ' + this.scaleZ);
	}
	
	entity.setScaleX = function(sx) {
		this.scaleX = sx;
		
		this.tag.setAttribute('scale', this.scaleX + ' ' + this.scaleY + ' ' + this.scaleZ);
	}
	
	entity.setScaleY = function(sy) {
		this.scaleY = sy;
		
		this.tag.setAttribute('scale', this.scaleX + ' ' + this.scaleY + ' ' + this.scaleZ);
	}
	
	entity.setScaleZ = function(sz) {
		this.scaleZ = sz;
		
		this.tag.setAttribute('scale', this.scaleX + ' ' + this.scaleY + ' ' + this.scaleZ);
	}
	
	
	
	
	
	
	// material getters & setters
	entity.setColor = function(r,g,b) {
		if ('red' in this && 'green' in this && 'blue' in this) {
			this.red = parseInt(r);
			this.green = parseInt(g);
			this.blue = parseInt(b);
		
			setMaterial(this);
		}
	}
	
	entity.setRed = function(r) {
		if ('red' in this) {
			this.red = parseInt(r);		
			setMaterial(this);
		}
	}
	
	entity.setGreen = function(g) {
		if ('green' in this) {
			this.green = parseInt(g);
			setMaterial(this);
		}
	}
	
	entity.setBlue = function(b) {
		if ('blue' in this) {
			this.blue = parseInt(b);
			setMaterial(this);
		}
	}
	
	entity.getRed = function() {
		if ('red' in this) {
			return this.red;
		}
		return "none";
	}
	
	entity.getGreen = function() {
		if ('green' in this) {
			return this.green;
		}
		return "none";
	}
	
	entity.getBlue = function() {
		if ('blue' in this) {
			return this.blue;
		}
		return "none";
	}
	
	entity.getOpacity = function() {
		if ('opacity' in this) {
			return this.opacity;
		}
		return "none";		
	}
	entity.setOpacity = function(v) {
		if ('opacity' in this) {
			this.opacity = v;
			setMaterial(this);
		}
	}

	entity.getTransparent = function() {
		if ('transparent' in this) {
			return this.transparent;
		}
		return "none";		
	}
	entity.setTransparent = function(v) {
		if ('transparent' in this) {
			this.transparent = v;
			setMaterial(this);
		}
	}

	entity.getShader = function() {
		if ('shader' in this) {
			return this.shader;
		}
		return "none";		
	}
	entity.setShader = function(v) {
		if ('shader' in this) {
			this.shader = v;
			setMaterial(this);
		}
	}

	entity.getSide = function() {
		if ('side' in this) {
			return this.side;
		}
		return "none";		
	}
	entity.setSide = function(v) {
		if ('side' in this) {
			this.side = v;
			setMaterial(this);
		}
	}

	entity.getMetalness = function() {
		if ('metalness' in this) {
			return this.metalness;
		}
		return "none";		
	}
	entity.setMetalness = function(v) {
		if ('metalness' in this) {
			this.metalness = v;
			setMaterial(this);
		}
	}

	entity.getRoughness = function() {
		if ('roughness' in this) {
			return this.roughness;
		}
		return "none";		
	}
	entity.setRoughness = function(v) {
		if ('roughness' in this) {
			this.roughness = v;
			setMaterial(this);
		}
	}

	entity.getRepeatX = function() {
		if ('repeatX' in this) {
			return this.repeatX;
		}
		return "none";		
	}
	entity.setRepeatX = function(v) {
		if ('repeatX' in this) {
			this.repeatX = v;
			setMaterial(this);
		}
	}

	entity.getAsset = function() {
		if ('asset' in this) {
			return this.asset;
		}
		return "none";		
	}
	entity.setAsset = function(v) {
		if ('asset' in this) {
			this.asset = v;
			setMaterial(this);
		}
	}

	
	entity.getOpacity = function() {
		return this.opacity;
	}
	
	
	
	
	// geometry getters & setters
	entity.getProperty = function(prop) {
		if (prop in this) {
			return this[prop];
		}
		return 'none';
	}

	entity.setWidth = function(nw) {
		if ('width' in this) {
			this.width = nw;
			setGeometry(this);
		}
	}
	
	entity.setDepth = function(nd) {
		if ('depth' in this) {
			this.depth = nd;
			setGeometry(this);
		}
	}
	
	entity.setHeight = function(nh) {
		if ('height' in this) {
			this.height = nh;
			setGeometry(this);
		}
	}
		
	entity.getWidth = function() {
		if ('width' in this) {
			return this.width;
		}
		return 'none';
	}
	
	entity.getHeight = function() {
		if ('height' in this) {
			return this.height;
		}
		return 'none';
	}
	
	entity.getDepth = function() {
		if ('depth' in this) {
			return this.depth;
		}
		return 'none';
	}
		
	entity.getRadius = function() {
		if ('radius' in this) {
			return this.radius;
		}
		return 'none';
	}

	entity.setRadius = function(r) {
		if ('radius' in this) {
			this.radius = r;			
			setGeometry(this);
		}
	}
	
	entity.changeRadius = function(r) {
		if ('radius' in this) {
			this.radius += r;
			setGeometry(this);
		}
	}
	
	
	entity.getSegmentsWidth = function() {
		if ('segmentsWidth' in this) {
			return this.segmentsWidth;
		}
		return "none";
	}
	entity.getSegmentsHeight = function() {
		if ('segmentsHeight' in this) {
			return this.segmentsHeight;
		}
		return "none";
	}
	entity.getPhiStart = function() {
		if ('phiStart' in this) {
			return this.phiStart;
		}
		return "none";
	}
	entity.getPhiLength = function() {
		if ('phiLength' in this) {
			return this.phiLength;
		}
		return "none";
	}
	entity.getThetaStart = function() {
		if ('thetaStart' in this) {
			return this.thetaStart;
		}
		return "none";
	}
	entity.getThetaLength = function() {
		if ('thetaLength' in this) {
			return this.thetaLength;
		}
		return "none";
	}
	entity.getArc = function() {
		if ('arc' in this) {
			return this.arc;
		}
		return "none";
	}

	entity.setSegmentsWidth = function(v) {
		if ('segmentsWidth' in this) {
			this.segmentsWidth = v;
			setGeometry(this);
		}
	}	
	entity.setSegmentsHeight = function(v) {
		if ('segmentsHeight' in this) {
			this.segmentsHeight = v;
			setGeometry(this);
		}
	}	
	entity.setPhiStart = function(v) {
		if ('phiStart' in this) {
			this.phiStart = v;
			setGeometry(this);
		}
	}	
	entity.setPhiLength = function(v) {
		if ('phiLength' in this) {
			this.phiLength = v;
			setGeometry(this);
		}
	}	
	entity.setThetaStart = function(v) {
		if ('thetaStart' in this) {
			this.thetaStart = v;
			setGeometry(this);
		}
	}	
	entity.setThetaLength = function(v) {
		if ('thetaLength' in this) {
			this.thetaLength = v;
			setGeometry(this);
		}
	}	
	entity.getSegments = function() {
		if ('segments' in this) {
			return this.segments;
		}
		return "none";
	}
	entity.setSegments = function(v) {
		if ('segments' in this) {
			this.segments = v;
			setGeometry(this);
		}
	}	
	entity.getOpenEnded = function() {
		if ('openEnded' in this) {
			return this.openEnded;
		}
		return "none";
	}
	entity.getRadiusBottom = function() {
		if ('radiusBottom' in this) {
			return this.radiusBottom;
		}
		return "none";
	}
	entity.getRadiusTop = function() {
		if ('radiusTop' in this) {
			return this.radiusTop;
		}
		return "none";
	}
	entity.getRadiusInner = function() {
		if ('radiusInner' in this) {
			return this.radiusInner;
		}
		return "none";
	}
	entity.getRadiusOuter = function() {
		if ('radiusOuter' in this) {
			return this.radiusOuter;
		}
		return "none";
	}
	entity.getRadiusTubular = function() {
		if ('radiusTubular' in this) {
			return this.radiusTubular;
		}
		return "none";
	}
	entity.getSegmentsRadial = function() {
		if ('segmentsRadial' in this) {
			return this.segmentsRadial;
		}
		return "none";
	}
	entity.getSegmentsTubular = function() {
		if ('segmentsTubular' in this) {
			return this.segmentsTubular;
		}
		return "none";
	}
	entity.getSegmentsTheta = function() {
		if ('segmentsTheta' in this) {
			return this.segmentsTheta;
		}
		return "none";
	}
	entity.getSegmentsPhi = function() {
		if ('segmentsPhi' in this) {
			return this.segmentsPhi;
		}
		return "none";
	}
	entity.getP = function() {
		if ('p' in this) {
			return this.p;
		}
		return "none";
	}
	entity.getQ = function() {
		if ('q' in this) {
			return this.q;
		}
		return "none";
	}
	entity.setOpenEnded = function(v) {
		if ('openEnded' in this) {
			this.openEnded = v;
			setGeometry(this);
		}
	}	
	entity.setRadiusBottom = function(v) {
		if ('radiusBottom' in this) {
			this.radiusBottom = v;
			setGeometry(this);
		}
	}	
	entity.setRadiusTop = function(v) {
		if ('radiusTop' in this) {
			this.radiusTop = v;
			setGeometry(this);
		}
	}	
	entity.setRadiusInner = function(v) {
		if ('radiusInner' in this) {
			this.radiusInner = v;
			setGeometry(this);
		}
	}	
	entity.setRadiusOuter = function(v) {
		if ('radiusOuter' in this) {
			this.radiusOuter = v;
			setGeometry(this);
		}
	}	
	entity.setRadiusTubular = function(v) {
		if ('radiusTubular' in this) {
			this.radiusTubular = v;
			setGeometry(this);
		}
	}	
	entity.setSegmentsRadial = function(v) {
		if ('segmentsRadial' in this) {
			this.segmentsRadial = v;
			setGeometry(this);
		}
	}	
	entity.setSegmentsTubular = function(v) {
		if ('segmentsTubular' in this) {
			this.segmentsTubular = v;
			setGeometry(this);
		}
	}	
	entity.setSegmentsTheta = function(v) {
		if ('segmentsTheta' in this) {
			this.segmentsTheta = v;
			setGeometry(this);
		}
	}	
	entity.setSegmentsPhi = function(v) {
		if ('segmentsPhi' in this) {
			this.segmentsPhi = v;
			setGeometry(this);
		}
	}	
	entity.setArc = function(v) {
		if ('arc' in this) {
			this.arc = v;
			setGeometry(this);
		}
	}	
	entity.setP = function(v) {
		if ('p' in this) {
			this.p = v;
			setGeometry(this);
		}
	}	
	entity.setQ = function(v) {
		if ('q' in this) {
			this.q = v;
			setGeometry(this);
		}
	}	



	// child management
	entity.addChild = function(child) {
		// append to our child array
		this.children.push(child);
		
		// append to our DOM element
		this.tag.appendChild(child.tag);
	}

	entity.removeChild = function(child) {
		// first ensure that the item is actually a child
		var isChild = false;
		for (var i = 0; i < this.children.length; i++) {
			if (this.children[i] == child) {
				isChild = true;
				break;
			}
		}
		
		if (isChild) {
			this.children.splice(i, 1);
			this.tag.removeChild( child.tag );
		}
	}
	
	entity.getChildren = function() {
		var returnChildren = [];
		for (var i = 0; i < this.children.length; i++) {
			returnChildren.push( this.children[i] );
		}
		
		return returnChildren;
	}
	
	
}

 
 
 
 
 
 
function addToWorld(entity) {
	document.getElementById('VRScene').appendChild(entity.tag); 
}

function removeFromWorld(entity) {
	document.getElementById('VRScene').removeChild(entity.tag); 
}




function World(id) {
	console.log("A-FrameP5 v0.1 (Craig Kapp, 11/8/2016)");
	
	if (id == undefined) {
		id = "VRScene";
	}
	this.scene = document.getElementById(id);

	this.flying = false;
	this.setFlying = function(v) {
		this.flying = v;
		this.camera.setWASD(v);
	}
	this.getFlying = function() {
		return this.flying;
	}

	this.camera = new Camera();
	this.scene.appendChild(this.camera.holder);
	
	this.add = function(entity) {
		this.scene.appendChild(entity.tag); 		
	}
	this.remove = function(entity) {
		this.scene.removeChild(entity.tag); 		
	}

	this.removeall = function(){
		while(this.scene.firstChild){
			this.scene.removeChild(this.scene.firstChild);
		}
	}
	
	this.getUserPosition = function() {
		return { x:this.camera.getX(), y:this.camera.getY(), z:this.camera.getZ()};
	}
	
	this.setUserPosition = function(x,y,z) {
		this.camera.setPosition(x,y,z);
	}
	
	this.moveUserForward = function(d) {
		var vectorHUD = new THREE.Vector3();
		vectorHUD.setFromMatrixPosition(this.camera.cursor.tag.object3D.matrixWorld);

		var vectorCamera = this.getUserPosition();
		
		var xDiff = vectorHUD.x - vectorCamera.x;
		var yDiff = vectorHUD.y - vectorCamera.y;
		var zDiff = vectorHUD.z - vectorCamera.z;

		if (this.flying) {
			this.camera.nudgePosition(xDiff*d, yDiff*d, zDiff*d);
		}
		else {
			this.camera.nudgePosition(xDiff*d, 0, zDiff*d);
		}
	}
	
	this.teleportToObject = function(element) {
		this.camera.setPosition(element.getX(), element.getY(), element.getZ());
	}
	

	// control semaphores
	this.slideMode = { enabled: false };
	
	// set up internal update loop
	var _this = this;		
	var _interval = setInterval(function() {
				
		// slideToObject
		if (_this.slideMode.enabled)
		{
			// nudge the camera in this direction
			_this.camera.nudgePosition(_this.slideMode.slideXInc, _this.slideMode.slideYInc, _this.slideMode.slideZInc);
	
			// mark this step
			_this.slideMode.currentStep++;
			
			// have we arrived?
			if (_this.slideMode.currentStep >= _this.slideMode.steps)
			{
				_this.slideMode.enabled = false;
			}
		}
		
	}, 10); // end internal update loop
		
	
	this.slideToObject = function(element, time) {
		
		// only slide if we aren't already sliding
		if (this.slideMode.enabled == false)
		{		
			// compute distance in all axes
			this.slideMode.xDistance = element.getX() - this.camera.getX();
			this.slideMode.yDistance = element.getY() - this.camera.getY();
			this.slideMode.zDistance = element.getZ() - this.camera.getZ();
			
			// compute necessary # of steps
			this.slideMode.steps = parseInt( time / 10 );
			this.slideMode.currentStep = 0;
			
			// compute increments
			this.slideMode.slideXInc = this.slideMode.xDistance / this.slideMode.steps;
			this.slideMode.slideYInc = this.slideMode.yDistance / this.slideMode.steps;
			this.slideMode.slideZInc = this.slideMode.zDistance / this.slideMode.steps;
			
			// enter into slide mode
			this.slideMode.enabled = true;
		}
	}	
}



function Camera() {

	// construct an entity holder
	this.holder = document.createElement('a-entity');
	this.holder.setAttribute('camera', '');
	
	// set position of camera
	this.x = 0;
	this.y = 1;
	this.z = 5;	
	this.holder.setAttribute('position', this.x + ' ' + this.y + ' ' + this.z);
	
	// set controls on camera
	this.holder.setAttribute('look-controls', '');
	this.setWASD = function(flying) {
		this.holder.setAttribute('wasd-controls', 'fly: ' + flying);		
	}
	this.setWASD(false);
	
	// constructor our cursor graphic
	this.cursor = new Ring({x:0, y:0, z:-1.0, radiusInner: 0.02, radiusOuter: 0.03, side: 'double', red:0, green:0, blue:0, shader:'flat', opacity: 0.5});
	this.cursor.tag.setAttribute('cursor', 'fuse: false');
	
	// register to be notifed when the camera position has been updated
	var _this = this;
	this.holder.addEventListener('componentchanged', function (evt) {
		
	});

	// add camera to our entity holder
	this.holder.appendChild(this.cursor.tag);
	
	// setters & getters
	this.setPosition = function(x, y, z) {
		this.x = x;
		this.y = y;
		this.z = z;	
		this.holder.setAttribute('position', this.x + ' ' + this.y + ' ' + this.z);
	}
	
	this.nudgePosition = function(x, y, z) {
		this.x = this.x + x;
		this.y = this.y + y;
		this.z = this.z + z;	
		this.holder.setAttribute('position', this.x + ' ' + this.y + ' ' + this.z);
	}
	
	this.getX = function() {
		return this.x;
	}
	
	this.getY = function() {
		return this.y;
	}
	
	this.getZ = function() {
		return this.z;
	}
}

index.html

<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.1/p5.js"></script>
        <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
        <script src="components.js"></script>
    </head>
   
    <script src="sketch.js">
    </script>
    
    <body>
    <a-scene id="VRScene">
    </a-scene>
 </body>
</html>

sketch.js

//VR内オブジェクト
var world;
var mymodel;
var enemy;
var g;
var sky;
var enemy;
var tree;
var recordtext;

//時間(24h=4800と定義。6時から開始)
var time = 1200;

//背景の色(0時を10,12時を250となるように定義。12h(time:2400)で240変化する)
var scolor = 130;
var d_scolor = 1;

//プレイヤーの位置
var player_x = 90;
var player_y = 90;

// 鬼の座標(yは高さ)
var x = 0;
var z = 0;

// 鬼の移動距離
var dx = 0.01;
var dz = 0.01;

//鬼の移動ロジック
var mode = "chase"; //ornormal

// タッチされた回数
var enemy_score = 0;

// 試合の初期化
function init() {
	enemy_score = 0;
	x = 0;
	z = 0;
	dx = 0.05;
	dz = 0.05;
	player_x = 90;
	player_y = 90;
	mode = "chase"
	time = 1200;
	scolor = 130;
	d_scolor = 1;
}

function setup() {
	noCanvas();
	world = new World('VRScene');
    
    sky = new Sky({colorred: scolor,colorgreen: scolor,colorblue: scolor, metalness:0.5})
    world.add(sky);
	
	//build a house
    enemy = new Box({
						x:x, y:0.5, z:z, 
						width:1, height:1, depth:1, 
						red:0, green:0, blue:0,
                    });
	world.add(enemy);
	
	
	//import the 3D model
	mymodel = new DAE({
		asset: 'model',
		x:-1.5, y:1.3, z:1.15,
		scaleX:0.05,
		scaleY:0.05,
		scaleZ:0.05,
	});
	world.add(mymodel);
	

  //create many trees
  for (var i = 0; i < 120; i++) {
		var tx = random(-15, 15);
		var tz = random(-15, 15);
		var ts = random(0.5, 2);
		
		if (tx < -2 || tx > 2) {
		  if (tz < -3 || tz > 3) {
		    tree = new Container3D({
	            x:tx, y:0, z:tz,
	            scaleX:ts, scaleY:ts, scaleZ:ts
	      });
	      
	      world.add(tree);
	  
	      var tree_t = new Cylinder({
						  x:0, y:0.3, z:0,
						  height:0.6,
						  radius: 0.3,
						  red:0, green:0, blue:0,
					   });
	      tree.addChild(tree_t);

	      var tree_l1 = new Cone({
						  x:0, y:1.1, z:0,
						  height:1,
						  radiusBottom: 1.2, radiusTop: 0.4,
						  red:0, green:0, blue:0,
					  });
	      tree.addChild(tree_l1);

	      var tree_l2 = new Cone({
						  x:0, y:2, z:0,
						  height:0.8,
						  radiusBottom: 0.8, radiusTop: 0.2,
						  red:0, green:0, blue:0,
					  });
	      tree.addChild(tree_l2);

	      var tree_l3 = new Cone({
						  x:0, y:2.7, z:0,
						  height:0.6,
						  radiusBottom: 0.5, radiusTop: 0,
						  red:0, green:0, blue:0,
					  });
	      tree.addChild(tree_l3);
		  }
		}
  }
  
  //create a plane
	g = new Plane({
					x:0, y:0, z:0, 
					width:30, height:30, 
					repeatX: 100,
					repeatY: 100,
					rotationX:-90, 
					metalness:0.95
				});
	
	world.add(g);

	recordtext = new Text({value:"",position:"-1 1 -1",opacity:0});
	world.add(recordtext);
}

	

var szChange = 0.01;
var gcChange = 0.01;
var skyChange = 5;

function draw() {
  //move the user
  if (mouseIsPressed) {
		world.moveUserForward(0.03);
	}


	//プレイヤーの場所
	var pos = world.getUserPosition();
	px = pos.x;
	pz = pos.z
	
	//鬼の座標
    bx = enemy.getX();
    bz = enemy.getZ();
    
	//鬼との距離をとる
	disx = px - bx;
	disz = pz - bz;
	
	// 鬼が画面外に行こうとしたら向きを逆にする
	if (bx <= -15 || bx >= 15) {
		dx = -1*dx;
		console.log(bx,bz)
	}

	if (bz <= -15 || bz >= 15) {
		dz = -1*dz;
	}

	
	//鬼のモードロジック
	switch (mode){
		//chaseの時は追いかける
		case "chase":
			if (disx >0){
				dx = abs(dx);
				enemy.setX(bx + dx);
			} else if (disx < 0){
				dx = -1 * abs(dx);
				enemy.setX(bx + dx);
			} else{
				
			}
		
			if (disz > 0){
				dz = abs(dz);
				enemy.setZ(bz + dz);
			}else if (disz<0){
				dz = -1 * abs(dz);
				enemy.setZ(bz + dz);
			}else{
			}
			break;

			
		//normalの時は適当にふらふらする
		case "normal":
			if (time%200>=0 && time%200 <50){
				enemy.setX(bx - dx);
			} else if (time%200>=50 && time%200 <100){
				enemy.setZ(bz + dz);  
			} else if (time%200>=100 &&time%200<200){
				enemy.setX(bx - dx);
				enemy.setZ(bz + dz);
			}
			break;
	}

	//鬼のモードが切り替わるときのロジック
	if ((abs(disx) <= 3 && abs(disz) <= 3)){
		mode = "chase";
	} else {
		mode = "normal";
	}
	
	// タッチされたら終わり
	if (abs(disx)<0.5 && abs(disz)<0.5) {
		enemy_score += 1;
	}
	// プレイヤーが画面外に出ても終わり
	if (pz <= -15 || pz  >= 15) {
		enemy_score += 1;
	}
	if (px <= -15 || px >= 15) {
		enemy_score += 1;
	}
		 
	//timeが10進むごとに背景の色を変える
	skyc = sky.getColor();
	//終了の時の表示
	if (enemy_score >= 1) {
		sky.setColor(250,0,0);
		g.setMetalness(0);
		g.setColor(250,0,0);
		world.setUserPosition(0,1,0)

		var display_day = Math.ceil(time / 4800);
		var display_hour = Math.floor((time % 4800) * 24/4800)
		var str = "Record: Day"+display_day+" "+display_hour+":00\nThank You Playing !\n Press r button to retry !"
		recordtext.setopacity(1);
		recordtext.setvalue(str);
		if (key == "r") {
			document.location.reload();
			key = "";
		}
	} else {
		//時間変化
		time += 1;
		if (time % 10 == 0){
			//背景色が240か0になったら増減の向きを変える
			switch(skyc){
				case 240:
					d_scolor = -1*d_scolor;
					break;
				case 0:
					d_scolor = -1*d_scolor;
					break;
			}
			sky.setColor(skyc + d_scolor,skyc + d_scolor,skyc + d_scolor)
		}
	}
	
	//6時になったら敵のスピードが早くなる
	if (time % 4800 == 1200){
		dx = 0.01 + Math.floor(time/4800)/80;
		dz = 0.01 + Math.floor(time/4800)/80;
	}

}