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.
Related
Heyho,
im relativly new to programming, right now im trying to solve a problem but don't know how and if it's even possible in three.js.
I bet someone can tell me...
My goal is it, to create a cylinder looking like geometry in three.js that draws from one vector3 to another.
I need this to create an 3D dimensionline.
I know three.js provides an arrowhelper but theirs can only draw 2D lines and i need to be able to define the width of the arrow.
Things I tried:
At first i tried to use the basic cylinder geometry of three.js but i
couldn't figure out how to give it a start and end point.
The second idea that came to my mind is the shape (was able to define points)
but i think i only can draw 2d shapes with it.
Can someone help me please?
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.
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)).
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.
Does anyone know of good examples producing a polar plot using the D3 Javascript libraries?
I've seen some rose plots like this and this, but I'm really looking for something more similar to the Matlab polar plot:
Any examples would be greatly appreciated. Thanks!
Sure, here you go:
The function is plotted using d3.svg.line.radial. The background radial grid is implemented as line, circle and text elements. One minor annoyance is that the code needs both radians (for d3.svg.line.radial) and degrees (for SVG’s transform attribute). I used rotated text labels because that was easy to do with SVG, but you could use non-rotated labels if you don’t mind a little trigonometry to position the text labels.
Note carefully the definition of the line’s angle: D3’s radial lines and areas proceed clockwise starting at 12 o’clock, while this plot proceeds counterclockwise starting at 3 o’clock!
Plotly lets you make interactive polar charts with MATLAB, Python, and R. The results are interactive, and rendered with D3.js. You can see a few MATLAB examples (code + interactive graphs) here.
Disclaimer: I'm on the Plotly team.