How/What to use to make a 3D sitemap

Tag: 3d,three.js,sitemap

.Hello, I am trying to create a more interesting sitemap for a page I am currently updating. The company that owns the site is huge (the page they use has 50+ individual departments, each with sub-departments etc) so I was wanting to make a visual representation of all the pages in the site to help people look around for the right department, sub-department, or sub-sub-etc. department.

Ideally the user would either be able to use a search in the top corner of the page where all matches on the map are highlighted and then be able to click on the link as well as see the path to that page via the map. Additionally each of the very top departments should extend, from the center, on a different z axis to allow the maximum amount of information to be displayed while still being as organized as possible.

I am happy to learn whatever language or libraries would be needed, I'm just at a loss as to where to even begin. I thought about Three JS as I've heard and read about how amazing it is for 3D images but I do not see an obvious example of its use that I could ply to this attempt (if you have any please put it as an answer).

TLDR - I'm trying to build a 3D sitemap but do not know what to learn to make it, please advise.

Thank you for any input!

Best How To :

http://olafureliasson.net/uncertain

An example of using 3 dimensional navigation. You are correct that Three.js/canvas can do this for you but wouldn't there be an easier solution: something like http://tympanus.net/Development/MorphingSearch/ that allows you to give the wow factor without having such a large learning curve

How can I render .mtl for object on iPhone 5 using ThreeJS?

javascript,ios,three.js,webgl,.obj

Did you look in the JavaScript console for errors? Remote debugging is your friend. Also the iOS Simulator can be similarly debugged From your comments I'm going to guess if you had looked at the JavaScript console would tell you the error is either you ran out of memory, your...

Centering three.js renderer.domElement (canvas) inside a parent div

css,three.js

The <canvas> element is treated by default as an inline object, similar to the <img> element. This makes it posibble to mix text and images by using float:left; or float:right; properties. I have added some text inside the parent div and a transparent red background in order to exhibit this...

Three.js set face color

javascript,three.js

It turns out that according to the vertex order when added to face, the camera is looking at the back side of the mesh. So, it can be solved by: var mesh = new THREE.Mesh(geo, new THREE.MeshBasicMaterial({ vertexColors: THREE.VertexColors, color: 0xff0000, side: THREE.BackSide })); ...

Convert autodesk .dwg and .dwf files to three.js json format

json,three.js,autodesk,dwg

In fact Autodesk already have a converter & wegbl viewer. Go to http://developer.autodesk.com and get a key for View & Data API. There is a server side REST API that allow you to upload a CAD file and convert to a JSON stream. You can hook to it and get...

How to make the arc corners go out not in with a Three.js Shape

javascript,three.js,shapes

Here is one way to create an extruded shape from a path. var path = new THREE.Path(); path.absarc( pt1.x, pt1.y, radius, a1, a2, false ); path.absarc( pt2.x, pt2.y, radius, a3, a4, false ); path.absarc( pt3.x, pt3.y, radius, a4, a1, false ); var geometry = path.createSpacedPointsGeometry( 100 ); var shape =...

Updating a material's texture map with images rapidly (every 50ms or so) causes huge stuttering

javascript,three.js

A few tips: You don't need to create new THREE.Texture() everytime you update the sphere texture. Create the texture once, and then update it using: material.map.needsUpdate = true; each time you draw something new in the canvas context. I supose, since you store the canvases in an array, you don't...

combining several iterations of same object in different location using .add() or .merge()

merge,three.js,geometry,rendering,mesh

