33

First of all, for every 3D vertex there is infinite tangent and bi-tangent vectors. The below image explains why there is an infinite number of tangent spaces for each vertex, the tangent and bitangent can have any direction in the shown plane. So inorder to properly calculate the most useful1 tangent space, we want our tangent space to be aligned such that ...


11

Ok I got it. After merging the whole geometry together, I still have the individual meshes in an array. So I can simply use these meshes for raycasting, even though they are not even rendered. Took me a while to realize this. For the picking I use this octree implementation: http://threejs.org/examples/#webgl_octree_raycasting This brings down the ...


4

great performance saving comes from caching geometries and materials. In your case, create CubeGeometry and MeshPhongMaterial objects only once and then use them when creating tiles - each tile will be separate Mesh but all pointing to same instance of material and geometry objects. Then do the same for all resources that can be reused - models, textures ...


3

FOV is field of view. Everyone likes to say that there is no camera in OpenGL, but to me that's a silly notion to hold on to even if it might be technically true. When you use the perspectiveCamera function you are essentially creating a camera. So think of the FOV as the type of lens. Is it a wide angle lens or more of a zoom lens? The FOV is given as ...


3

I wrote an Unity3D to Three.js exporter that does exactly what you ask for.


3

I suggest that you don't directly couple browser-input-events to your game-logic. I would do something like this: In your mousemove event-handler, read the current screen position and store it as a variable. In your game-update loop, get the latest mouse-position (the variable you stored previously) and calculate the players looking direction there. The ...


3

For each opponent/object/destination to display: Project it's worldspace location to view-space (MV) Flatten the Z to 0 Normalize the direction to unit-length Multiply by "HUD" radius (world/view-space units) (the linked image looks like they might have used aspect ratio, instead, to stretch circle into an ellipse) (i.e. scale by (widthFactor, heightFactor, ...


3

You can force the sprite to render always on top by disabling the depth testing in the sprite's material. material = new game.THREE.SpriteMaterial({ depthTest: false });


2

All I needed was to make sure that I have exactly one mesh selected (merge them first if needed) and then use File->Export->ThreeJS Object from menu. in my app, load it like this: var loader = new THREE.ObjectLoader(); loader.load("dragon.json", function ( obj ) { scene.add( obj ); } );


2

