Develop Reference

Open layer check if feature is in viewport

My purpose is to display only features that have coordinate inside my map viewport (map area currently displayed).
I get the extent of the viewport by doing:
var mapExtent = this.map.getView().calculateExtent(this.map.getSize());
mapExtent = ol.proj.transformExtent(mapExtent, 'EPSG:3857', 'EPSG:4326');
and after, in a loop where I am reading the element of one store,
var point = ol.proj.fromLonLat([
element.get('longitude'),
element.get('latitude')
]);
elementPoint = new ol.geom.Point(point);
var feature = new ol.Feature(elementPoint);
var coordsFeatures = feature.getGeometry().getCoordinates();
and after, just to quickly see if the point is inside my viewport, I use just a console log:
console.log(ol.extent.containsXY(mapExtent, coordsFeatures[0],coordsFeatures[1]));
/*if(!ol.extent.containsXY(mapExtent, coordsFeatures[0],coordsFeatures[1])){
return true;
}*/
But I don't know why, the result is only false, even if for sure there are points inside the map area currently displayed.
Whart I am doing wrong?

You are mixing projections.
For the extent, you change from 3857 to 4326.
For the point, by applying ol.proj.fromLonLat(), you change from 4326 to 3857 (the default)
Just use 3857 or 4326 for both

So I will post the correct code in case someone else may need it. As mentioned by #GH (thank you again) my problem was the mixing projections, so I changed my code in this way:
instead of using the coordinate, I get the extent of the feature:
var extentFeature = feature.getGeometry().getExtent();
and after i applied to it the same transformExtent used for the map:
extentFeature = ol.proj.transformExtent(extentFeature, 'EPSG:3857', 'EPSG:4326');
if(!ol.extent.containsExtent(mapExtent, extentFeature)){
return true;
}
and now it works! :D

Change parameters of THREE.tubeGeometry

so I have a tube inside my Three.js scene, and I want to dynamically change its start and end points because I think it is cheaper to do that than create a new tube with the new points and remove the old (if it is not tell me why).
this is how I do it: http://jsfiddle.net/95t964o0/22/ press the button.
Obviously I tried to put every attribute related to this to true:
grid.dynamic = true;
grid.needsUpdate = true;
grid.geometry.verticesNeedUpdate = true;
Help!

What the Hell is this?
grid.geometry.parameters.path.points[0]= new THREE.Vector3(1000,100,100);
Never seen this before, the geometry of grids dont have something like parameters or am I wrong? You can change the position of the path like the way you created it:
var path = new THREE.SplineCurve3([
new THREE.Vector3(0,0,0) ,
new THREE.Vector3(200,150,10)
]);
var geometry = new THREE.TubeGeometry(path, 1, 0.11, 8);
grid.geometry = geometry;

Changing a three.js object's geometry

I am trying to change the geometry of some objects in a three.js scene. I have an almost-working piece of code where a mouse click triggers the change, but got the following problem: the (rendered) shape is only changed on the first mouse click, even though the geometry is also successfully modified by each following clicks. Using v66 or v68 of three.js library, if it is relevant.
I read Three.js: Completely change object's Geometry and Updating a geometry inside a mesh does nothing but couldn't get my code to work so far.
Relevant parts of my code:
var count = 0, item, geometry;
var geoms = [new THREE.SphereGeometry(2), new THREE.BoxGeometry(3, 3, 3)];
function init() {
geometry = geoms[count];
item = new THREE.Mesh(geometry, material);
scene.add(item);
}
// Mouse click listener.
function handleClick(event) {
count = 1 - count;
geometry = geoms[count];
item.geometry = geometry;
/* With that next line, on the first click, the sphere
* becomes a cube (as intended), but further clicks don't
* change the view anymore, even though item.geometry is
* modified.
*/
item.geometry.buffersNeedUpdate = true;
/* If I try next line instead, I got the following error:
* "TypeError: l.geometryGroupsList is undefined"
* from three.js.
*/
// item.geometry.verticesNeedUpdate = true;
}
Here is a jsfiddle of a (non-)working example. There is a sphere on screen, a click will make it a cube. Further clicks are supposed to switch between sphere and cube, but nothing change on-screen.

I don't know exactly why this happens. It is unable to update geometry of mesh by a geometry object once used.
.clone() works in this case.
item.geometry.dispose();
item.geometry = geometry.clone();
dispose() previous geometry object to prevent memory leaks.
There would be a better solution.

i found this code to run the fastest:
item.geometry.computeFaceNormals();
item.geometry.computeVertexNormals();
item.geometry.normalsNeedUpdate = true;
item.geometry.verticesNeedUpdate = true;
item.geometry.dynamic = true;

Generic: Naming structure and drawing KineticJS

