I created two boxes and want to set a lock constraint but two boxes are overlapping.
How can I set that without explosion with cannon.js?
Try this
var c = new CANNON.LockConstraint(bodyA, bodyB, {
maxForce: params.maxForce || Number.MAX_VALUE
});
c.collideConnected = false;
this.world.addConstraint(c);
Related
Hello to all I begin in Three js, I would like that when my box enters in collision of my Mesh that all the polygons which are inside my Mesh change of color
Current result
Demo
here is my function which allows me to detect the collision of my 2 objects
detectCollisionObject(box) {
const meta = this.getMetaByModelUUID(this.state.meshes[0].uuid);
meta.mesh.children[0].geometry.computeBoundingBox(); //not needed if its already calculated
box.geometry.computeBoundingBox();
meta.mesh.children[0].updateMatrixWorld();
box.updateMatrixWorld();
var box1 = meta.mesh.children[0].geometry.boundingBox.clone();
box1.applyMatrix4(meta.mesh.children[0].matrixWorld);
var box2 = box.geometry.boundingBox.clone();
box2.applyMatrix4(box.matrixWorld);
// //return box1.intersectsBox(box2);
console.log("Collision", box1.intersectsBox(box2));
}
Here is a picture of what I would like to have
example
I thank you for your answer
I have several objects grouped in a Object3D. I wanna calculate the boundingbox of the whole group, except some specific objects in that group.
Can you disable the calculation of boundingbox for those objects?
Can you disable the calculation of boundingbox for those objects?
If you are using Box3.setFromObject() then no, this is not possible. The code processes all children of the hierarchy and expands the AABB if an object has a geometry property.
three.js R101
As Mugen mentioned it's not possible to do this out of the box but you can achieve it by manually traversing the tree.
Here's an idea for how you might do that.
var box = null;
group.traverse(c => {
// logic for whether or not to include the child
var includeChild = c.isMesh;
if (includeChild) {
// initialize the box to the first valid child found
// otherwise expand the bounds
if (box === null) {
box = new THREE.Box3();
box.setFromObject(c);
} else {
box.expandByObject(c);
}
}
});
You can change the boolean logic for includeChild to determine whether or not you want an object to be included in the bounds calculations or not.
Hope that helps!
I am working with a dataset where I am given time spent in locations or forms of transportation - I am trying to attach the marker clusters for forms of transportation on a line below each other on the right side of the map, such that one can see how much time is spent on each kind of transport.
I tried doing this by finding the latlong of the different pixel positions, each time the map moves, like so:
var centerPoint = map.getSize().divideBy(2);
map.on('move', function(e) {
var name_array = [];
var multiplier_x = 0.95;
var multiplier_y = 0.8;
var index = 0;
layer_group.eachLayer(function (layer) {
if (layer.feature.properties.Name == 'Cycling' || layer.feature.properties.Name == 'Walking' || layer.feature.properties.Name == 'Driving' || layer.feature.properties.Name == 'Boating' || layer.feature.properties.Name == 'On a bus' || layer.feature.properties.Name == 'On a train'){
if(!(layer.feature.properties.Name in name_array)){
var targetPoint = centerPoint.add([centerPoint.x*multiplier_x, -centerPoint.y*(multiplier_y-index)]),
targetLatLng = map.containerPointToLatLng(targetPoint);
name_array[layer.feature.properties.Name] = targetLatLng;
index += 0.2;
}
layer.setLatLng(name_array[layer.feature.properties.Name]);
}
});
});
The problem is that eventhough each transportation form is given a different location, they seem to cluster together anyway, and change between different clusters when the map is moved. Additionally, when moving the brush the map seems to move further and further to the left, as I am trying to fit the map to the bounds.
I don't know if it is possible to achieve what I am trying to - or if there maybe is another way of doing it, maybe by creating a seperate cluster group for the transportation, which I guess at least would make sure that the transportation isn't clustered with the locations?
Code: http://bl.ocks.org/skov94/e44fcebd282fe5eb4c708e8ba0af95d6
To plot them at a given pixel, based on a given latlng:
...
var topLeft = map._getNewPixelOrigin(map.getCenter(), map.getZoom());
var targetPoint = map.project(map.getCenter(), map.getZoom()).subtract(topLeft);
var targetLatLng = map.unproject(targetPoint);
...
By constantly calculating the new pixel origin, this ensures that the pixels and latLngs stay aligned even when panning
I am trying to write a function that creates a point cloud from mesh. I also want to control colors of every vertex of that point cloud. So far I tried to assign colors of geometry but colors doesnt being updated.
InteractablePointCloud_simug=function(object, editor){
var signals=editor.signals;
var vertexSize=0.3;
var pointMat= new THREE.PointsMaterial({size:vertexSize , vertexColors:THREE.VertexColors});
var colors=[];
var colorStep=0.1;
for (var i = 0; i < object.geometry.vertices.length; i++) {
colors.push(new
THREE.Color(colorStep*i,colorStep*i,colorStep*i));
};
//get points from mesh of original object
var points=new THREE.Points(object.geometry,pointMat);
//Update colors
points.geometry.colors=colors;
points.geometry.colorsNeedUpdate=true;
updatePosition();
//Add points object to scene
editor.addNoneObjectMesh(points);
}
I think this is probably doable on other video cards, but mine does not seem to like it.
Theoretically.. if your material color is white.. it should multiply times the vertex color ( which is basically like using the vertex color ), but since you did not specify black as your color, this is not the problem ).
If your code is not working on your computer ( not on mine either ), you will have to go nuclear... and just create a new selectedPointsGeometry and a new selectedPointsMesh
Grab a couple of vertices from the original.. copy them.. put them in a vertices array.. and run an update method ( you have to recreate the geo and mesh every time.. at least on my PC, I tried calling every single update method, and had to resort to recreating )
mind the coffee script. #anchor is the container
updateSelectedVertices: (vertices) ->
if #selectedParticles
#anchor.remove #selectedParticles
#pointGeometry = new THREE.Geometry()
#pointGeometry.vertices = vertices
#selectedParticles = new (THREE.PointCloud)(
#pointGeometry,
#selectedPointMaterial
)
#pointGeometry.verticesNeedUpdate = true
#pointGeometry.computeLineDistances()
#selectedParticles.scale.copy #particles.scale
#selectedParticles.sortParticles = true
#anchor.add #selectedParticles
selectedPointMaterial is defined elsewhere. Just use a different color ( and different size ).. than your non selected point cloud.
IE.. use black and size 5 for non selected point cloud , and use yellow and 10 for the selected one.
My other mesh is called #particles.. and I just have to copy the scale. (this is the non-selected point cloud)
Now my selected points show as yellow
Is there a way to continously plot changing array data? I've got a ILLinePlot to graph the line to changing data on a button event, but I would like to make it continuous.
while (true)
{
float[] RefArray = A.GetArrayForWrite();
//RefArray[0] = 100;
Shuffle<float>(ref RefArray);
Console.Write(A.ToString());
scene = new ILScene();
pc = scene.Add(new ILPlotCube());
linePlot = pc.Add(new ILLinePlot(A.T, lineColor: Color.Green));
ilPanel1.Scene = scene;
ilPanel1.Invalidate();
}
The problem I'm running into is that the loop runs, and i can see updates of the array, but the ILPanel does not update. I'm thinking maybe it's because the main loop can't be accessed due to this infinite loop, so I put it in its own thread as well, but it's still not rendering as I hoped...
As Paul pointed out, there is a more efficient attempt to do this:
private void ilPanel1_Load(object sender, EventArgs e) {
using (ILScope.Enter()) {
// create some test data
ILArray<float> A = ILMath.tosingle(ILMath.rand(1, 50));
// add a plot cube and a line plot (with markers)
ilPanel1.Scene.Add(new ILPlotCube(){
new ILLinePlot(A, markerStyle: MarkerStyle.Rectangle)
});
// register update event
ilPanel1.BeginRenderFrame += (o, args) =>
{
// use a scope for automatic memory cleanup
using (ILScope.Enter()) {
// fetch the existint line plot object
var linePlot = ilPanel1.Scene.First<ILLinePlot>();
// fetch the current positions
var posBuffer = linePlot.Line.Positions;
ILArray<float> data = posBuffer.Storage;
// add a random offset
data = data + ILMath.tosingle(ILMath.randn(1, posBuffer.DataCount) * 0.005f);
// update the positions of the line plot
linePlot.Line.Positions.Update(data);
// fit the line plot inside the plot cube limits
ilPanel1.Scene.First<ILPlotCube>().Reset();
// inform the scene to take the update
linePlot.Configure();
}
};
// start the infinite rendering loop
ilPanel1.Clock.Running = true;
}
}
Here, the full update runs inside an anonymous function, registered to BeginRenderFrame.
The scene objects are reused instead of getting recreated in every rendering frame. At the end of the update, the scene needs to know, you are done by calling Configure on the affected node or some node among its parent nodes. This prevents the scene from rendering partial updates.
Use an ILNumerics arteficial scope in order to clean up after every update. This is especially profitable once larger arrays are involved. I added a call to ilPanel1.Scene.First<ILPlotCube>().Reset() in order to rescale the limits of the plot cube to the new data content.
At the end, start the rendering loop by starting the Clock of ILPanel.
The result is a dynamic line plot, updating itself at every rendering frame.
I think you need to call Configure() after any modification of a shape or its buffers. Use the BeginRenderFrame event to do your modifications and you should not add infinitely many shapes / new scenes. It is better to reuse them!
Let me know, if you need an example...