About positions

alphaShash · July 4, 2019, 9:21am

Hello Everyone,

I want a small from u all about positioning as im working on a project for my company im little bit stuck.

this is the code example of one of the wall created the same way 4 different walls will b created with different positions to create a room but the problem is , we can see here the position has been defined twice cause the frist positions which is defined according to x,y and z-axis respectively.
The other position which is defined from vector3 is the position in JSON file

var rearWall = this.wallFactory.createWall(scene, EWallType.eInsideWallDoor, room.presentation.length, room.presentation.width);
// TODO: rotate depends on north/south/east/west
rearWall.rotation.x = -Math.PI / 2;
rearWall.position.z = 20;
rearWall.position.y = 2;
// this is the position given in json file
rearWall.position = new this.BABYLON.Vector3(room.presentation.x, room.presentation.y, 0);

when the whole room is created it can be recalled n-number of times just by calling in json file with the given x and y-axis the json file looks like this

{
“number”: “1.2”,
“presentation”: {
“x”: 0,
“y”: 0,
“length”: 5,
“width”:2,
“walls”: {
“north”: “eInsideWallSimple”,
“south”: “eOutsideWallWindow1”,
“east”: “eInsideWallDoor”,
“west”: “eOusideWallWindow2”,
“floor”: “eFloor”,
“ceiling”: “eCeiling”
}
},
},

when i want to call another room just by coping the same json file and by changing the x and y axis , the other room should be displayed as normal room.

But since this x and y axis in json is mention 0 all the walls will be displayed at 0 axis.

can any one please do help me in this.

Thanks in advance

sebavan · July 4, 2019, 11:05am

Why not having 2 files ? one for the base asset and one for the room setup with just x y ?

If you need only 1 why not dupplicating the common part ?

alphaShash · July 4, 2019, 11:08am

@sebavan can u explain a lil bit more please

sebavan · July 4, 2019, 11:11am

one like :
{
“number”: “1.2”,
“presentation”: {
“length”: 5,
“width”:2,
“walls”: {
“north”: “eInsideWallSimple”,
“south”: “eOutsideWallWindow1”,
“east”: “eInsideWallDoor”,
“west”: “eOusideWallWindow2”,
“floor”: “eFloor”,
“ceiling”: “eCeiling”
…
},

which helps setting generic part of the room

and one like {
{
id:“walla”,
“x”: 0,
“y”: 0,
},
{
id:“wallb”,
“x”: 1,
“y”: 2,
}
…
}|

alphaShash · July 4, 2019, 11:23am

@sebavan

this.roomService.getStockwerk(“1.OG”).subscribe(
stockwerk =>{
stockwerk.raeume.forEach(room =>{
var rearWall = this.wallFactory.createWall(scene, EWallType.eInsideWallDoor, room.presentation.length, room.presentation.width);
// TODO: rotate depends on north/south/east/west
rearWall.rotation.x = -Math.PI / 2;
rearWall.position.z = 10;
rearWall.position.y = 2;
rearWall.positions.push(room.presentation.x, room.presentation.y, 0);

var frontWall = this.wallFactory.createWall(scene, EWallType.eOusideWallWindow2, room.presentation.length, room.presentation.width);
frontWall.rotation.x = Math.PI / 2;
  frontWall.position.y = 1;
frontWall.positions.push(room.presentation.x, room.presentation.y, 0);


var rightWall = this.wallFactory.createWall(scene, EWallType.eInsideWallSimple, room.presentation.length, room.presentation.width);
rightWall.rotation.z = Math.PI / 2;
  rightWall.rotation.x = -Math.PI / 2;
  rightWall.position.x = -5;
  rightWall.position.z = 5;
  rightWall.position.y = 2;
rightWall.positions.push(room.presentation.x, room.presentation.y, 0);


var leftWall = this.wallFactory.createWall(scene, EWallType.eOutsideWallWindow1, room.presentation.length, room.presentation.width);
leftWall.rotation.z = -Math.PI / 2;
  leftWall.rotation.x = -Math.PI / 2;
  leftWall.position.x = 5;
  leftWall.position.z = 5;
  leftWall.position.y = 2;
leftWall.positions.push(room.presentation.x, room.presentation.y, 0);


var floor = this.wallFactory.createWall(scene, EWallType.eFloor, room.presentation.length, room.presentation.width);
floor.position.y = -0.9;
  floor.position.z = -0.1;
floor.positions.push(room.presentation.x, room.presentation.y, 0);


var ceiling = this.wallFactory.createWall(scene, EWallType.eCeiling, room.presentation.length, room.presentation.width);
ceiling.position.y = 3.9;
  ceiling.position.z = -0.1;
ceiling.positions.push(room.presentation.x, room.presentation.y, 0);

      });
  },
  errors =>{
    console.log(errors);
    alert("Fail to load room data");
  }
);

this is one complete room when i give an id as u mentioined before then the walls will b in different position but i want all the walls to b together a coomplete room , just by changing the x y in json should generate another similar room tats the point here

sebavan · July 4, 2019, 11:26am

I am sorry I am probably having an issue to understand what you are trying to solve

Could you create similar code in the PG to highlight the issue ? it might be way easier to troubleshoot ?

alphaShash · July 4, 2019, 11:28am

@sebavan sure ill create a PG and get back to you, thank you

alphaShash · July 4, 2019, 12:12pm

hi , i tried to create PG but couldnt as it is built with angular, so i would like to share my code here please do have a look,

this is my component.ts file:
import { Component, Injectable, OnInit, Inject } from ‘@angular/core’;
import { RoomService } from ‘./service/room.service’;
import { WallFactoryService } from ‘./service/wallfactory.service’;
import { EWallType } from ‘./service/EWallType’;

@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [’./app.component.css’]
})
export class AppComponent implements OnInit {

title = ‘BabylonTest’;

constructor(@Inject(‘BABYLON’) private BABYLON: any,
private roomService: RoomService,
private wallFactory: WallFactoryService) { }

ngOnInit() {
var canvas = document.getElementById(“renderCanvas”); // Get the canvas element
var engine = new this.BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine

var scene = this.createScene(engine, canvas); //Call the createScene function

// Register a render loop to repeatedly render the scene
engine.runRenderLoop(function () {
  scene.render();
});

// Watch for browser/canvas resize events
window.addEventListener("resize", function () {
  engine.resize();
});

this.roomService.getStockwerk("1.OG").subscribe(
  stockwerk =>{
    stockwerk.raeume.forEach(room =>{
      var rearWall = this.wallFactory.createWall(scene, EWallType.eInsideWallDoor, room.presentation.length, room.presentation.width);
// TODO: rotate depends on north/south/east/west
rearWall.rotation.x = -Math.PI / 2;
  rearWall.position.z = 10;
  rearWall.position.y = 2;
rearWall.position = 
   new this.BABYLON.Vector3(room.presentation.x, room.presentation.y, 0);

var frontWall = this.wallFactory.createWall(scene, EWallType.eOusideWallWindow2, room.presentation.length, room.presentation.width);
frontWall.rotation.x = Math.PI / 2;
  frontWall.position.y = 1;
frontWall.position = 
   new this.BABYLON.Vector3(room.presentation.x, room.presentation.y, 0);


var rightWall = this.wallFactory.createWall(scene, EWallType.eInsideWallSimple, room.presentation.length, room.presentation.width);
rightWall.rotation.z = Math.PI / 2;
  rightWall.rotation.x = -Math.PI / 2;
  rightWall.position.x = -5;
  rightWall.position.z = 5;
  rightWall.position.y = 2;
rightWall.position = 
   new this.BABYLON.Vector3(room.presentation.x, room.presentation.y, 0);


var leftWall = this.wallFactory.createWall(scene, EWallType.eOutsideWallWindow1, room.presentation.length, room.presentation.width);
leftWall.rotation.z = -Math.PI / 2;
  leftWall.rotation.x = -Math.PI / 2;
  leftWall.position.x = 5;
  leftWall.position.z = 5;
  leftWall.position.y = 2;
leftWall.position = 
   new this.BABYLON.Vector3(room.presentation.x, room.presentation.y, 0);


var floor = this.wallFactory.createWall(scene, EWallType.eFloor, room.presentation.length, room.presentation.width);
floor.position.y = -0.9;
  floor.position.z = -0.1;
floor.position = 
   new this.BABYLON.Vector3(room.presentation.x, room.presentation.y, 0);


var ceiling = this.wallFactory.createWall(scene, EWallType.eCeiling, room.presentation.length, room.presentation.width);
ceiling.position.y = 3.9;
ceiling.position.z = -0.1;

ceiling.position = 
   new this.BABYLON.Vector3(room.presentation.x, room.presentation.y, 0);

   });
  },
  errors =>{
    console.log(errors);
    alert("Fail to load room data");
  }
);

}

createScene(engine: any, canvas: any): any {

// Create the scene space
var scene = new this.BABYLON.Scene(engine);

// Add a camera to the scene and attach it to the canvas
var camera = new this.BABYLON.ArcRotateCamera("Camera", -Math.PI / 2, Math.PI / 3, 50, new this.BABYLON.Vector3(0, 0, 4.5), scene);
camera.attachControl(canvas, true);

// Add lights to the scene
var light1 = new this.BABYLON.HemisphericLight("light1", new this.BABYLON.Vector3(10, 10, 0), scene);
// var light2 = new this.BABYLON.PointLight("light2", new this.BABYLON.Vector3(0, 1, -1), scene);

return scene;

};
}

this is my json file:
{
“stockwerke” :
[
{
“stockwerk”: “1.OG”,
“raeume”:
[
{
“nummer”: “1.2”,
“presentation”: {
“x”: 0,
“y”: 0,
“length”: 5,
“width”:2,
“walls”: {
“north”: “eInsideWallSimple”,
“south”: “eOutsideWallWindow1”,
“east”: “eInsideWallDoor”,
“west”: “eOusideWallWindow2”,
“floor”: “eFloor”,
“ceiling”: “eCeiling”
}
},

}

Thanks in advance

sebavan · July 4, 2019, 12:15pm

I am sorry, I still do not catch the issue Your code looks ok, are you trying to embed to position in the JSON ???

alphaShash · July 4, 2019, 12:16pm

{
“stockwerke” :
[
{
“stockwerk”: “1.OG”,
“raeume”:
[
{
“nummer”: “1.2”,
“presentation”: {
“x”: 0,
“y”: 0,
“length”: 5,
“width”:2,
“walls”: {
“north”: “eInsideWallSimple”,
“south”: “eOutsideWallWindow1”,
“east”: “eInsideWallDoor”,
“west”: “eOusideWallWindow2”,
“floor”: “eFloor”,
“ceiling”: “eCeiling”
}
},
},
{
“nummer”: “1.3”,
“presentation”: {
“x”: 10,
“y”: 10,
“length”: 5,
“width”:2,
“walls”: {
“north”: “eInsideWallSimple”,
“south”: “eOutsideWallWindow1”,
“east”: “eInsideWallDoor”,
“west”: “eOusideWallWindow2”,
“floor”: “eFloor”,
“ceiling”: “eCeiling”
}
},
},
]
},
]


}

this will b my 2nd json file that is i have added another room with different x and y axis according to this one more complete room should be created with the json x and y axis

sebavan · July 4, 2019, 12:21pm

you can create a TransformNode at xy from the JSON and attach all the element of the house to it as a parent ???

alphaShash · July 4, 2019, 1:07pm

hi,

do u mean something like this
this.roomService.getStockwerk(“1.OG”).subscribe(
stockwerk =>{
stockwerk.raeume.forEach(room =>{
var rearWall = this.wallFactory.createWall(scene, EWallType.eInsideWallDoor, room.presentation.length, room.presentation.width);
// TODO: rotate depends on north/south/east/west
var CoT = new this.BABYLON.TransformNode(“root”);
rearWall.parent = CoT;
rearWall.position.x = room.presentation.x ;
rearWall.position.y = room.presentation.y;

var frontWall = this.wallFactory.createWall(scene, EWallType.eOusideWallWindow2, room.presentation.length, room.presentation.width);
// frontWall.position = new this.BABYLON.TransformNode(room.presentation.x, room.presentation.y, 0);
var CoT = new this.BABYLON.TransformNode("root");
frontWall.parent =  CoT;
frontWall.position.x = room.presentation.x ;    
frontWall.position.y = room.presentation.y;


var rightWall = this.wallFactory.createWall(scene, EWallType.eInsideWallSimple, room.presentation.length, room.presentation.width);
// rightWall.position = new this.BABYLON.TransformNode(room.presentation.x, room.presentation.y, 0);
var CoT = new this.BABYLON.TransformNode("root");
rightWall.parent =  CoT;
rightWall.position.x = room.presentation.x ;    
rightWall.position.y = room.presentation.y;


var leftWall = this.wallFactory.createWall(scene, EWallType.eOutsideWallWindow1, room.presentation.length, room.presentation.width);
// leftWall.position = new this.BABYLON.TransformNode(room.presentation.x, room.presentation.y, 0);
var CoT = new this.BABYLON.TransformNode("root");
leftWall.parent =  CoT;
leftWall.position.x = room.presentation.x ;    
leftWall.position.y = room.presentation.y;


var floor = this.wallFactory.createWall(scene, EWallType.eFloor, room.presentation.length, room.presentation.width);
// floor.position = new this.BABYLON.TransformNode(room.presentation.x, room.presentation.y, 0);
var CoT = new this.BABYLON.TransformNode("root");
floor.parent =  CoT;
floor.position.x = room.presentation.x ;    
floor.position.y = room.presentation.y;


var ceiling = this.wallFactory.createWall(scene, EWallType.eCeiling, room.presentation.length, room.presentation.width);
    // ceiling.position = new this.BABYLON.TransformNode(room.presentation.x, room.presentation.y, 0);
    var CoT = new this.BABYLON.TransformNode("root");
    ceiling.parent =  CoT;
    ceiling.position.x = room.presentation.x ;    
    ceiling.position.y = room.presentation.y;
    
    });
  },
  errors =>{
    console.log(errors);
    alert("Fail to load room data");
  }
);

alphaShash · July 4, 2019, 1:08pm

would u mind please do giving me an example, it will really be helpful for me.

Thanks in advance

sebavan · July 4, 2019, 1:16pm

Please create some code similar to yours in the pg (we do not need the real data and boxes would do) and then the entire community can start hacking in to find the best approach.

But it might be similar to what you shared

alphaShash · July 4, 2019, 1:25pm

hi,

with normal boxes its working totally fine but when it comes up to createWall like mine its not working with positions.

Thanks in advance

alphaShash · July 4, 2019, 1:36pm

hi,

i have one more question as well please do guide me, is there any other way to give the index of x y

alphaShash · July 8, 2019, 11:33am

@sebavan

in the link above is my local git repository. please clone and checkout
u will get to know wat im asking for.

thanks in advance

sebavan · July 8, 2019, 12:39pm

@alphaShash we need a simpler repo in the Playground, I can not go and try to debug in your app as it would take a huge amount of time if we had to do it for all the post in the playground.

The complexity of looking at the backend+angular+ all the front end hides the real issue we are trying to solve.

Also the community will not be able to benefit from any knowledge here as they would also need to look at your sources.

I still tried to run the app locally but unfortunately ended up with an error:

alphaShash · July 9, 2019, 9:01am

@sebavan thanks for the reply but at first we need to instal npm package and then json server has to be started , the last step would be npm run start.

my question is , as u have already seen my code in wallfactory.service.ts i have defined the positions of the walls that would be MeshBuilder.ExtrudePolygon.

now in app.component.ts i would like to call the x and y axis position from data.json.

so that the complete room built in wallfactory.service.ts(which looks a cube but has 6 different meshbuilder.extrudepolygon) can be set in x,y =>(0,0) as shown down in nummer: 1.2, then when i can copy this json data again to create another room that would be nummer :1.3, but here the same room will be called and created but with different x,y => (1,0)
{
“nummer”: “1.2”,
“presentation”: {
“x”:0,
“y”:0,
“length”: 5,
“width”:2,
“walls”: {
“north”: “eInsideWallSimple”,
“south”: “eOutsideWallWindow1”,
“east”: “eInsideWallDoor”,
“west”: “eOusideWallWindow2”,
“floor”: “eFloor”,
“ceiling”: “eCeiling”
}
},
“personen”:
[
{
“name”: “Bill Gates”,
“login”: “blgates”,
“telefon”: “0”
}
],

                "attribute": 
                [
                    {
                        "temperatur": "21.5"
                    }
                ]
            },{
                "nummer": "1.3",
                "presentation": {
                    "x":1,
                    "y":0,
                    "length": 5,
                    "width":2,
                    "walls": {
                        "north": "eInsideWallSimple",
                        "south": "eOutsideWallWindow1",
                        "east": "eInsideWallDoor",
                        "west": "eOusideWallWindow2",
                        "floor": "eFloor",
                        "ceiling": "eCeiling"
                    }
                },
                "personen": 
                [
                    {
                        "name": "Bill Gates",
                        "login": "blgates",
                        "telefon": "0"
                    }
                ],
                
                "attribute": 
                [
                    {
                        "temperatur": "21.5"
                    }
                ]
            },

when i tried to perform using cube that would be CreateCube its possible to call n number of times as it is one complete mesh, but im working on 6 different meshes , please would u mind figuring it out and giving a solution it would b really helpful for me

JohnK · July 9, 2019, 10:14am

In this case it looks like a problem with something inside your createWall function

As @sebavan said it is very very unlikely anybody will work through long sections of code to debug someone else’s work and just describing what is happening is not enough to find errors.
In a simplified playground set up your the basic methods of createWall and call it with different data and see if it gets you the results you want.

Topic		Replies	Views
ExtrudePolygon position Questions	13	461	July 20, 2022
Reposition tubes and boxes outwards Questions	18	1040	August 29, 2019
Question about position and absolute position Questions	2	310	March 10, 2023
Can I change Mesh position against another Mesh? Questions	2	444	November 29, 2022
Model cloning positioning issues (complex) Questions	5	346	June 2, 2021

About positions

Related Topics