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.
Related
I want to create a top down game, on which the "camera" rotates with the character (like in Tap Tap Dash). But Phaser does not implement camera rotation, so I followed this thread to create a world group, which will be rotated.
As you can see in the following screenshot, after rotating the Tilemaps (the road and the arrows) as well as the sprites (the coins), black areas occur. What is really strange is that the sprites are rendered correctly as you can see on the bottom of the screenshot, but the Tilemaps are not fully rendered.
I have tried to resize the world again and trying all kind of methods of the camera, world and layer object. But I am out of ideas. Hopefully someone can give me a hint how to approach this problem.
Thank you!
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!
I just started to fiddle around with WebGL and three.js.
I would really like to create a thick line, which has rounded corners and endings. (see example picture)
Unfortunately I see that firstly the LineBasicMaterial's linecap property does not really work.
Three.js LineBasicMaterial
I started to think about using a tube, but then I think I will still not get a round cap...
Does someone have any ideas how I could create a line in the picture above? It does not necessarily have to made with three.js but WebGL would be a requirement. (I also want to animate this line further on...)
Thanks for any hints.
Cheers
There are a couple ways to draw 3d volumetric lines. The first is to do a vertex expansion in the shader. This is what the links in the comments do. Here is another one in case you need more material: http://codeflow.org/entries/2012/aug/05/webgl-rendering-of-solid-trails/.
Unfortunately it have visual artifacts when the line segment is viewed directly heads on. Check out the demo here: http://codeflow.org/webgl/trails/www/. Spin the scene around and you will notice some line segments facing directly towards the camera will spin rapidly. It looks a lot worse with a less noisy texture btw. If this is fine with you this is probably the preferred option.
The 2nd option is to just dynamically generate a capsule mesh for each line segment. Not much to say about it, beyond that this is a simple, abet somewhat inefficient method.
The 3rd option is to do a limited kind of ray tracing in the shader. Calculate the distance between the line segment and the fragment being shaded and we can use that to determine the appropriate color. Here is a link for that. Geometry shader is not currently supported in the webgl but there is nothing stopping you from generating the bounding line cuboid via javascript. Oh and if you need soft lines you probably need the blend_minmax extension. Probably the hardest method to setup but can be viewed at any angle and very customize-able compared to the other 2 methods.
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.
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