Use the matrix4 toolset for translation (and rotation if you want), then merge your geometrys: var geometry = new THREE.TorusGeometry( 11, 0.5, 16, 100 ); var mergeGeometry = new THREE.Geometry(); var matrix = new THREE.Matrix4(); for( i = 1; i <= 50; i++ ) { matrix.makeTranslation( 0, 3.4 * i,...

Want to `return` more than once

javascript,three.js,return

You can only return one value. The first call of return ends your function. You cannot solve this by wrapping your return statement in another function, either. Wrap the values you wish to return in an array, this allows you to access all of them in the calling function: var...

How to draw a line on the diameter of a sphere in ThreeJs?

javascript,three.js

You can use this trick: var material = new THREE.MeshBasicMaterial( { color: 0xaaaaaa } ); var geometry = new THREE.SphereGeometry( 32, 32, 32 ); var sphere = new THREE.Mesh( geometry, material ); scene.add( sphere ); var geometry = new THREE.TorusGeometry( 31.9, 0.16, 64, 100 ); var material = new THREE.MeshBasicMaterial(...

Error setting Color

javascript,three.js

for ... in loops iterate the keys of an object so tile is actually the index not the object within the array, use a normal for loop or forEach. for (var i = 0; i < tiles.length; i++) tiles[i].material.color.setHex(i % 2 ? 0xffffff : 0); Read more about for ......

Interactive Meshes in Three.js

javascript,three.js,mesh,interactive

Solved it. Actually I wasn't able to loop trough meshes into scene. Didn't know about scene.traverse(). Here's the new code: function onDocumentMouseDown( event ) { event.preventDefault(); mouse.x = ( event.clientX / renderer.domElement.width ) * 2 - 1; mouse.y = - ( event.clientY / renderer.domElement.height ) * 2 + 1; raycaster.setFromCamera(...

Three.js: Switching between Cameras and Controls

javascript,three.js

After trying several different approaches, I have something that seems to be working from all cases. In this approach I keep one main camera and one set of controls (this app only has one 'viewport'). The cameras I want to switch through are imported with THREE.ObjectLoader. Each has a unique...

Finding 3D coordinate of object

opencv,image-processing,3d,camera-calibration

x, y image point only determines a ray from the camera centers through the image point. It has infinite number of possible z and when you multiply images point with inverse matrices you will get an equation of a ray or a line. It is impossible to get 3D from...

plotting points in 3d surface using x,y,z coordinates

3d,gnuplot

You can use conditional plotting. splot 'data.txt' u ($1==6 ? $2:1/0):3:4 title 'At-no 6' w points pt 7, \ 'data.txt' u ($1==7 ? $2:1/0):3:4 title 'At-no 7' w points pt 7, \ 'data.txt' u ($1==1 ? $2:1/0):3:4 title 'At-no 1' w points pt This creates ...

Make Camera LookDirection look front face

c#,wpf,3d,camera

Imagine, instead of a camera, you're moving your head around in 3D space. then Camera.Position is specifying where your head is located, Camera.LookDirection determines the direction you're looking at and Camera.UpDirection shows the orientation of your head. the following pictures clear things up for you. In the first Image, Camera...

three.js transparent sphere glitch

three.js

Remove the attribute side: THREE.DoubleSide. Since you are drawing spheres, you don't need it.

What does three.js's Matrix4.multiply() method do?

javascript,matrix,three.js,linear-algebra,matrix-multiplication

The problem is in how you're iterating the matrix elements to print them. The .elements property returns the elements in column-major order (despite the constructor and .set() methods parameters being in row-major order!). So you should: function logMatrix(matrix) { var e = matrix.elements; var $output = $('#output'); $output.html(e[0] + '...

How to calculate a random point inside a cube

math,vector,3d,cube

Generate the points in the straight position then apply the rotation (also check the origin of the coordinates).

Converting 2D images to 3D

python,r,3d

You can do this using rgl package (interface to openGL) in R and the turn3d function ## Define a function (ys must be positive, we are spinning about x-axis) f <- function(x) 2*exp(-1/2*x) * (cos(pi*x) + sin(pi*x)) + 2 xs <- seq(0, 10, length=1000) plot(xs, f(xs), type="l") ## Rotate about...

Pygame 3D: How to and is it possible?

python,performance,dictionary,3d,pygame

Pygame doesn't have the ability to do this natively. If you really want this, you'll need to brush up on your trigonometry to map lines from the 3D space to the 2D screen. At that point, you'll essentially be re-implementing a 3D engine.

Draw a sphere on a billboard with world normal from a pointlist

3d,directx,shader,hlsl

The following describes a way, which should work for your situation. Compute normal in billboard space For example, you could use your texture coordinates here float3 normal = float3(Tex.x*2-1, 0, Tex.y*2-1); normal.y = sqrt(normal.x*normal.x+normal.y*normal.y) Create an orthonormal transformation matrix (World -> Billboard) This matrix consists of the three normalized base...

Javascript Three.js point camera at fixed coordinate

javascript,three.js

You can make the camera "look at" a world-space point by using the lookAt() method, like so: var point = new THREE.Vector3( x, y, z ); camera.lookAt( point ); Note: This method is limited, in that it will not work correctly if the camera is a child of another rotated...

how to draw Highcharts in Three.js

javascript,three.js,html5-canvas

A primitive example of rendering charts on the sides of the cube (threejs.org + highcharts.com): http://goo.gl/ohexxL...

Orbit camera lookAt change

javascript,camera,three.js

Both OrbitControls and TrackballControls have a property target which is both the center of rotation and the camera look-at position. You can set it like so: controls.target.set( x, y, z ); three.js r.71...

How to make a skyBox with THREE.Js

javascript,three.js,skybox

This question has been answered here yet : MeshShaderMaterial is now ShaderMaterialand shader.uniforms["tNormal"].value = textureCube;

Artificial intelligence functionality in three.js

three.js

Webgl create buffer bind buffer allocate data set up state issue draw call run GLSL shaders three.js create a 3d context using WebGL create 3 dimensional objects create a scene graph create primitives like spheres, cubes, toruses move objects around, rotate them scale them test for intersections between rays, triangles,...

Displaying surface with non-rectangular boundary

matlab,image-processing,plot,3d,surface

Setting those values to NaN should do. Here's an example: [x, y] = ndgrid(linspace(-1,1,500)); z = cos(2*pi*(x+y)*2); z(x.^2+y.^2>1) = NaN; %// remove values outside unit circle surf(x,y,z,'edgecolor','none') colorbar view(2) axis equal ...

How to setup camera to point at object

ios,3d,scenekit

You can calculate the bounding box of your mesh, and scale it based on the number you get to make it the same size as other objects.

Javascript three.js smooth camera motion

javascript,three.js

Try starting a continuous movement on keydown, and halting on keyup. That's a general way to do hold inputs.

How apply different materials to either sides of a plane in three.js?

three.js

You need something like this: var face = tri.faces[0].clone(); face.materialIndex = 1; tri.faces.push(face); http://jsfiddle.net/j8k7yhLp/1/...

Why will my geometry not appear? (jMonkeyEngine)

java,3d,jmonkeyengine

The Box() constructor is meant for serialization only and doesn't initialize the mesh. The constructor in your upper example is deprecated. Use: tower = new Box(0.5f, 0.5f, 0.5f); This will create a cube of the size 1x1x1 centered at [0, 0, 0]. Also, make sure you look at the tower....

ThreeJS LOD clone()

three.js

Until next revision it can be solved by removing or commenting THREE.Object3D.prototype.clone.call( this, object ); in THREE.LOD.prototype.clone ...

Understand Vectors use

three.js

In three.js, the Vector3 class can be interpreted as representing either a 3D point, or a 3D direction vector emanating from the origin. Be careful, though. Direction vectors, when used as arguments in three.js methods, are assumed to be normalized -- that is, of unit length. three.js has a method...

Three js, block textures are blured

javascript,web,three.js

First of all you are loading the same texture several times. So assign it to a variable and then make the textures resolution-independent and render without blurriness. var border_tex = new THREE.ImageUtils.loadTexture('img/texture/herbe/border.gif'); border_tex.magFilter = THREE.NearestFilter; border_tex.minFilter = THREE.LinearMipMapLinearFilter; var top_tex = new THREE.ImageUtils.loadTexture('img/texture/herbe/top.gif'); top_tex.magFilter = THREE.NearestFilter; top_tex.minFilter = THREE.LinearMipMapLinearFilter; var...

creating a 3d array in python does not create array correctly

python,arrays,3d

You should use labels.append instead of numpy.append Example code - labels = [] for line in lines: lab = [h/100, maxf, title] labels.append(lab) Also this would create the labels list as - [[1,34,u'te],[2,44,u've],[4,43,u'ht]] [1,34,u'te],[2,44,u've],[4,43,u'ht] is not possible in python, these are either three different lists, or they are enclosed by...

How much data does texImage2D in WebGL need?

javascript,three.js,webgl

The row lengths are aligned to multiples of 4, except for the last row. In your case this means each row needs 2 bytes of padding, for a total of 152 bytes (3 * 50 + 2) per row. 152 * (50 - 1) + 3 * 50 = 7598...

How to check a point is inside an ellipsoid with orientation?

algorithm,3d,geometry,distance,computational-geometry

Find affine transform M that translates this ellipse in axis-oriented one (translation by -p and rotation to align orientation vector r and proper coordinate axis). Then apply this transform to point p and check that p' lies inside axis-oriented ellipsoid, i.e. x^2/a^2+ y^2/b^2+z^2/c^2 <= 1

Safe frame calculation

3d,3dsmax

The following MAXScript function demonstrates how to calculate a box2 of the safe frame dimensions, given a point2 of the viewport size and the render size. We need to account for two separate cases: one where the differences in aspect result in spacing on the left and right, and one...

Stripped shadows on collada objects

javascript,three.js,shadow,stripes,directional-light

You are getting self-shadowing because the rays of the directional light are exactly parallel to some of the faces of your geometry. Move the directional light to a slightly different location. For example, directionalLight.position.set( 250, 500, 200 ); Usually, light.shadowBias is used to remedy self-shadowing problems, but it is not...

Load multiple OBJ-files together with multple textures

ajax,three.js,textures

You can use anonymus functions. For example: loader.load(str_model_url, (function (url,scale) { return function (object, i) { console.log( url ); console.log( scale ); }}) (str_model_url, 0.5) , onProgress , onError ); ...

Unity WebPlayer “Failed to initialize player's 3D settings”?

web,unity3d,3d,augmented-reality,unity-web-player

Try this. Furthermore, I would just uninstall everything and just reinstall with a stable version of Unity 5.

Export ThreeJS Geometry to JSON

three.js,xml3d

You should try the toJSON() method : var json = geometry.toJSON(); This method is available for geometries, materials, lights, mesh ......

MATLAB: How to make camera light follow 3D Rotation

matlab,user-interface,3d,rotation,lighting

Implement own rotation functionality You can implement an own functionality to adjust the axes and the lights at the same time. This way the light gets adjusted continuously while rotating the axes. function follow_me_1 figure axes('buttondownfcn', @buttondownfcn); % assign callback set(gca,'NextPlot','add'); % add next plot to current axis surf(peaks,'hittest','off'); %...

how to create a 3D height map in python

python,matplotlib,plot,3d,surface

Even if I agree with the others that meshgrids are not difficult, still I think that a solution is provided by the Mayavi package (check the function surf) from mayavi import mlab mlab.surf(Z) mlab.show()...

Create a 2D texture from existing textures

three.js,textures,webgl,texture-atlas

The easiest way is probably to load your textures into a 2d canvas to build your atlas. Let's assume we have a function that downloads 512 textures and we want to put them in a grid of 32 by 16 var width = 128; // just assuming this is the...

EdgesHelper loses its mesh when scene is rotated

three.js

Yes, this is a consequence of how EdgesHelper(and some of the other helpers) have been implemented. If you want to use EdgesHelper, you have to adhere to two rules: EdgesHelper must be added to the scene, directly. The scene can't have a transform applied (for example, be rotated). Consequently, you...

JavaFX 8 Transform to pitch, yaw and roll rotation angles

matrix,3d,rotation,javafx-8

If you want to get the pitch, yaw and roll angles at any stage after several rotations, you can get them from the transformation matrix of the 3D model. If you have a look at the transformation matrix after several rotations: Transform T = model3D.getLocalToSceneTransform(); System.out.println(T); you'll see something like...

My .obj model is white even though I attached an .mtl file to it

three.js,.obj,dds-format

The references to your textures in the .mtl directory should be with respect to where your html file is. So the .mtl should look like this: newmtl M_WhiteEditQuarter_M_WhiteEditQuarter map_Kd assets/M_WhiteEditQuarter_M_WhiteEditQuarter_D.dds map_Ks assets/M_WhiteEditQuarter_M_WhiteEditQuarter_S.dds bump assets/M_WhiteEditQuarter_M_WhiteEditQuarter_N.dds the newmtl is just a name so it does not have to prefixed with assets. The...

3D Lines disappear sometimes

javascript,d3.js,3d,three.js

You are defining the variable material in two places, and consequently you are passing MeshBasicMaterial instead of LineBasicMaterial to the THREE.Line constructor. three.js r.71...