I am new to Threejs.
I am trying to understand the JSON structure for JSON Object Scene format 4.
"object": {
"uuid": "89529CC6-CBAC-412F-AFD1-FEEAE785BA19",
"type": "Scene",
"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],
"children": [
{
"uuid": "33FA38D9-0AAC-4657-9BBE-5E5780DDFB2F",
"name": "Box 1",
"type": "Mesh",
"geometry": "C3BF1E70-0BE7-4E6D-B184-C9F1E84A3423",
"material": "87D95D6C-6BB4-4B8F-8166-A3A6945BA5E3",
"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1]
},
{
"uuid": "16F2E381-2B73-44C4-A7BB-38D7E1CD2381",
"name": "PointLight 1",
"type": "PointLight",
"color": 16777215,
"intensity": 1,
"distance": 0,
"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,100,200,150,1]
}
]
}
"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,100,200,150,1]
Does this matrix depicts this: "matrix": [xx,xy,xz,?,yx,yy,yz,?,zx,zy,zz,?,px,py,pz,?]
What are the "?" in this matrix?
The matrix property in the JSON refers to the Object3D.matrix property which is in fact a 4x4 matrix.
The Matrix4 class in three.js stores its numbers in the elements property. It is an array which holds the numbers in column-major order. When a matrix is serialized/deserialized, this order is maintained.
So what you see in the JSON is a serialized 4x4 matrix in column-major order.
Related
I have an index where the records are stored in the following format:
"_source": {
"name": "ACME Pallets",
"about": null,
"slug": "acme-pallets",
"serviceAreas": [
{
"admin1": "usa",
"admin2": null,
"admin3": null,
"admin4": null,
"countryCode": "US",
"googlePlaceId": null,
"locality": null,
"selectedLevel": "admin1"
}
],
"id": "fadsflsjdfkk3234234",
"addresses": [
{
"address1": "4342 Dietrich Rd",
"address2": null,
"city": "San Antonio",
"countryCode": "US",
"latitude": 29.44122,
"longitude": -98.34404,
"primary": true,
"name": "office",
"postal": "78219",
"province": "TX",
"location": {
"lat": 29.44156,
"lon": -98.37704
}
}
]
}
I am trying to return results from this index where the records are sorted by distance to the search point I pass in. My sort config being passed in looks like this:
_geo_distance: {
'addresses.location': { lat: 31.75917, lon: -106.48749 },
order: 'asc',
unit: 'mi',
mode: 'min'
}
The results I receive back are not sorted according to distance. If I manually plot out the individual locations on a map and the search pin passed in, I can see that the sorting is out of order.
If I pass in a sorting config to my search to sort by alphabetically order or to sort by relevance (aka _score), the sorting returned is correct.
Does anyone know why ES might be returning my results incorrectly when sorting by distance?
addresses is an array in my index. Each object inside of addresses has a property called location of type geo_point.
From all the documentation that I've read, passing 'addresses.location': { lat: 31.75917, lon: -106.48749 } into the search should work, but it doesn't. ES should be smart enough to find the location geo point in each object and use that as the reference when calculating the distance. If there are more than one object inside of the addresses array, then ES by default should get the center point of all the objects inside of addresses and use that to calculate the distance from the search point.
In my case, I don't have any data where addresses has more than one object. I ended up creating a location geo_point property outside of the addresses property during index build and then passing in location: { lat: 31.75917, lon: -106.48749 } for the search. This made ES sort results based on distance correctly.
What my new index looks like with the added location property:
"_source": {
"name": "ACME Pallets",
"about": null,
"slug": "acme-pallets",
"serviceAreas": [
{
"admin1": "usa",
"admin2": null,
"admin3": null,
"admin4": null,
"countryCode": "US",
"googlePlaceId": null,
"locality": null,
"selectedLevel": "admin1"
}
],
"id": "fadsflsjdfkk3234234",
"addresses": [
{
"address1": "4342 Dietrich Rd",
"address2": null,
"city": "San Antonio",
"countryCode": "US",
"latitude": 29.44122,
"longitude": -98.34404,
"primary": true,
"name": "office",
"postal": "78219",
"province": "TX",
"location": {
"lat": 29.44156,
"lon": -98.37704
}
}
]
"location": {
"lat": 29.44156,
"lon": -98.37704
}
}
I have the following scenario: I have an index with all possible ads of my platform. These ads contain an object with coordinates (latitude/longitude).
{
"id": "123",
"slug": "my-ad-slug",
"location": {
"coordinates": {
"latitude": 1.123456,
"longitude": 1.987654
}
}
I also have another index with some locations and their polygons and shapes for geolocation searches.
{
"id": "456",
"name": "my location",
"geo_location": {
"type": "Polygon",
"coordinates": [...]
}
}
My question is: how can I query all ads that are within a certain polygon, since I have two different indexes in this case? Do you see an easy way on doing so?
Thanks y'all!
Using rotated labels on category X axis. (Real graph uses long names but results are the same.)
A: Alignment of axis labels and their data points is fine without label rotation.
B: Labels are not aligned when rotated.
The only difference between A and B graph coding is the addition of "labels":{"rotation":90} in the xAxes renderer.
How can alignment be fixed?
var chart =am4core.createFromConfig({
"colors": { "list": ["#DB3", "#000", "#888"] },
"data": [$data],
"legend": { "markers":{"width":20, "height":10},
"position":"top",
"useDefaultMarker":true
},
"series": [
{ "dataFields": { "categoryX":"X", "valueY":"Y1" },
"name": "[font-size:16px;font-weight:600;]{$n1}[/]",
"strokeWidth": 2,
"type": "LineSeries"
},
{ "dataFields": { "categoryX":"X", "valueY":"Y2" },
"name": "[font-size:16px;font-weight:600;]{$n2}[/]",
"strokeWidth": 2,
"type": "LineSeries"
},
{ "dataFields": { "categoryX":"X", "valueY":"Y3" },
"name": "[font-size:16px;font-weight:600;]others[/]",
"strokeWidth": 2,
"type": "LineSeries"
}
],
"xAxes": [
{ "dataFields": { "category": "X" },
"renderer": { "minGridDistance":11, "labels":{"rotation":90}},
"type": "CategoryAxis"
}
],
"yAxes": [
{ "renderer": {"minGridDistance":15},
"title": {"text": "[font-size:16px;font-weight:600;]Values[/]"},
"type": "ValueAxis"
}]
}, "line", am4charts.XYChart);
LABELS renderer needed "verticalCenter":"middle" with rotation.
I don't know how many other things I tried!
While amcharts shows the India map correctly (showing the disputed regions as part of India) when displaying only India (http://jsfiddle.net/zxhseguw/5/)
"dataProvider": {
"map": "indiaLow",
"areas": [ {
"id": "IN-KA",
"value": 4447100,
}, {
"id": "IN-UP",
"value": 38763
}]
},
it shades it differently when rendering it on world map (http://jsfiddle.net/zxhseguw/6/)
"dataProvider": {
"map": "worldLow",
"areas": [ {
"id": "IN",
"value": 4447100,
}, {
"id": "AU",
"value": 387633
}]
},
I wonder, if there is a way to make it render India correctly, just like its possible in Google Charts by setting origin='India'
I'm assuming you're referring to the region around Kashmir, correct? Try using worldIndiaLow instead of worldLow, which includes more of that disputed area as part of India.
"dataProvider": {
"map": "worldIndiaLow",
"areas": [ {
"id": "IN",
"value": 4447100,
}, {
"id": "AU",
"value": 387633
}]
},
Updated fiddle
three.js version 0.0.70, blender version 2.73a
I have a scene exported from blender to three.js json format using new io_three (not io_three_mesh) exporter.
I'm able to import the scene into three.js using ObjectLoader:
var objectLoader = new THREE.ObjectLoader();
objectLoader.load('assets/models/exportedScene.json', function(imported) {
scene.add(imported);
});
Unfortunatelly, no texture is applied to an object, only the material.
As I see from exportedScene.json file, there is an info about texture in file:
"images": [{
"url": "blue.jpg",
"uuid": "DFE5BBBF-601B-48EA-9C05-B9CB9C07D92E",
"type": "Geometry",
"name": "blue.jpg"
}],
"materials": [{
"color": 200962,
"specular": 5066061,
"shininess": 8,
"ambient": 200962,
"depthTest": true,
"depthWrite": true,
"name": "partitionMat",
"emissive": 0,
"uuid": "A705A33F-68C1-489C-A702-89A0140247AB",
"blending": "NormalBlending",
"vertexColors": false,
"map": "73277351-6CCF-4E84-A9F0-D275A101D842",
"type": "MeshPhongMaterial"
}],
"textures": [{
"minFilter": "LinearMipMapLinearFilter",
"wrap": ["RepeatWrapping","RepeatWrapping"],
"magFilter": "LinearFilter",
"mapping": "UVMapping",
"image": "DFE5BBBF-601B-48EA-9C05-B9CB9C07D92E",
"repeat": [1,1],
"name": "carpetTexture",
"anisotropy": 1.0,
"uuid": "73277351-6CCF-4E84-A9F0-D275A101D842",
"type": "Geometry"
}],
But as I said before, no texture is applied.
I tried placing texture file near the html with js script, but it didn't work.
Maybe my initial approach is incorrect and I should import textures similar to http://threejs.org/examples/webgl_loader_obj.html? However, this one is about using ObjLoader (not ObjectLoader), and I'm not sure if it's correct.
Check out the dev branch. There have been recent commits for texture support for the upcoming r71 release.
Latest format support it like following:
"images":[
{
"uuid": "A430CF4-AD77-11E3-914E-00248C62C323",
"url": "../models/1024_tornis.png"
},
{
"uuid": "eka_tv_2_i",
"url": "../models/eka_tv_2.jpg"
},
{
"uuid": "sala_model_0709_map_i",
"url": "../models/sala_model_0709_map.png"
}
],
"textures":[
{
"uuid": "1024_tornis",
"image": "A430CF4-AD77-11E3-914E-00248C62C323"
},
{
"uuid": "eka_tv_2",
"image": "eka_tv_2_i"
},
{
"uuid": "sala_model_0709_map",
"image": "sala_model_0709_map_i"
}
],
"materials": [
{
"uuid": "3C5CA6AA-055B-417B-97E0-706BA446140B",
"type": "MeshLambertMaterial",
"name": "Material.001",
"color": 16777215,
"emissive": 0,
"map": "1024_tornis"
}]