This one takes a bit more to describe, sorry for the shorter title.
I currently do not have my code in front of me but might update this with the full details of how it works and where the problem is located.
Basically I notice that without doing a more or less global name (window.whatever) for the shapes/groups it will never draw them. I have done logs of the objects to see if they are proper and have seen nothing wrong with them.
The full scope is a layer first, that is passed to a function that i then create shapes and groups in a logical way, without passing the groups back and instead sending the layer as a parameter to add it from within the function. When I do it this way it seems that I can never get it to draw to the container (stage).
To add to it, I am looping to create the shapes, as I am making them variable and more percentage based then exact pixels, so I am holding the objects in an array that is generated through the loop.
I have done this flat first and it worked, however after moving it to the function it stopped working, is there any reason for this I may be missing?
Another note if it is relevant, I am using Adobe AIR.
If anyone has any ideas let me know, I will post the actual code when I can (few hours from this posting).
UPDATE:
Basically the issue I am having is that when i separate the shapes/groups into their own function it does not want to draw them at all. I have tried to call the draw function inline and also just add them to the stage later, both to my understanding will trigger the draw.
here is the code
var forms = {
selector:function(params,bind){
//globals
var parent,obj,lastWidth=0,items=[];
//setup defaults
var params = params || {};
params.x = params.x || 0;
params.y = params.y || 0;
params.active = params.active || 0;
params.height = params.height || 200;
params.children = params.children || [{
fill:'yellow'
}];
params.width = params.width || bind.getWidth();
params.margins = params.margins || 5;
//container for selector
parent = new Kinetic.Group({
x:params.x,
y:params.y,
height:params.height,
width:params.width
});
air.Introspector.Console.log(params);
var totalMargins = params.margins*(params.children.length+1),
activeWidth = (params.width-totalMargins)/2,
subItems = params.children.length-1,
subWidth = activeWidth/subItems,
itemHeight = (params.height-params.margins)/2;
//loop all children
for(var i=0;i<params.children.length;i++){
//use an array to store objects
items[i]={};
//create default object for rectangle
obj = {};
obj.y = params.margins;
obj.fill = params.children[i].fill;
if(params.active==i){
obj.width = activeWidth;
}else{
obj.width = subWidth;
}
obj.x = params.margins+lastWidth;
obj.height = itemHeight;
lastWidth = lastWidth+(params.margins+obj.width);
//create group for text
items[i].text = new Kinetic.Group({
x:0,
y:itemHeight+params.margins
});
//create box for text
items[i].box = new Kinetic.Rect({
x: params.margins,
y: params.margins,
width:params.width-(params.margins*2),
height:(params.height-itemHeight)-(params.margins*2),
fill:'yellow'
});
air.Introspector.Console.log(items[i].box);
//add box to text groups
items[i].text.add(items[i].box);
//create item
items[i].item = new Kinetic.Rect(obj);
//add groups to parent
parent
.add(items[i].item)
.add(items[i].text);
}
//add parent to the bound container
bind.add(parent);
}
}

From your question, I'm assuming bind is your Kinetic.Layer.
Make sure bind has been added to the stage: stage.add(bind);
After adding your groups/rects to bind, also do bind.draw();

I have since figured it out.
The issue is that the layer must be added to the stage before anything else is added it it. It was not in my code because I did not see it as an issue as it worked elsewhere.
Basically if you add anything to a layer, then add the layer to the stage it will fail. it must go like this:
CREATE STAGE
CREATE LAYER
ADD LAYER TO STAGE
ADD GROUPS TO LAYER
DRAW IF NEEDED
The way it was done originally is like so:
CREATE STAGE
CREATE LAYER
ADD GROUPS TO LAYER
ADD LAYER TO STAGE
DRAW IF NEEDED
The question will be updated to make this apparent, this is something that is not in the documentation as a problem (as far as I have seen) and I can see it as confusing some.

How to manually define vertices in box2D javascript?

I am trying to manually define the vertices of a polygon in box2D for javascript. I ultimately want to resize each side of a box manually, but I need to be able to draw it with vertices first (I already have a resizing mechanism). I've looked at the examples in the manual, but they are for ActionScript, and it doesn't seem to work in javascript. I've tried defining the polygon in different ways (like standalone polygon = new b2Polygon;), but it makes no difference.
No matter how I define a new polygon, the box2D source is throwing an error in the call to create the fixture. The error says "tVec is undefined," which is a variable in the box2D function: b2PolygonShape.prototype.ComputeAABB = function (aabb, xf)
Here are the relevant parts of the code(fixDef and bodyDef are created earlier in the code):
var vertices = [];
vertices[0] = new b2Vec2()
vertices[0].Set(1,1);
vertices[1] = new b2Vec2();
vertices[1].Set(1, 6);
vertices[2] = new b2Vec2();
vertices[2].Set(6, 6);
vertices[3] = new b2Vec2();
vertices[3].Set(6, 1);
fixDef.shape = new b2PolygonShape;
fixDef.shape.Set(vertices, 4);
world.CreateBody(bodyDef).CreateFixture(fixDef);
Any help would be greatly appreciated as this has been giving me trouble for a while now.