26

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 ...


7

It seems that most engines do have those rotation methods. XNA has one in it's Vector3 struct. // Returns a new Vector3 that results from the rotation. public static Vector3 Transform ( Vector3 value, Quaternion rotation ) three.js has the function exactly as you wrote it. In Unity's case, their Vector3.Rotate() method might be internally ...


4

Store a direction vector as a tangent to the sphere. When you move, you can take this tangent, the normal vector (normalized position on the sphere) and cross them to get a general axis to rotate around. If you're limiting all movement to a single 2D plane (you're just using a single angle), for direction all you need is a sign (+1 or -1) to multiply your ...


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

Well, the documentation is apparently non-existent at this point, but searching the source yields the following: applyCentralImpulse = function ( force ) So, create a vector pointing up, upVector.set( 0, jumpFactor, 0 );, then use applyCentralImpulse to the vehicle to make it jump. Alternatively, you can use applyImpulse ( force, offset ) and supply an ...


3

Don't use quaternions. Store yaw and pitch Euler angles, and convert to a quaternion if you need to (for supplying to another piece of code, for example). There are no real advantages to using a quaternion like this (this set up cannot get into a gimbal lock, for example). If you feel the need to use a quaternion, use two: one to represent the pitch and one ...


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

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

Your players may hack your game. Verifying things on the server is good to combat that but potentially bad for performance. Collision detection can fail if not done carefully. Say the particle is moving quickly and you're only testing for intersection with an object. If the particle moves from one side of the object, through the object, and on to the far ...


2

If you know how to turn the mesh to a desired rotation vector, you can just get the direction the object should walk with the following formula direction = normalize(position - focus) Where position is the mesh position and focus is your focus position. If the focus is really behind the mesh as you said, just multiply it by -1. If as you said, you can't use ...


2

The solution is to set the boundingSphere attribute on the original geometry to the radius of the planet. Now even though only the vertex shader moved triangles are in view, I can still see the planet.


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

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

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

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

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 ...


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 ...


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