Skip to content

Instantly share code, notes, and snippets.

@canonno
Created Sep 16, 2020
Embed
What would you like to do?
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;
}
}
<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>
//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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment