Add values to an object from another array of objects - javascript

So i have this scope with a predefined equipment:
$scope.equipment = [
{slot: 7, colspan: 2, rowspan: 1},
{slot: 0, colspan: 2, rowspan: 2},
{slot: 10, colspan: 2, rowspan: 1},
{slot: 8, colspan: 1, rowspan: 1},
{slot: 9, colspan: 1, rowspan: 1},
{slot: 6, colspan: 2, rowspan: 1},
{slot: 17, colspan: 1, rowspan: 1},
{slot: 18, colspan: 1, rowspan: 1},
{slot: 1, colspan: 2, rowspan: 4},
{slot: 19, colspan: 2, rowspan: 1},
{slot: 4, colspan: 2, rowspan: 4},
{slot: 5, colspan: 2, rowspan: 4},
{slot: 14, colspan: 1, rowspan: 1},
{slot: 15, colspan: 1, rowspan: 1},
{slot: 2, colspan: 2, rowspan: 2},
{slot: 16, colspan: 1, rowspan: 1},
{slot: 15, colspan: 1, rowspan: 1},
{slot: 3, colspan: 2, rowspan: 2}
];
As you can see, each slot has its own colspan and rowspan.
Than i have the equipment items array of objects:
$scope.equipmentItems = [
{
"id": 282,
"upgrade": 15,
"bind": 1,
"slot": 0,
"name": "Archridium Headpiece (BL)"
},
{
"id": 147,
"upgrade": 15,
"bind": 1,
"slot": 1,
"name": "Archridium Suit (BL)"
},
{
"id": 192,
"upgrade": 15,
"bind": 1,
"slot": 2,
"name": "Archridium Hands (BL)"
},
{
"id": 237,
"upgrade": 15,
"bind": 1,
"slot": 3,
"name": "Archridium Shoes (BL)"
},
{
"id": 3706,
"upgrade": 0,
"bind": 0,
"slot": 4
},
{
"id": 3707,
"upgrade": 0,
"bind": 0,
"slot": 5
},
{
"id": 3622,
"upgrade": 0,
"bind": 0,
"slot": 6
},
{
"id": 408,
"upgrade": 0,
"bind": 0,
"slot": 7,
"name": "Amulet Of Pain +7",
"description": "Protect you from enemy's attacks and to give more chance to do Critical Attacks. "
},
{
"id": 3194,
"upgrade": 0,
"bind": 0,
"slot": 8,
"name": "Ring of Luck +3",
"description": "Increases your Critical Hit Rate."
},
{
"id": 3193,
"upgrade": 0,
"bind": 0,
"slot": 9,
"name": "Critical Ring +3",
"description": "Increases your Critical Attack Damage."
},
{
"id": 2371,
"upgrade": 0,
"bind": 1,
"slot": 10,
"name": "Astral Board Card - K Red Crystal Edition",
"description": "A mysterious card that summons Astral Board, one of the valuable Honorable Age's legacies and the essence of Core Technology. - K Red Crystal Edition_$4#(Right click to use) "
},
{
"id": 3607,
"upgrade": 0,
"bind": 0,
"slot": 13
},
{
"id": 3607,
"upgrade": 0,
"bind": 0,
"slot": 14
},
: {
"id": 3604,
"upgrade": 0,
"bind": 0,
"slot": 15
},
{
"id": 3604,
"upgrade": 0,
"bind": 0,
"slot": 16
},
{
"id": 2568,
"upgrade": 0,
"bind": 4,
"slot": 17,
"name": "Leth Tyrant's Ring",
"description": "This ring contains the sealed power of Leth Tyrant, the extraordinary monster created by the Doctor. "
},
{
"id": 3184,
"upgrade": 0,
"bind": 4,
"slot": 18,
"name": "Killian's Ring",
"description": "This generates powerful energy from the combination of Killian's Dark Energy and the grudge of the Black Cat, the Guardian of Hell."
},
"{
"id": 2228,
"upgrade": 0,
"bind": 0,
"slot": 19,
"name": "Belt of Damp +4",
"description": "This belt reduces damage from intensified sword or magic attacks. "
}
];
As you can see each object key is basically the slot id.
Than i use this code
$scope.equipmentItems = _.sortBy($scope.equipmentItems, function(obj) {
return _.indexOf([7, 0, 10, 8, 9, 6, 17, 18, 1, 19, 4, 5, 14, 13, 2, 16, 15, 3], obj.slot);
});
to sort the equipment items keys to my specific order.
Anyway, what i want is the most performant piece of code that can add the values colspan and rowspan from $scope.equipment to $scope.equipmentItems WHERE $scope.equipment slot correspond to $scope.equipmentItems slot.

You can use Array functions. Something like this:
let merged = equipmentItems.map(item=>{
item.anotherKey = equipment.find(it=> it.slot == item.slot);
return item;
});
If you don't like this, or you can't use those methods you can use forEach
equipmentItems.forEach(function(item){
equipment.forEach(function(item_){
if(item.slot == item_.slot){
item.someKey = item_;
}
});
});

Related

How to group by array object and create array with value key javascript

How to group by array object from values to create new array object of values
Input
var promotions = [
{
"promotionID": 2,
"id": 1,
"qty": 1,
"productID": 1,
"product": "Nu Milk Tea 330ml",
"operator": null
}, {
"promotionID": 2,
"id": 2,
"qty": 2,
"productID": 2,
"product": "Product testing 2",
"operator": 1
}, {
"promotionID": 2,
"id": 3,
"qty": 3,
"productID": 3,
"product": "Golda Coffee Dolce Latte 200ml",
"operator": 2
}, {
"promotionID": 3,
"id": 4,
"qty": 8,
"productID": 54,
"product": "Masker Skrineer 3ply Motif 5pcs",
"operator": null
}, {
"promotionID": 3,
"id": 5,
"qty": 5,
"productID": 53,
"product": "Masker Skrineer 1ply Grey 5pcs",
"operator": 2
}, {
"promotionID": 3,
"id": 6,
"qty": 5,
"productID": 52,
"product": "Oronamin C Drink 120ml",
"operator": 1
}]
I want to make a new array of car objects that's grouped by promotionID
Expected Output
[
{
"promotionID": 2,
"data" : [
{
"promotionID": 2,
"id": 1,
"qty": 1,
"productID": 1,
"product": "Nu Milk Tea 330ml",
"operator": null
}, {
"promotionID": 2,
"id": 2,
"qty": 2,
"productID": 2,
"product": "Product testing 2",
"operator": 1
}, {
"promotionID": 2,
"id": 3,
"qty": 3,
"productID": 3,
"product": "Golda Coffee Dolce Latte 200ml",
"operator": 2
}
]
},
{
"promotionID": 3,
"data" : [
{
"promotionID": 3,
"id": 4,
"qty": 8,
"productID": 54,
"product": "Masker Skrineer 3ply Motif 5pcs",
"operator": null
}, {
"promotionID": 3,
"id": 5,
"qty": 5,
"productID": 53,
"product": "Masker Skrineer 1ply Grey 5pcs",
"operator": 2
}, {
"promotionID": 3,
"id": 6,
"qty": 5,
"productID": 52,
"product": "Oronamin C Drink 120ml",
"operator": 1
}
]
}
]
You could use reduce to group promotion by promotionId and then map through the entries to get the final result
var promotions = [
{
promotionID: 2,
id: 1,
qty: 1,
productID: 1,
product: 'Nu Milk Tea 330ml',
operator: null
},
{
promotionID: 2,
id: 2,
qty: 2,
productID: 2,
product: 'Product testing 2',
operator: 1
},
{
promotionID: 2,
id: 3,
qty: 3,
productID: 3,
product: 'Golda Coffee Dolce Latte 200ml',
operator: 2
},
{
promotionID: 3,
id: 4,
qty: 8,
productID: 54,
product: 'Masker Skrineer 3ply Motif 5pcs',
operator: null
},
{
promotionID: 3,
id: 5,
qty: 5,
productID: 53,
product: 'Masker Skrineer 1ply Grey 5pcs',
operator: 2
},
{
promotionID: 3,
id: 6,
qty: 5,
productID: 52,
product: 'Oronamin C Drink 120ml',
operator: 1
}
]
const res = Array.from(
promotions
.reduce((acc, promotion) => {
acc.set(
promotion.promotionID,
(acc.get(promotion.promotionID) || []).concat(promotion)
)
return acc
}, new Map)
.entries(),
([promotionId, data]) => ({ promotionId, data })
)
console.log(res)
This is my answer
var promotions = [
{
promotionID: 2,
id: 1,
qty: 1,
productID: 1,
product: "Nu Milk Tea 330ml",
operator: null,
},
{
promotionID: 2,
id: 2,
qty: 2,
productID: 2,
product: "Product testing 2",
operator: 1,
},
{
promotionID: 2,
id: 3,
qty: 3,
productID: 3,
product: "Golda Coffee Dolce Latte 200ml",
operator: 2,
},
{
promotionID: 3,
id: 4,
qty: 8,
productID: 54,
product: "Masker Skrineer 3ply Motif 5pcs",
operator: null,
},
{
promotionID: 3,
id: 5,
qty: 5,
productID: 53,
product: "Masker Skrineer 1ply Grey 5pcs",
operator: 2,
},
{
promotionID: 3,
id: 6,
qty: 5,
productID: 52,
product: "Oronamin C Drink 120ml",
operator: 1,
},
];
const objectPromotion = {};
for (index in promotions) {
const dataPromotion = objectPromotion[promotions[index].promotionID];
console.log("dataPromotion", dataPromotion)
if (dataPromotion) {
dataPromotion.push(promotions[index]);
} else {
objectPromotion[promotions[index].promotionID] = [promotions[index]];
}
}
const result = Object.keys(objectPromotion).map((item) => {
return {
promotionID: item,
data: objectPromotion[item],
};
});
console.log("result", result)
you should use lodash like this.
const _ = require('lodash');
let filteredPromotions=_.groupBy(promotions,'promotionID');
output:
{
'2': [
{
promotionID: 2,
id: 1,
qty: 1,
productID: 1,
product: 'Nu Milk Tea 330ml',
operator: null
},
{
promotionID: 2,
id: 2,
qty: 2,
productID: 2,
product: 'Product testing 2',
operator: 1
},
{
promotionID: 2,
id: 3,
qty: 3,
productID: 3,
product: 'Golda Coffee Dolce Latte 200ml',
operator: 2
}
],
'3': [
{
promotionID: 3,
id: 4,
qty: 8,
productID: 54,
product: 'Masker Skrineer 3ply Motif 5pcs',
operator: null
},
{
promotionID: 3,
id: 5,
qty: 5,
productID: 53,
product: 'Masker Skrineer 1ply Grey 5pcs',
operator: 2
},
{
promotionID: 3,
id: 6,
qty: 5,
productID: 52,
product: 'Oronamin C Drink 120ml',
operator: 1
}
]
}
to get exact output add those lines:
filteredPropomotions = Object.keys(filteredPropomotions).map((key, index)=> {return{promotionID:key,data:filteredPropomotions[key]}}
);
output:
[
{
"promotionID": 2,
"data" : [
{
"promotionID": 2,
"id": 1,
"qty": 1,
"productID": 1,
"product": "Nu Milk Tea 330ml",
"operator": null
}, {
"promotionID": 2,
"id": 2,
"qty": 2,
"productID": 2,
"product": "Product testing 2",
"operator": 1
}, {
"promotionID": 2,
"id": 3,
"qty": 3,
"productID": 3,
"product": "Golda Coffee Dolce Latte 200ml",
"operator": 2
}
]
},
{
"promotionID": 3,
"data" : [
{
"promotionID": 3,
"id": 4,
"qty": 8,
"productID": 54,
"product": "Masker Skrineer 3ply Motif 5pcs",
"operator": null
}, {
"promotionID": 3,
"id": 5,
"qty": 5,
"productID": 53,
"product": "Masker Skrineer 1ply Grey 5pcs",
"operator": 2
}, {
"promotionID": 3,
"id": 6,
"qty": 5,
"productID": 52,
"product": "Oronamin C Drink 120ml",
"operator": 1
}
]
}
]

How can I iterate over this object to to get a new object?

I am relatively new to Javascript, and just learned basic for loops and for in loops. How can I iterate over this object to get certain keys and values? there are a bunch of nested objects in objects, so i am kind of confused. I was thinking of using some sort of "Object...()" method, but not sure which one to use.
desired output outcome is an object with the given champion key, followed by the champion id/name = {"266": "Aatrox", "103" : "Ahri"}
example input below
"type": "champion",
"format": "standAloneComplex",
"version": "10.16.1",
"data": {
"Aatrox": {
"version": "10.16.1",
"id": "Aatrox",
"key": "266",
"name": "Aatrox",
"title": "the Darkin Blade",
"blurb": "Once honored defenders of Shurima against the Void, Aatrox and his brethren would eventually become an even greater threat to Runeterra, and were defeated only by cunning mortal sorcery. But after centuries of imprisonment, Aatrox was the first to find...",
"info": {
"attack": 8,
"defense": 4,
"magic": 3,
"difficulty": 4
},
"image": {
"full": "Aatrox.png",
"sprite": "champion0.png",
"group": "champion",
"x": 0,
"y": 0,
"w": 48,
"h": 48
},
"tags": [
"Fighter",
"Tank"
],
"partype": "Blood Well",
"stats": {
"hp": 580,
"hpperlevel": 90,
"mp": 0,
"mpperlevel": 0,
"movespeed": 345,
"armor": 38,
"armorperlevel": 3.25,
"spellblock": 32.1,
"spellblockperlevel": 1.25,
"attackrange": 175,
"hpregen": 3,
"hpregenperlevel": 1,
"mpregen": 0,
"mpregenperlevel": 0,
"crit": 0,
"critperlevel": 0,
"attackdamage": 60,
"attackdamageperlevel": 5,
"attackspeedperlevel": 2.5,
"attackspeed": 0.651
}
},
"Ahri": {
"version": "10.16.1",
"id": "Ahri",
"key": "103",
"name": "Ahri",
"title": "the Nine-Tailed Fox",
"blurb": "Innately connected to the latent power of Runeterra, Ahri is a vastaya who can reshape magic into orbs of raw energy. She revels in toying with her prey by manipulating their emotions before devouring their life essence. Despite her predatory nature...",
"info": {
"attack": 3,
"defense": 4,
"magic": 8,
"difficulty": 5
},
"image": {
"full": "Ahri.png",
"sprite": "champion0.png",
"group": "champion",
"x": 48,
"y": 0,
"w": 48,
"h": 48
},
"tags": [
"Mage",
"Assassin"
],
"partype": "Mana",
"stats": {
"hp": 526,
"hpperlevel": 92,
"mp": 418,
"mpperlevel": 25,
"movespeed": 330,
"armor": 20.88,
"armorperlevel": 3.5,
"spellblock": 30,
"spellblockperlevel": 0.5,
"attackrange": 550,
"hpregen": 6.5,
"hpregenperlevel": 0.6,
"mpregen": 8,
"mpregenperlevel": 0.8,
"crit": 0,
"critperlevel": 0,
"attackdamage": 53.04,
"attackdamageperlevel": 3,
"attackspeedperlevel": 2,
"attackspeed": 0.668
}
}```
const obj = {
name: 'Sam',
old: 30,
nested: {
data: 'ABC',
time: '3:15'
}
}
for(let i in obj){
console.log(i); //returns values
console.log(obj[i]); //returns keys
for(let j in obj[i]){
console.log(j); //returns values of nested 2d level
console.log(obj[i][j]); //returns keys of nested 2d level
}
}

Reduce array of objects by user_id and sum certain values

I have an array of objects that looks like this:
"data": [
{ "workout_id": 1, "user_id": 1, "shotLocation": 27, "shotAttempts": 20,"shotsMade": 19, "id": 1 },
{ "workout_id": 2, "user_id": 1, "shotLocation": 1, "shotAttempts": 10, "shotsMade": 9, "id": 2 },
{ "workout_id": 2, "user_id": 1, "shotLocation": 10, "shotAttempts": 10, "shotsMade": 7, "id": 3 },
{ "workout_id": 2, "user_id": 1, "shotLocation": 1, "shotAttempts": 30, "shotsMade": 29, "id": 4 },
{ "workout_id": 3, "user_id": 5, "shotLocation": 1, "shotAttempts": 10, "shotsMade": 9, "id": 5 },
{ "workout_id": 4, "user_id": 6, "shotLocation": 1, "shotAttempts": 30, "shotsMade": 15, "id": 6 },
{ "workout_id": 4, "user_id": 6, "shotLocation": 2, "shotAttempts": 20, "shotsMade": 14, "id": 7 }
]
I would like to create a new array of objects where I
reduce the user_ids to each unique user
then calculate the total shotAttempts and shotsMade for each user
like this:
"dataTotals" : [
{"id": 1, "user_id": 1, "shotAttempts": 90, "shotsMade": 64}
{"id": 2, "user_id": 5, "shotAttempts": 10, "shotsMade": 9}
{"id": 3, "user_id": 6, "shotAttempts": 50, "shotsMade": 29}
I plan on iterating over this new array of objects with a .map function to populate a leaderboard as more users record their data.
I've tried several different ways to achieve this based on what I've read about the .map and .reduce methods, as well as searching here and found something that's close, but it returns an object as indicated below.
like this:
// create new object to store results in
let newObj = {};
// loop through user objects
this.state.shotlogs.forEach(function(shotlog){
// check if user_id has already been added to newObj
if(!newObj[shotlog.user_id]){
// If it is the first time seeing this user_id
// we need to add shots attempted and shots made to prevent errors
newObj[shotlog.user_id] = {};
newObj[shotlog.user_id]['user_id'] = shotlog.user_id;
newObj[shotlog.user_id]['shotAttempts'] = 0;
newObj[shotlog.user_id]['shotsMade'] = 0;
}
// add shots attempted and made to newObj for this user
newObj[shotlog.user_id]['shotAttempts'] += shotlog.shotAttempts
newObj[shotlog.user_id]['shotsMade'] += shotlog.shotsMade
})
but this returns an object that looks like this and not an array of objects like above:
{
1: {user_id: 1, shotAttempts: 70, shotsMade: 64}
5: {user_id: 5, shotAttempts: 10, shotsMade: 9}
6: {user_id: 6, shotAttempts: 50, shotsMade: 29}
}
Any help for this new coder is greatly appreciated!!
const data = [
{ workout_id: 1, user_id: 1, shotLocation: 27, shotAttempts: 20, shotsMade: 19, id: 1 },
{ workout_id: 2, user_id: 1, shotLocation: 1, shotAttempts: 10, shotsMade: 9, id: 2 },
{ workout_id: 2, user_id: 1, shotLocation: 10, shotAttempts: 10, shotsMade: 7, id: 3 },
{ workout_id: 2, user_id: 1, shotLocation: 1, shotAttempts: 30, shotsMade: 29, id: 4 },
{ workout_id: 3, user_id: 5, shotLocation: 1, shotAttempts: 10, shotsMade: 9, id: 5 },
{ workout_id: 4, user_id: 6, shotLocation: 1, shotAttempts: 30, shotsMade: 15, id: 6 },
{ workout_id: 4, user_id: 6, shotLocation: 2, shotAttempts: 20, shotsMade: 14, id: 7 }
];
const shooters = data.reduce(
(results, current) => ({
...results,
[current.user_id]: {
user_id: current.user_id,
shotAttempts: current.shotAttempts + (results[current.user_id] ? results[current.user_id].shotAttempts : 0),
shotsMade: current.shotsMade + (results[current.user_id] ? results[current.user_id].shotsMade : 0)
}
}),
{}
);
console.log(shooters);
You can use Array.reduce, Object.values with ES6 destructuring and solve this in a concise manner:
const data = [{ "workout_id": 1, "user_id": 1, "shotLocation": 27, "shotAttempts": 20, "shotsMade": 19, "id": 1 }, { "workout_id": 2, "user_id": 1, "shotLocation": 1, "shotAttempts": 10, "shotsMade": 9, "id": 2 }, { "workout_id": 2, "user_id": 1, "shotLocation": 10, "shotAttempts": 10, "shotsMade": 7, "id": 3 }, { "workout_id": 2, "user_id": 1, "shotLocation": 1, "shotAttempts": 30, "shotsMade": 29, "id": 4 }, { "workout_id": 3, "user_id": 5, "shotLocation": 1, "shotAttempts": 10, "shotsMade": 9, "id": 5 }, { "workout_id": 4, "user_id": 6, "shotLocation": 1, "shotAttempts": 30, "shotsMade": 15, "id": 6 }, { "workout_id": 4, "user_id": 6, "shotLocation": 2, "shotAttempts": 20, "shotsMade": 14, "id": 7 } ]
const result = data.reduce((r,{workout_id, user_id, shotAttempts, shotsMade}) => {
r[user_id] = r[user_id] || {id: workout_id, user_id, shotAttempts: 0, shotsMade: 0}
r[user_id].shotAttempts += shotAttempts
r[user_id].shotsMade += shotsMade
return r
}, {})
console.log(Object.values(result))
You can use Array.prototype.reduce()
Code:
const data = [{ "workout_id": 1, "user_id": 1, "shotLocation": 27, "shotAttempts": 20,"shotsMade": 19, "id": 1 },{ "workout_id": 2, "user_id": 1, "shotLocation": 1, "shotAttempts": 10, "shotsMade": 9, "id": 2 },{ "workout_id": 2, "user_id": 1, "shotLocation": 10, "shotAttempts": 10, "shotsMade": 7, "id": 3 },{ "workout_id": 2, "user_id": 1, "shotLocation": 1, "shotAttempts": 30, "shotsMade": 29, "id": 4 },{ "workout_id": 3, "user_id": 5, "shotLocation": 1, "shotAttempts": 10, "shotsMade": 9, "id": 5 },{ "workout_id": 4, "user_id": 6, "shotLocation": 1, "shotAttempts": 30, "shotsMade": 15, "id": 6 },{ "workout_id": 4, "user_id": 6, "shotLocation": 2, "shotAttempts": 20, "shotsMade": 14, "id": 7 }];
const dataTotals = Object.values(data.reduce((a, c) => {
if (!a[c.user_id]) {
a[c.user_id] = {
id: c.workout_id,
user_id: c.user_id,
shotAttempts: c.shotAttempts,
shotsMade: c.shotsMade
};
} else {
a[c.user_id].shotAttempts += c.shotAttempts;
a[c.user_id].shotsMade += c.shotsMade;
}
return a;
}, {}));
console.log(dataTotals);

How to select multiple elements with xPath?

I'm using defiantjs to select elements in an object. This is my object:
{
"name": "Retail Sales",
"weight": 10,
"length": 6,
"type": "retailSales",
"rows": [
{
"dealerEvaluationHistoryID": 0,
"performanceDealerMappingDetailID": 14,
"month": 1,
"plan": 0,
"actual": 0,
"weight": 0,
"pelanggaranWilayah": 0
},
{
"dealerEvaluationHistoryID": 0,
"performanceDealerMappingDetailID": 14,
"month": 2,
"plan": 0,
"actual": 0,
"weight": 0,
"pelanggaranWilayah": 0
},
{
"dealerEvaluationHistoryID": 0,
"performanceDealerMappingDetailID": 14,
"month": 3,
"plan": 0,
"actual": 0,
"weight": 0,
"pelanggaranWilayah": 0
}
]
}
How do I select all month, plan, actual and weight inside each objects in row[]?
I'd like an output like this:
[[1,0,0,0],[2,0,0,0],[3,0,0,0]]
I can do //rows/month and //rows/plan but don't know how to do both.
You can use map method which applies a callback function for every item in the array.
Read more about map method.
let obj={
"name": "Retail Sales",
"weight": 10,
"length": 6,
"type": "retailSales",
"rows": [
{
"dealerEvaluationHistoryID": 0,
"performanceDealerMappingDetailID": 14,
"month": 1,
"plan": 0,
"actual": 0,
"weight": 0,
"pelanggaranWilayah": 0
},
{
"dealerEvaluationHistoryID": 0,
"performanceDealerMappingDetailID": 14,
"month": 2,
"plan": 0,
"actual": 0,
"weight": 0,
"pelanggaranWilayah": 0
},
{
"dealerEvaluationHistoryID": 0,
"performanceDealerMappingDetailID": 14,
"month": 3,
"plan": 0,
"actual": 0,
"weight": 0,
"pelanggaranWilayah": 0
}
]
}
let array=obj.rows.map(function(row){
return [row.month,row.plan,row.actual,row.weight];
});
console.log(JSON.stringify(array));

What is the correct way to edit the vertices of a box geometry?

So I'm editing the vertices of many box geometries to create unique shapes, or to modify the heights of the geometries. It works fine and my scenes look correct (here's an example http://imgur.com/sSx1bPk).
However, when I use the ObjectExporter and try to load the scene into http://threejs.org/editor/, none of my vertex changes are present. Also when I try to load the scene.json file into blender, I get an error (which I can't seem to copy/paste) which lists KeyError:'vertices'
Basically, I built a UI to edit the vertices of any box geometry, I save these edits into a matrix, then cross check that matrix when loading the scene. My function looks like this
setBaseTileVertices:function()
{
var scope = this;
scope.baseTiles.children.forEach(function(tile , t)
{
tile.geometry.vertices.forEach(function(vertex , v)
{
vertex.x = (tile.userData.vertices[v].x) ? tile.userData.vertices[v].x : vertex.x;
vertex.y = (tile.userData.vertices[v].y) ? tile.userData.vertices[v].y : vertex.y;
vertex.z = (tile.userData.vertices[v].z) ? tile.userData.vertices[v].z : vertex.z;
});
});
}
Is there some other more correct way to edit vertices so that the changes will be recognised by the editor and/or Blender? Am I using the right exporter? I tried used the THREE.SceneExporter but got errors as indicated here Three.js SceneExporter getting Uncaught Syntax error
Edit
After a bit of investigation, I've seen that in my output JSON, all my box geometries have a similar matrix value, while a square pyramid I created has the correct matrix. I guess I need to update the matrix of each geometry when I modify it. Not too sure how to do that right now but I think I'm on the right track.
Edit 2
Well it seems like the matrices for each of my geometries are getting updated, so I don't know what's going on now. The pyramid I've created renders fine, but all the box geometries just become flat, with no change to their vertices. Here's an example of how it looks in the editor http://imgur.com/oGury4e note that the bounding box helper knows the height of baseTiles which is an Object3D that contains each tile. It can only know this if its factoring in their edited vertices.
Edit 3
So I've done a test and modified lines 65 - 74 of ObjectExporter.js so that they now read
} else if ( geometry instanceof THREE.BoxGeometry ) {
data.type = 'Geometry';
data.data = geometryExporter.parse( geometry );
delete data.data.metadata;
//handleParameters( [ 'width', 'height', 'depth', 'widthSegments', 'heightSegments', 'depthSegments' ] );}
Now my level looks correct in terms of shape in the editor http://imgur.com/IDlYCJ6 however, seems like my colours or materials are not getting translated over? Everything is black, whereas the +Y faces of the geometries should be coloured green.
As requested here's an example from exporting with the non-edited ObjectExporter
{
"metadata": {
"version": 4.3,
"type": "Object",
"generator": "ObjectExporter"
},
"geometries": [{
"uuid": "25437534-318D-4BB9-9E97-207E390F1A8D",
"type": "BoxGeometry",
"width": 64,
"height": 32,
"depth": 64
}],
"materials": [{
"type": "MeshFaceMaterial",
"materials": [{
"metadata": {
"version": 4.2,
"type": "material",
"generator": "MaterialExporter"
},
"uuid": "BCFDD918-A69C-4443-806A-A46E356C272C",
"type": "MeshBasicMaterial",
"color": 0,
"opacity": 1,
"transparent": false,
"wireframe": false
}, {
"metadata": {
"version": 4.2,
"type": "material",
"generator": "MaterialExporter"
},
"uuid": "4969265D-D0B2-4E4A-A60A-AB20EC541FD5",
"type": "MeshBasicMaterial",
"color": 0,
"opacity": 1,
"transparent": false,
"wireframe": false
}, {
"metadata": {
"version": 4.2,
"type": "material",
"generator": "MaterialExporter"
},
"uuid": "141153C7-C284-4120-9DB9-8386F4C90496",
"type": "MeshBasicMaterial",
"color": 6127158,
"opacity": 1,
"transparent": false,
"wireframe": false
}, {
"metadata": {
"version": 4.2,
"type": "material",
"generator": "MaterialExporter"
},
"uuid": "B2CDDAE4-B690-41F7-84EC-377C73A7FF21",
"type": "MeshBasicMaterial",
"color": 6127158,
"opacity": 1,
"transparent": false,
"wireframe": false
}, {
"metadata": {
"version": 4.2,
"type": "material",
"generator": "MaterialExporter"
},
"uuid": "0B21CD67-D4FA-447E-9CA1-56CA755C0872",
"type": "MeshBasicMaterial",
"color": 0,
"opacity": 1,
"transparent": false,
"wireframe": false
}, {
"metadata": {
"version": 4.2,
"type": "material",
"generator": "MaterialExporter"
},
"uuid": "3089DC93-85E8-42CD-BBE9-2D2A45441AB2",
"type": "MeshBasicMaterial",
"color": 0,
"opacity": 1,
"transparent": false,
"wireframe": false
}]
}],
"object": {
"uuid": "DE6BC181-ECA5-4B7A-85EA-64387C8B04E1",
"name": "tile_5_10",
"type": "Mesh",
"geometry": "25437534-318D-4BB9-9E97-207E390F1A8D",
"matrix": [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 640, 0, 320, 1]
}
}
And here is an example of the JSON (it's a different object so some values may be different) with my edits (box geometry is parsed as geometry, if I parse the entire scene like this, it gives this result http://imgur.com/IDlYCJ6)
{
"metadata": {
"version": 4.3,
"type": "Object",
"generator": "ObjectExporter"
},
"geometries": [{
"uuid": "4E8EFB7F-8225-4EAA-AE69-C25B23DDE642",
"type": "Geometry",
"data": {
"vertices": [32, 88, 32, 32, 88, -32, 32, -16, 32, 32, -16, -32, -32, 112, -32, -32, 112, 32, -32, -16, -32, -32, -16, 32],
"normals": [1, 0, 0, -1, 0, 0, 0, 1, 0, 0, -1, 0, 0, 0, 1, 0, 0, -1],
"uvs": [
[0, 1, 0, 0, 1, 1, 1, 0]
],
"faces": [56, 0, 2, 1, 0, 1, 2, 0, 0, 0, 0, 56, 2, 3, 1, 1, 3, 2, 0, 0, 0, 0, 56, 4, 6, 5, 0, 1, 2, 1, 1, 1, 1, 56, 6, 7, 5, 1, 3, 2, 1, 1, 1, 1, 56, 4, 5, 1, 0, 1, 2, 2, 2, 2, 2, 56, 5, 0, 1, 1, 3, 2, 2, 2, 2, 2, 56, 7, 6, 2, 0, 1, 2, 3, 3, 3, 3, 56, 6, 3, 2, 1, 3, 2, 3, 3, 3, 3, 56, 5, 7, 0, 0, 1, 2, 4, 4, 4, 4, 56, 7, 2, 0, 1, 3, 2, 4, 4, 4, 4, 56, 1, 3, 4, 0, 1, 2, 5, 5, 5, 5, 56, 3, 6, 4, 1, 3, 2, 5, 5, 5, 5]
}
}],
"materials": [{
"type": "MeshFaceMaterial",
"materials": [{
"metadata": {
"version": 4.2,
"type": "material",
"generator": "MaterialExporter"
},
"uuid": "E1E6A4F7-06B0-41E2-8131-F2E103D8F7F7",
"type": "MeshBasicMaterial",
"color": 0,
"opacity": 1,
"transparent": false,
"wireframe": false
}, {
"metadata": {
"version": 4.2,
"type": "material",
"generator": "MaterialExporter"
},
"uuid": "7D777F70-D279-4112-AD6F-FBAFCE1EE9E2",
"type": "MeshBasicMaterial",
"color": 0,
"opacity": 1,
"transparent": false,
"wireframe": false
}, {
"metadata": {
"version": 4.2,
"type": "material",
"generator": "MaterialExporter"
},
"uuid": "5BBC767A-F130-4F4D-8A5C-489C40D2F698",
"type": "MeshBasicMaterial",
"color": 6127158,
"opacity": 1,
"transparent": false,
"wireframe": false
}, {
"metadata": {
"version": 4.2,
"type": "material",
"generator": "MaterialExporter"
},
"uuid": "F4F167E2-013E-4A6A-B7F1-80246DD15023",
"type": "MeshBasicMaterial",
"color": 6127158,
"opacity": 1,
"transparent": false,
"wireframe": false
}, {
"metadata": {
"version": 4.2,
"type": "material",
"generator": "MaterialExporter"
},
"uuid": "CA2ADC0E-F20B-485B-B5D3-DE9B58A733B0",
"type": "MeshBasicMaterial",
"color": 0,
"opacity": 1,
"transparent": false,
"wireframe": false
}, {
"metadata": {
"version": 4.2,
"type": "material",
"generator": "MaterialExporter"
},
"uuid": "7BC988E6-B3A0-4BF2-B360-1C0F4976436F",
"type": "MeshBasicMaterial",
"color": 0,
"opacity": 1,
"transparent": false,
"wireframe": false
}]
}],
"object": {
"uuid": "809D131E-3F34-4DCB-8304-EDCA144BF1A6",
"name": "tile_9_9",
"type": "Mesh",
"geometry": "4E8EFB7F-8225-4EAA-AE69-C25B23DDE642",
"matrix": [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 576, 0, 576, 1]
}
}
Any ideas?
After a bunch of research, I've found that currently, the correct way to do this is to convert your BoxGeometry objects to BufferGeometry or regular Geometry objects. You can do this after editing their vertices.
So something like this
var box = new THREE.BoxGeometry(64 , 32 , 64);
box.verticesNeedUpdate = true;
box.vertices[0].y = 128;
box.vertices[1].y = 128;
var geometry = new THREE.BufferGeometry().fromGeometry(box);
//or alternatively
var geometry = new THREE.Geometry();
geometry.merge(box);
Now, if you export the object using the ObjectExporter it should load into http://threejs.org/editor fine.

Categories