Clara.io exports Scene and Object data using the THREE.ObjectExporter. The resulting exported files are intended to then be loaded by the THREE.ObjectLoader. The start of these exported files will look like this: {"metadata":{"version":4.3,"type":"Object","generator":"ObjectExporter"},... Code to load files via the THREE.ObjectLoader is here on Github. ...


2

My answer is not specific to three.js. I'm a c and an OpenGL iOS coder. But I do think the techniques would apply. Your estimation of what your code sample does looks right to me. But as some commenters have said, it doesn't seem like the best method to handle time in a game loop. For example, regarding the scalar being 2.0 you said "When we do this, the ...


2

in the render function, you have function render() { var timer = Date.now() * 0.0001; camera.position.x = Math.cos( timer ) * 200; camera.position.z = Math.sin( timer ) * 200; camera.lookAt( scene.position ); renderer.render( scene, camera ); } That makes the camera take a circular path of radius 200 , always looking at the center of ...


2

You have multiple ways to interact from c++ to javascript. I can show you one way I find quite handy: in the js library file // here you write JS "handlers" mergeInto(LibraryManager.library, { new_cube: function(size, color) { var cube = new THREE.Mesh( new THREE.BoxGeometry(size, size, size), new THREE.MeshBasicMaterial({ color:...


2

Lens flare is always in front of any thing rendered so you may as well just disable the depth test when you draw it as the last thing. A sun/skybox can be drawn first with depth writing disabled. Changing the size is as easy as doing the perspective divide in the vertex shader explicitly and clamping the Z to -1,1. Or instead of putting the far plane at ...


2

As you guessed, you can know the vertices order by checking the faces. To know how faces could be read, check this link. Next follows an example (C#) on how it could be done (no errors checking). public class Face { static int TYPE_BITMASK_TRIANGLE_QUAD = 0; static int TYPE_BITMASK_FACE_MATERIAL = 1; static int TYPE_BITMASK_FACE_UV = 2; ...


2

The properties are dependent on the override of the class that inherits from object which is currently being used. You can see what properties are required by looking at the overridden method that will have the format of THREE.ClassName.prototype.raycast. See below for a bit of insight into whats actually going on when you use the raycaster. Raycaster.js ...


2

EDIT The current solution has the following problem: The applied braking force is static. That means if we randomly put a car on the road, other cars might be unable to break in time (since we always lower the velocity by a static braking force). I though I could scale the force somehow, but without much success (it causes oscillation). Now I calculate the ...


2

Turns out I was using the wrong thing for the job I was trying to do. OrbitControls .. y'know.. orbits the scene, and I wanted to rotate the sphere itself. I ended up implementing some mouse drag logic like so.. let isDragging = false; let previousMousePosition = { x: 0, y: 0 }; const toRadians = (angle) => { return angle * (Math.PI / 180); }...


2

[PROBLEM SOLVED] Hi! I created the 'ObjectControls' module for ThreeJS that allows you to rotate a single OBJECT (or a Group), and not the SCENE. You can find here a live demo https://albertopiras.github.io/threeJS-object-controls/ Here the repo https://github.com/albertopiras/threeJS-object-controls It's very simple to use, Hope this helps :) Bye ...


2

First there's a problem with your code, you should use callbacks when using a TextureLoader, and with multiple textures you should use Promises, with your code you are not waiting for textures to load and your material will not work. But after doing a ton of reading I'm unsure of how to use both material and atmosphereMaterial to my single sphere mesh. In ...


2

You can have multiple materials in one mesh in Three.js. Supply an array of materials to the Mesh constructor instead of a single material. You then also have to specify vertex groups in the geometry. If you want, you can specify the groups to contain the same vertices, only different material index. It is also possible to define multiple meshes using the ...


2

2d rendering is easily possible with 3d rendering engines, even when there is no explicit support for it. How it would work: Just put your two-dimensional geometry parallel to the xy-plane (or any other plane) and set your camera's viewing direction orthogonal to this plane. I would suggest using a orthogonal projection matrix, which allows you to make use ...


2

Thanks to Neal on Mathematics Stackexchange I found out that my code to calculate relative rotations was indeed in the wrong order (I took it from Unity Anwers which seems not to be the correct way to do it within three.js) - with the tricky part being that it worked out most times. So, the correct solution to calculate a relative rotation is qDelta = qTo * ...


2

You need to position the camera relative to the object using the negative of its front vector (zAxis) multiplied by the distance you want. var ignore1 = new Vector3(); var ignore2 = new Vector3(); var front_vector = new Vector3(); // get the direction the camera is pointing at camera.matrix.extractBasis ( ignore1, ignore2, front_vector ); // put the ...


2

Take the vector pointing from the first point to the second and also the vector from the first point to the camera position, take their cross product. This creates a vector perpendicular to the other ones. Take this vector and the one pointing from the first point to the second and take their cross products too and normalize it. This gives you the normal of ...


2

Unfortunately there are many ways to do what your asking and from the info you have here it's very hard to tell what's going on. We're missing a lot of information. It appears to me that zoomCamera(); in onObjectsClick(event) is not an "Updated" but a single frame function. It appears to me that you are using lerp in a way that it's not really designed for....


2

The dual graph of a Voronoi diagram is a Delaunay Triangulation: (The corners of the Voronoi polygons are the circumcenters of Delaunay triangles, and the seed points of the Voronoi diagram are the vertices of Delaunay triangles. Corresponding edges of the two diagrams are perpendicular) This relationship is so key that many libraries/algorithms for ...


Only top voted, non community-wiki answers of a minimum length are eligible