3 votes

How to avoid the cutoff of a Sprite when overlapping in a terrain?

You can force the sprite to render always on top by disabling the depth testing in the sprite's material. ...
Jay's user avatar
  • 810
3 votes
Accepted

Relative quaternion rotation (delta rotation) produces unstable results

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 ...
AtiX's user avatar
  • 61
3 votes

Adding multiple materials to a single mesh in three.js

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. ...
Elias Hasle's user avatar
3 votes

How to create guides to off-screen objects?

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-...
Jon's user avatar
  • 3,704
3 votes

Three.js— how to rotate sphere without moving light (using OrbitControls)?

[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....
Alberto Piras's user avatar
3 votes
Accepted

How To Make Seamless Custom CubeMap?

Firstly, the first derivative discontinuities you observe in your heightmap texture are just an artifact of flattening the spherical/angular domain into six gnomonic projection "charts". ...
DMGregory's user avatar
  • 134k
2 votes

Three.js— how to rotate sphere without moving light (using OrbitControls)?

You can use OrbitControls for that. If using a directional light, the light will have a target (any object with a position). By default this is a ...
Mauro Colella's user avatar
2 votes

Three.js— how to rotate sphere without moving light (using OrbitControls)?

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 ...
shan's user avatar
  • 191
2 votes
Accepted

2d game with 3d js. game engine

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 ...
LukeG's user avatar
  • 1,537
2 votes

Adding multiple materials to a single mesh in three.js

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 ...
Marcs's user avatar
  • 121
2 votes

How to move the camera to center an object in screen?

You need to position the camera relative to the object using the negative of its front vector (zAxis) multiplied by the distance you want. ...
Stephane Hockenhull's user avatar
2 votes
Accepted

How to orient a layer to connect 2 points AND facing the camera

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 ...
Bálint's user avatar
  • 14.9k
2 votes

threejs lerp and camera the animation is not smooth

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 ...
Daniel Awesome's user avatar
2 votes
Accepted

Assign biomes to areas with a Voronoi noise function

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 ...
DMGregory's user avatar
  • 134k
1 vote

Drag 3D camera with mouse cursor

What you want to achieve is called camera panning. When you use your mouse you are working with a 2d vector in screen space pixels. In order to correctly transform mouse 2d to world 3d coordinates ...
D3d_dev's user avatar
  • 338
1 vote

Camera Sensitivity in PointerLockControls to match actual games

The type of unit for 0.002, as the name suggests, is a factor. An arbitrary number chosen to lower the rate of turning so that tiny mouse movements don't spin the camera 100 times. To get fortnite-...
lost faith in stackoverflow's user avatar
1 vote
Accepted

How to move the camera to center an object in screen?

If you want to move the camera a certain distance from an object, and looking at the object, while preserving the camera's rotation, just move the camera at the object's location, then translate on ...
Tom Tsagkatos's user avatar
1 vote
Accepted

Change shadervalues for different Meshes in Three.js

Thanks to gman for the help: You would have one material per object you're drawing. In the page you linked the top screenshot shows 5 people in different colors so you'd have 5 materials, one for ...
TheCell's user avatar
  • 93
1 vote

Finding the closest face normal from a given point in space efficiently

Maybe you can set a number of raycasts from each point to different directions. Each raycast will return the closest face. You can than iterate through those. I know it is not a 100% satisfying ...
Normal's user avatar
  • 111
1 vote

Set custom Yaw Pitch and Roll in Three.js

I think that: How to convert a 3x3 rotation matrix into 4x4 matrix may help you on getting a 4X4 matrix. "to convert a 3x3 matrix to a 4x4, you simply copy in the values for the 3x3 upper left block,...
dnk drone.vs.drones's user avatar
1 vote

Throw ball - distance and force

This can be done by measuring the distance between the touch and release point. Along with measuring the time difference from when the touch started until the release happened. Then simply take the ...
vallentin's user avatar
  • 380
1 vote

How would I process accelerometer data to use it for camera rotation?

You don't need to use the accelerometer, there's already a way to get the device's orientation with the deviceorientation event: ...
Bálint's user avatar
  • 14.9k
1 vote
Accepted

Sorting sprites above the surface of 3D mesh?

It seems I was just doing the transformation wrong and missed some steps in the transformation pipeline. Here is my final transformation in ES6 javascript ...
Cobertos's user avatar
  • 1,634
1 vote

How can I rotate the camera for a player walking around the surface of a sphere?

Your problem seems to be that you're telling your camera that its up direction is a fixed world up, and then turning it upside down, which causes all sorts of fun mathematical chaos that's not at all ...
Lunin's user avatar
  • 1,346
1 vote

Three.js— how to rotate sphere without moving light (using OrbitControls)?

If you have nothing else in the scene you can fake it by moving the light source to the same (relative) direction as the camera before rendering. OrbitControls ...
Stephane Hockenhull's user avatar
1 vote

Position object in FOV in threejs

I'm not familiar with three.js, but from my experience with 3D graphics, there's a simple trick you can try. When you create a new object, move it to the camera's position, and copy the camera's ...
Tom Tsagkatos's user avatar
1 vote

Position object in FOV in threejs

I've tried things like h = tan(fov/2)*dist trying to get the height, but the problem is I don't have the distance between the object and the camera, since the object still needs to be created Well, ...
Jimmy's user avatar
  • 9,019

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