This question already has answers here:
what is the unit for the Three js objects?
(2 answers)
Closed 4 years ago.
Let's say I have a mesh. And want to position it in 3D using the following:
mesh.position.set(5, 5, 5);
What are those numbers? I'm sure it isn't 5 pixels for x. For example:
mesh.position.x
Would indeed return 5, but this is where things get tricky.
I'm using the raycaster in order to know where the mouse is which is either Normalized Coordinate System or Pixel using the following:
function onMouseMove(event){ // Calculate mouse movements
// Normalized Coordinate System
mouse.ncs.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.ncs.y = - (event.clientY / window.innerHeight) * 2 + 1;
// Pixel coordinates
mouse.p.x = event.clientX;
mouse.p.y = event.clientY;
};
But how would I say 5 equal this amount of pixels? Any help on this will be much appreciated.
When you use Raycaster.setFromCamera() you must use normalized coordinates, so from [-1, 1], which it looks like you're already converting to. The units of measurement of the 3D world don't matter, the ray will calculate whether it's being intersected by your object or not. Try following this example in the docs.
To answer your original question, Three.js and WebGL at large are natively "unitless". You can pretend the units are in inches, meters, whatever you want them to be. The only instance where units matter is with THREE.CSS3DRenderer, where units are a mix of pixels and unitless because you're dealing with HTML elements.
Related
I'm new to three.js and 3d in general, but here's a example:
const geometry = new Three.PlaneBufferGeometry(1, 1, 8, 8)
let positions = this.geometry.getAttribute('position').array
console.log(positions.length)
Just from my basic understanding, I would guess before seeing the result is that positions.length is 8*8*3 or 192 elements wide because as far as I know, a vertex in three.js takes a block of 3 values (x, y, z?), then the next vertex takes 3, and so on, travelling along the vector of values. A plane is formed of these vertices, and I would assume (again, pre-run) this plane has 64 vertices.
However, when I run this, I get a logged value of 243.
What am I misunderstanding here? 243 doesn't seem like a cleanly divisible number any way I look at it. My ultimate goal is to manipulate each vertex by some amount along the Z-axis, before the render.
To form 8 segments, there must be 9 points.
Thus, in case of an indexed geometry (PlaneGeometry is of that type), the amount of points per dimension is amount_of_segments + 1.
So, in your case, a plane of 8 x 8 segments will have (8 + 1) * (8 + 1) = 9 * 9 = 81 vertices. And the length of geometry.attributes.position.array will be 81 * 3 = 243.
I have a sphere in threejs, and I'd like a ring to animate over the top of it.
I have the following progress:
https://codepen.io/EightArmsHQ/pen/zYRdQOw/2919f1a1bdcd2643390efc33bd4b73c9?editors=0010
In the animate function, I call:
const scale = Math.cos((circlePos / this.globeRadius) * Math.PI * 0.5);
console.log(scale);
this.ring.scale.set(scale, scale, 1);
My understanding is that the sin and cos functions are exactly what I need to work out how far around the circle the ring has gotten to. However, the animation actually shows the ring fall inside the sphere, before eventually hitting the 0 scale at the outside of the sphere.
Ideally, I'd also like to just be changing the radius of the sphere but I cannot work out how to do that either, so I think it may be an issue of using the scale function.
How can I keep the ring on the surface of the sphere?
Not quite. Consider this:
You have a right triangle whose bases are your x and y, with a hypotenuse of r = globeRadius. So by Pythagoras' theorem, we have:
x2 + y2 = r2.
So if we solve for the height, y, we get:
y = √(r2 - x2).
Thus, in your code, you could write it e.g. like this:
const scale = Math.sqrt(this.globeRadius * this.globeRadius - circlePos * circlePos);
However, this is the scale in terms of world units, not relative to the objects. So for this to work, you need to either divide by your radius again, or just initialise your ring with radius 1:
this.ringGeometry = new THREE.RingGeometry(1, 1.03, 32);
Here I gave it an arbitrary ring width of 0.03 - you may of course adjust it to your own needs.
I'm working on an educational map project in which different map projections are displayed. I'd like to implement a morph transition between choosing different projections.
I've found a great example how to implement it, and I've had not much troubles to recreate it. Unfortunately, I also need the capability to clip the projections. This works flawlessly with the target states, but not when morphing the projections.
You can see it in this example when choosing "orthographic" as first projection and for example "equirectangular" as second one:
https://bl.ocks.org/alexmacy/082cb12c8f4d5c0d5c4445c16a3db383
The clipping path follows the darker line instead of the current map extent. Is there a way to implement it correctly?
This is a lot trickier to implement than appears, I remember looking at this a few years back. The cleanest solution is to create a new preclipping function that determines which portions of the projected earth should be behind/covered by portions closer to the origin. But it turns out this is relatively hard to define - at least my me - and also hard to use in a new preclipping function.
Instead we could cheat. There are a couple ways, I'll propose one that nearly does the trick - you can still see some overlap though. We'll use d3's antimeridian preclipping to make sure no features stretch over the antimeridian, then we'll use a clip angle to remove portions of the earth that need to be removed.
Setting Clip Angle
When the hybrid projection is purely orthographic, clipping angle is great: the clip angle is the same in all directions. Here it should be 90 degrees.
When the equirectangular is dominant in the hybrid projection, the clipping angle is not needed (I use an angle of 180 degrees, which doesn't clip anything below). This is because the entire earth should still be visible.
But otherwise, the hybrid clip angle is not the same in all directions - this is why this is not a perfect solution. However, it does remove nearly all the overlap. So as we go from the projection being mostly equirectangular to wholly orthogrpahic, we slowly reduce the clip angle.
Example
Starting with an equirectangular projection and transitioning to an orthographic, we'll start transitioning the clipAngle from 180 degrees to 90 degrees only once we get 40 percent of the way trough the transition:
function getProjection(d) {
var clip = Math.PI; // Starting with 180 degrees: don't clip anything.
var projection = d3.geoProjection(project)
.rotate([posX, posY])
.fitExtent([[10, 10], [width - 10, height - 10]], {
type: "Sphere"
})
// Apply the two pre clipping functions:
.preclip( function(stream){
stream = d3.geoClipAntimeridian(stream) // cut antimeridian
return d3.geoClipCircle(clip)(stream) // apply clip angle
})
var path = d3.geoPath(projection);
function project(λ, φ) {
λ *= 180 / Math.PI,
φ *= 180 / Math.PI;
var p0 = projections[0]([λ, φ]),
p1 = projections[1]([λ, φ]);
// Don't actually clip anything until t == 0.4
if(t > 0.4) {
clip = Math.PI/2 + (0.60-(t-0.4)) * Math.PI/2
}
return [
(1 - t) * p0[0] + t * p1[0],
(1 - t) * -p0[1] + t * -p1[1]
];
}
return path(d)
}
Here's an example.
Great answer Andrew Reid! I just made one small change. I removed the t > 0.4 if statement and used this clip for transitioning into an orthogrpahic projection:
clip = Math.PI/2 + (1 - t) * Math.PI/2
.. and this clip for transitioning out of an orthogrpahic projection:
clip = Math.PI/2 + t * Math.PI/2
I like this because it's slightly cleaner, is a 'catch-all' for any t value and having the reverse is also useful.
I'm looking to use a multipoint geometry to hold different points of features I have on my map, but I need to rotate them around a point.
Does Openlayers 3 have any functionality that would allow me to take a Multipoint and rotate it around one of those points?
ol.coordinates.rotate() exists but does not perform the action I need.
Is this part of the library or a trigonometry exercise for the implementor?
I ended up creating multiplie ol.geom.Point objects and using the following function to rotate them around a given point:-
rotateGeometry = function(pointLongitude, pointLatitude, originLongitude, originLatitude, angle) {
angle = angle * Math.PI / 180.0;
return [Math.cos(angle) * (pointX - originX) - Math.sin(angle) * (pointY - originY) + originX, Math.sin(angle) * (pointX - originX) + Math.cos(angle) * (pointY - originY) + originY];
}
Feeding in my coordinates that worked. An extension of this could be feeding it a multipoint geometry, with a nominated axis point, and rotate all other geometries around it using this function in one go.
Oh, and I had to invert the angle sent in to rotate correctly, but that may be my implementation.
Comments welcomed.
I'm using d3.js to create a bubble chart, which I'm then trying to wrap partially around a sphere in three.js. I'd like the end result to look like a dandelion, as pictured here:
The bubble chart on a 2d plane looks like this. I'm trying to wrap it half-way around a sphere to create that dandelion effect.
I have three semi-working solutions, yet none exactly follow the curve of a sphere when viewed from the side
Example A - zCoord = new THREE.Vector2(xCoord, yCoord).length();
This gives a linear looking cone effect, not a curved effect. I think I somehow need to calculate a quadratic curves instead of a linear line but I'm stuck trying to figure it out.
Example B - zCoord = (diameter / 2 ) * Math.cos(phi);
This uses code from the periodic table of elements and spirals the data along the z axis.
Example C - Close to what I want, but it doesn't wrap around sphere enough, and everything seems to bunch up together. I'd like to preserve the padding or space around the mini-spheres
zCoord = (diameter / 2 );
var vector = new THREE.Vector3(xCoord, yCoord, zCoord).normalize().multiplyScalar(diameter / 2);
jsfiddle link to try out the methods
May not be the most efficient solution, but I did get pretty close using Mercator Projection. It's almost like I'm UV wrapping, but with Vector2 points.
My solution involved mapping X,Y coords to latitude and longitude, then projecting them onto a sphere using mercator projection.
var latitude = data[i].position.x / R;
var longitude = (2 * Math.atan(Math.exp(data[i].position.y / R))) - (Math.PI / 2);
xCoord = R * Math.cos(latitude) * Math.cos(longitude);
yCoord = R * Math.cos(latitude) * Math.sin(longitude);
zCoord = R * Math.sin(latitude);
link to jsfiddle showing tweening from 2d > 3d