Rotate a graph created with Sigma Javascript - javascript

I would like to rotate my graph created with Sigma.js to have a more complete view of the graph, I managed to do it with 'camera' but only around one axis, I wonder if it is possible to do it around several axis.
Thanks

A camera only has :
a coordinate (x,y) position
an angle (rotation)
Sigma render a graph in 2D, not in 3D, so what you ask is not possible.

Related

How to attach a pixie render to the babylon.js mesh or move the pixie container along the axis Z

If I combine pixi.js and babylon.js like this than I want change container with pixi.js assets along the axis Z.
For example I would like to do:
stage.position.set(100, 100, 100);
But I can set only X and Y coordinates.
stage.position.set(100, 100);
Maybe it’s possible to somehow bind the render pixi.js to some kind of mesh of the babylon.js?
I would like to be able to zoom in or out the picture drawn through the render pixi.js inside the 3D world.
UPD: I made an example which to insert a canvas from the pixi.js render into the HtmlElementTexture but I see the animation separately from the plane.

Mathematics for rotation in d3.js for 3d charts

I am trying implement the rotate on drag functionality in d3 for a 3d chart, for reference I am using following example from d3 but not getting the maths behind it.
Can anyone please explain me the math for rotation in this example
http://bl.ocks.org/supereggbert/aff58196188816576af0
as #coderPi mentioned you have to rotate and project every single point. Think about it like so: Your 3d point (x,y,z) can not be displayed on your screen because it only has x and y. To get the point onto your screen you have to project it. A very common projection is the orthographic projection. For the rotation you should use a rotation matrix (and there are various ones). If you don't want to do this all by your self, I created a decent d3.js plugin.

How to rotate an object along a circular path?

I'm trying to realize a bicycle that moves along a circular path, using webGL programming language. My problem is related to the rotation of the bicycle itself that does not rotate on itself during its circular movement, but it remains with its initial angle, although the object is correctly translated in a circular fashion along the track.
In order to provide circular movements to the bicycle, I'm using the cosine and sine functions and each time varying the angle. The axes that I have to take into consideration are the x-axis and z-axis while the y-axis is fixed.
Any suggestions?
If I understood you correctly, what you want is essentially to orient the bicycle so that it faces its direction of motion?
That is usually done by calculating the model (bicycle)'s modelToWorld matrix. Your matrix lib probably have a .lookAt function and you should use that to calculate the modelToWorld matrix.
You should be able to calculate the bike's forward direction. If its moving around in a circle then it is normalize(cross(normalize(bikePos-circleCenter), UP_VECTOR)).

Rotate labels on HighCharts WindRose plot

Highcharts is being used to create a windrose plot of correlation coefficient between one variable and many others. The default placement of the labels is such that they cannot be read near the top and bottom of the plot. I would like to rotate them such that they read like rays coming out of the center. Using the PlotOptions:rotate option, all labels rotate the same amount but I need each label to rotate by a slightly different angle. How can I achieve this? Thank you all for your kind help!

Three.JS, How to configure the camera to do not upside down the model?

I am working on a 3D model of a building using Three.JS and Collada loader.
I'm improving my system interactivity, but I have two main issues:
1- When I rotate the model in the scene, it rotates in 3 axis and it makes it upside down! I want to keep the model fixed in horizontal axis and only rotate it along Y axis (Up).
A live sample How I can rotate this cube only around Y Axis (Up)?
2-How I can have a smooth control on the system using mouse movements? For example in big models, it is not easy to zoom to a specific small object smoothly. How I can configure the camera to zoom, pan and rotate smoothly?
Thanks
You are not rotating the model. You are rotating the camera.
Use OrbitControls instead of TrackballControls -- it will keep the camera right-side-up.
OrbitControls should be smooth. If it is not, then there may be something wrong with your model. That can only be handled on a case-by-case basis.
You are using a version of the library that is a year old. It is wise to update to the current version.
three.js r.57.
Add the following in your script:
controls.getMouseProjectionOnBall2 = controls.getMouseProjectionOnBall;
controls.getMouseProjectionOnBall = function(x, y){
return controls.getMouseProjectionOnBall2.call(controls, x, controls.screen.height/2);
}
Regarding the jerky movements, I see you're doing everything possible already (often people omit requestAnimationFrame). I don't think there's anything you can do to reduce jerkiness other than reduce the complexity of your building.

Categories