I am using plotly.js to plot my graph and Ive come to a problem. I am trying to plot a 2D plane in 3D graph. For example i have equation x >= 5 so the plane should be perpendicular to the x axis, i can calculate the 4 corner x,y,z coordinates easily. But dont know how to plot It using either mesh3d or surface3d.
I would think this is a bug (just posted it here). Meanwhile, a workaround is to specify the vertex vectors:
import plotly.graph_objects as go
fig = go.Figure(go.Mesh3d(x=[0,1,1,0],
y=[1,1,1,1],
z=[0,0,1,1],
opacity=0.2,
color='black',
i=[0, 0, 0, 1],
j=[1, 2, 3, 2],
k=[2, 3, 1, 3],
))
fig.show()
Related
I'm trying to draw a polygon (wall) in 3D space with Three.JS but it's proving hard to do.
I want to use ExtrudeGeometry as my wall needs thickness. Also, assume there might be anywhere from three to an infinite amount of points so, a simple BoxGeometry is not suitable.
Consider this:
Starting from the bottom left and moving clockwise, say these are the coordinates of the green points. Assume given points are always on the same plane.
[
[1, 0, -1],
[1, 3, -1],
[5, 3, -4],
[5, 0, -4],
]
It works fine on a 2D plane because Shape takes 2D points. Something like this:
const shape = new THREE.Shape();
shape.lineTo(0, 0);
shape.lineTo(0, 5);
shape.lineTo(5, 5);
shape.lineTo(5, 0);
const geometry = new THREE.ExtrudeGeometry(shape, { steps: 1, depth: 1 });
const material = new THREE.MeshStandardMaterial();
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
The only way I can think of doing this is by rotating my points to a 2D plane to find what the 2D equivalent coordinates would be, then to create the shape then rotate the geometry back to where I want. This seems excessively complicated though and, if my coordinates were rotated about two axes, then that would open another can of worms.
So how can I place a polygon in 3D space given a set of three or more points?
I am trying to create a scatter plot where XAxes and YAxes is the same scale and size.
The plot will become a square with identical Axes.
Therefore if the data be {x:0, y:0}, {x:100, y:100}
it draws a diagonal (45 degrees) line. I am plotting A vs. B and the rectangular shape of the plot is confusing.
The max values are known ahead of time.
in dataset you can set the pointStyle.
datasets: [{pointStyle:'rect'}]
for the other types
Just found it :
just add aspectRatio: 1 to options
I'm trying to make a linear regression plane visualization tool for a math project. Currently I have the math parts completed, but I am not sure how to graph the plane. I have a equation in the form of z=C+xD+yE, where C, D, and E are known constants. How do I graph the plane using these information? Thanks.
github page: https://saxocellphone.github.io/LAProject/
z=C+xD+yE
This equation gives full information about the plane. What else you need to graph (plot, draw?) it? Probably it depends on your graphic software possibilities.
Canonical form of given equation:
xD + yE - z + C = 0
Normal to the plane is (D, E, -1). Distance to the coordinate origin Abs(C)/Sqrt(D^2+E^2+1).
Plane intersects coordinate axes at values (-C/D), (-C/E), (C)
I see your problem is not with math, but with three,
as WestLangley pointed out in his comment you can play with rotations etc. or create a simple triangle which is the easiest way
since you have your equation for the plane create 3 points to form a triangle
// z=C+xD+yE
// i assume here that the plane is not aligned with any axis
// and does not pass through the origin, otherwise choose the points in another way
var point1 = new THREE.Vector3(-C/D,0,0);//x axis intersection
var point2 = new THREE.Vector3(0,-C/E,0);//y axis intersection
var point3 = new THREE.Vector3(0,0,C);//z axis intersection
now form a new geometry as in How to make a custom triangle in three.js
var geom = new THREE.Geometry();
geom.vertices.push(point1);// adding vertices to geometry
geom.vertices.push(point2);
geom.vertices.push(point3);
// telling geometry that vertices 0,1,2 form a face = triangle
geom.faces.push( new THREE.Face3( 0, 1, 2 ) );
create a simple material and add it to a scene
var material = new THREE.MeshBasicMaterial({
color: 0xff0000, // RGB hex color for material
side: THREE.DoubleSide // do not hide object when viewing from back
});
scene.add(new THREE.Mesh(geometry,material));
that should get you going, you can add another triangles, or make it larger with choosing points that are further apart
Relevant codepen:
http://codepen.io/OpherV/pen/yNebep
In my game I have a model of an alien tree.
For each face of this tree I generate a pyramid (CylinderGeometry with 4 faces), and position it at the center of the face. Then I wish for this pyramid to be perpendicular to the face, so that I'll get a tree with spikes.
I've tried achieving this with object.lookAt and point it at the face normal, but weird things happen. For example:
If I add
cylinderGeometry.applyMatrix( new THREE.Matrix4().makeRotationX( - Math.PI / 2 ) );
The shape in the middle works as expected, but the rest is still distorted
What is the proper way to get my spiked tree?
Bonus question
How would I go about merging these spikes to the original geometry after proper creation and orientation so that I don't have so many separate objects?
You want to create cylinder and point it in a particular direction. One way to do that is to use the following pattern:
Create the geometry.
var cylinderGeometry = new THREE.CylinderGeometry( 1, 10, 25, 4, 1 );
Translate the geometry so the base sits at the origin.
cylinderGeometry.translate( 0, 12.5, 0 );
Rotate the geometry so the top points in the direction of the positive-Z axis.
cylinderGeometry.rotateX( Math.PI / 2 );
Create the mesh.
var cylinder = new THREE.Mesh( cylinderGeometry , characterSkinMaterial );
Objects in three.js are by default "looking" in the direction of their local positive-Z axis. (Except the camera, which looks down its negative-Z axis.)
Tell the cylinder to "look" in the direction you want. Since we have transformed the geometry, this will make the top of the cylinder point in the desired direction.
cylinder.lookAt( face.normal );
Now place the cylinder wherever you want it.
cylinder.position.copy( centerPoint );
obj.add( cylinder );
three.js r.91
I've a tube geometry built with 2000 points stored as JSON data.
The tube has band (curves) also. I am using TrackBallControls.
Now when I rotate the tube, it is rotated in all three dimensions.
The rotation is not limited to any particular axis.
I am using following code after creating tubeMesh.
// to make rotation only on x-axis
var v = new THREE.Vector3(1,0,0).normalize();
var matrix = new THREE.Matrix4();
tubeMesh.applyMatrix(matrix.makeRotationAxis(v, 0));
tubeMesh.applyMatrix(matrix.makeTranslation(0,-1500,0));
if ( tube.debug ) tubeMesh.add( tube.debug );
scene.add(tubeMesh);
This code does not work as the tube is rotating on all three dimensions.
Even I've tried the functions defined in below question.
three.js rotation
How do fix the rotation axis so that the tube will be rotated only on specified axis ?
using r53