How to realize flying over the map, like http://rainforest.arkivert.no/#kart.
Should I change camera coordinates or change model position?
What is the best solution? Maybe there are ready examples?
Thanks.
I would recommend you change camera coordinates rather than transforming the whole scene. You should be able to easily find examples on how to modify the camera.
Take a look at the implementation of OrbitControls.js in that sample.
Related
I am trying to achieve movement of an object on walls, instead of only one plane. In this example, an object dragged on walls by using:
intersects = raycaster.intersectObjects([walls]);
object.position.copy(intersects[0].point);
However, with this method, the object jumps because the object's center moves to the mouse. There is a related question and helpful JSFiddle for dragging on one plane without jumpin Would you please help me to modify it for multiples planes (walls)? Thanks
After reading your comment, I think what you're looking for is you want the object to animate to the position. You can do this a few ways. The "threejs" way is to move it each frame (within the animate/update loop). You could do this with Vector3.lerp by storing intersects[0].point as your target location and lerping your object.position to it each frame. Another option is to use an animation library like animejs or gsap.
I am building an earth mesh, but instead of a bump map, I want the surface to look like (the picture below).
Can someone please help me. What do I do?
You could check out displacement maps or height maps. They manipulate the actual geometry of the mesh, creating real bumps where normal/bump maps only "fake" them.
To create something like in that picture I believe you will need a sphere with a large amount of vertices, since the elevation in image look very detailed.
I hope this was helpful, good luck!
Is it possible in Three.js to interpolate two meshes like this? At the area where they intersect should have a nice smooth transition.
I think I've seen it somewhere, but I can't find it.
EDIT
The metaball/cube concept is much closer to what I'd like to achieve:
https://www.youtube.com/watch?v=f42zr__yW_Q
http://threejs.org/examples/webgl_marchingcubes.html
I found the way to do it. It's called raymarching distance fields.
Here's an example:
https://www.shadertoy.com/view/4dsGRl
Also a presentation:
http://www.iquilezles.org/www/material/nvscene2008/rwwtt.pdf
Stating from this excellent article (Making of the World Wonders 3D Globe), I try to replace the demo markers with my own markers, with success.
But I want to render the whole earth in the window, not only the top (about 30%):
My test page.
I have not yet all understand about WebGl, so can you help me?
Try playing with this:
camera.position.set(x,y,z); // you custom coordinates
The globe is there, you simply need to re-position the camera to suits you. You would probably need to adjust z and y coordinates, and note that THREE.js uses right-handed coordinate system.
Hope this helps.
I've read the "learning webgl" tutorial, but it does not explain everything. Something like google experiments with webgl are amazing, but I've been wondering... how do you move a 3D object along a custom path to swing into the scene or create a custom transition?
webgl -> opengl in web, so how do you do that in opengl?
what you're looking for is pretty common functionality, but it is hard to find concrete examples showing how to do it.
the easiest way i have found to do it is using Apple's J3DIMath.js webgl library.
you basically want to define a "camera" perspective matrix, then move the camera along a predefined path of vertices through your 3d space. as you move along the "track" of vertices, at each draw frame you can call the function J3DIMatrix4.lookat(), passing it the position vector along the path, the direction to look at, and the "up" direction, and it will create the appearance of a moving camera.
i hope this helps!
J3DIMath.js