Questions tagged [three.js]
Three.js is a JavaScript 3D Library which makes use of WebGL
125 questions
15
votes
1
answer
39k
views
How to compute tangent and bitangent vectors
I have a texture loaded in three.js, then passed to the shaders. In the vertex shader I compute the normal, and I save into a variable the uv vector.
...
13
votes
1
answer
4k
views
How to play hundreds of explosion sounds
I am developing an RTS game with boats, the boats can shoot very frequently and I am having a hard time dealing with the explosion sounds. I am using three.js and the audio API it has that uses the ...
11
votes
4
answers
10k
views
Merging geometry/mesh without losing benefits
In three.js we can simply merge geometry to limit the amount of draw calls and thus increase performance. In a simple test with one material, I could draw 50.000 cubes + shadows @ 60fps on my GTX660 ...
6
votes
2
answers
2k
views
Walking on a sphere
I'm working on a game which involves walking your character on the surface of a sphere. Using the answer to Arbitrary Rotation about a Sphere, I've written my code as:
...
5
votes
2
answers
8k
views
What object3D properties are required to make rayCaster.intersectObjects() work?
FYI, I am trying to do something almost identical to the following:
Merging geometry/mesh without losing benefits
I essentially have a list of Three.object3D's. These objects are "merged" ...
4
votes
4
answers
10k
views
Three.js— how to rotate sphere without moving light (using OrbitControls)?
Okay, I think the problem that I'm having is that when I create my DirectionalLight with three.js, when I then rotate my object with ...
4
votes
1
answer
776
views
Why game engines usually don't offer a vector3.rotate method? [closed]
Game engines like Three.js, Ogre3d and Unity3d often don't provide a default rotate method on their vector class. You usually have to do something like:
...
4
votes
1
answer
942
views
Starting with shaders and particles
I'm working on a flow field with particle systems and starting to learn about shaders in three.js.
Current state of my work is available here.
As such amount of calculations is quite heavy for a big ...
4
votes
2
answers
3k
views
How do you avoid lag with Three.js and mousemove?
I'm trying to create a browser moba-like game using three.js. I'm using WASD for movement and the player rotation follows the mouse with mousemove then lookAt() the ...
4
votes
1
answer
939
views
Vertex ordering with THREEjs's exporter
I'm using THREEjs's exporter to export a 2D polygon plane. The resulting JSON gives me the vertices. I'm trying to properly order these vertices as to make the actual polygon shape, without luck.
...
4
votes
1
answer
668
views
How do I make cars on a one-dimensional track avoid collisions?
Using three.js, I use a simple spline to represent a road. Cars can only move forward on the spline. A car should be able to slow-down behind a slow moving car. I know how to calculate the distance ...
4
votes
1
answer
5k
views
Most efficient way to implement delta time
Here's one way to implement delta time:
...
4
votes
2
answers
5k
views
How to rotate an object so it stands correctly (back always facing the camera)
I have the following scene:
And I have two 3D vectors, the camera position, and the focus position. The focus vector is always behind the monster. I know how to rotate the camera around the focus with ...
4
votes
1
answer
159
views
Timers and performance for mobile JS
I'm using the Three.js JavaScript library to do some things in WebGL, and I wonder how the graphic aspects of timers are done on mobile.
I was creating numbers with geometries and just replacing them ...
4
votes
1
answer
7k
views
Orthographic Camera and Raycasting in Three.js
I'm working on a test project porting a simple game from iOS to Javascript. I've got the orthographic camera working and it can view the objects in the scene and move up and down the tower of meshes ...
3
votes
1
answer
13k
views
Translate object in world space usings it's local rotation
I'm using Three.JS to render some objects. I'm struggling with some very simple object rendering and translation.
The scenario is that I spawn an object at 0,0,0 in world space with 0,0,0 rotation.
<...
3
votes
1
answer
4k
views
determining view boundaries based on z position when using a perspective projection
I'm using three.js to make an animation of a box moving around the screen in 3 dimensions.
It is moving pseudo-randomly, according to a noise function. So, I want to place an invisible wall just ...
3
votes
1
answer
3k
views
Reduce render time for a tiled map in ThreeJS
I'm working on a WebGL game using Three.js, its been a few days and I found my first issue, render time on big maps.
The game runs great, there are even some AI mobs that run around randomly like ...
3
votes
2
answers
6k
views
Quaternions - how to limit axis?
Is there any possibility to limit quaternions to move only in x & y axis (like in Eulers- yaw and pitch, without rolling)? I's there any equation or something similar to do this?
Some example:
...
3
votes
1
answer
806
views
How To Make Seamless Custom CubeMap?
I'm currently working on a Three.js project, and I'm aiming to create a seamless cube map. To achieve this, I created six planes and assembled them into a cube. Then, I utilized a shader to generate ...
3
votes
1
answer
8k
views
Relative quaternion rotation (delta rotation) produces unstable results
Use case: I have a currentRotation quaternion and a targetRotation quaternion and need to calculate the relative rotation ...
3
votes
0
answers
747
views
My collision detection is not working when I rotate my mesh in three.js
I am trying to move a ball mesh through a maze. The maze belongs to a parent object3d. My issue is that when I move the ball I can't detect collision right well because in the rotation, the axis ...
2
votes
2
answers
10k
views
Adding multiple materials to a single mesh in three.js
I've been doing some reading and can't seem to figure out a good way to do this..
I have a simple globe with a material on it like so:
...
2
votes
1
answer
9k
views
How to make texture size correctly in THREE.js?
I'm new to THREE.js and I have a frustrating problem. I can't get my grass texture to size "normally" on the terrain.
I get it, the terrain is steep, but that doesn't mean the grass should be ...
2
votes
1
answer
91
views
How to create guides to off-screen objects?
I've played Metroid Blast on Wii U, and would like to build one of its features in a three.js game.
The feature is: if an opponent is out of view, a guide is displayed showing the direction of the ...
2
votes
1
answer
3k
views
How can I implement a simple "jump" action with three.js and/or Physijs?
Assume I have a simple Physijs object like this car. How can I adapt something like this to "jump" (hydraulics ftw!) when pressing spacebar for instance?
I'm currently thinking ...
2
votes
1
answer
1k
views
2d game with 3d js. game engine
I'm trying to understand if it's possible to create a game where the player can switch between 2d (strategic/bird view) and 3d (actual gameplay) using only the 3d supported JS/HTML5 game engine, like ...
2
votes
1
answer
2k
views
Emscripten code and three.js
I would like, if it's possible, to use Emscripten code generated from C/C++ with the Javascript library three.js. For example, from emscripten code I want to pass rendering information to the three.js ...
2
votes
1
answer
3k
views
Three.js camera turning leftside right
In Three.js I am trying to implement an orbiting camera can be rotated around the x and the y axis. I am using these two functions:
...
2
votes
1
answer
610
views
Particle systems on multiplayer games
I'm working on a 2D javascript/Three.js multiplayer game, using web sockets and an authoritative server currently written in Python.
The combat mechanic will be similar to Geometry Wars however i'm ...
2
votes
2
answers
10k
views
How to handle 3D collisions using raycasting (with a reflection vector?)
I'm making a game using THREE.JS, and I want my character to walk on the terrain, and collide with static 3D objects (=AABB boxes) that are on that terrain.
The problem is: THREE.JS has only a ...
2
votes
1
answer
935
views
Sorting sprites above the surface of 3D mesh?
I'm having trouble getting sprites to display on top of a 3D mesh. My requirements are as follows:
Sprite should billboard
Sprite should not clip into the mesh
Sprite should be hidden when on the ...
2
votes
3
answers
1k
views
How can I rotate the camera for a player walking around the surface of a sphere? [duplicate]
I'm making a 3D game where the player can walk across the surface of a planet.
I am having a problem correctly rotating the camera's frame of reference, so that the camera is oriented correctly ...
2
votes
1
answer
470
views
White dots artifacts when applying borders to hex tiled geometry
I have a hexagon tiled geometry I created in Blender
Which I then load in WebGL, using THREE.js library. Below is the loading code, I've cut the code of creating scene, lights, etc. I create rendered ...
2
votes
1
answer
260
views
Is it possible or not to share a geometry among many meshes and apply a different shaderMaterial for each?
I instantiate one PlaneGeometry, then I instantiate 200 meshes sharing this geometry and with their own instance of a given shaderMaterial. Here is a simplified version of the code :
...
2
votes
1
answer
294
views
How good do I have to be at Math to create a 3D game using three.js? [closed]
A question I've often had, how good at Math do I need to be to create 3 dimensional games? I get along with 2d games just fine. I understand everything I'm doing without problems after practise. ...
2
votes
0
answers
614
views
THREE.ShaderMaterial cannot perform antialiasing
I created a ShaderMaterial to draw a box in three.js using the following key code:
...
2
votes
0
answers
389
views
Clipping drawn mesh by arbitrary volume
I'm trying to create a visual effect where an arbitrary part of the main scene is either clipped out by or cropped to an arbitrary volume. That is to say, I might want to draw just the area of the ...
1
vote
2
answers
6k
views
How to load geometry/object/scene created in Clara.io with Three.js
Does anybody know how to load anything created in Clara.io into your Three.js scene?
Clara.io allows export of ThreeJS geometry, object or scene. I tried all those in combination with all THREE ...
1
vote
2
answers
9k
views
How to move the camera to center an object in screen?
For example, an object is located at (x,y,z) in world space. Now how to calculate the offset translation, I mean no rotation, that will be applied to the camera so as to place the object at the center ...
1
vote
1
answer
238
views
Handling different renderers Y axis direction in a single engine
I have an engine that uses either three.js (3D WebGL rendering library) or pixi.js (2D rendering library) depending on the game.
...
1
vote
1
answer
1k
views
WebGL (three.js) - rendering object behind camera far plane
I need to have one object that is always visible/rendered (a lens flare, to be exact). I don't want to set the camera far plane to the maximum possible distance between camera and the sun (performance ...
1
vote
2
answers
4k
views
Three.js: Lighting not calculating correctly on THREE.Geometry objects
I have a three.js (REVISION: '68') issue with the lighting of THREE.Geometry objects:
I'm using the THREE.Geometry class to build up objects using vertices and faces, then I computeFaceNormals() and ...
1
vote
1
answer
1k
views
How to manage frustum culling
I have a spherical clipmap based planet terrain. The entire planet is made from a ring geometry of 1 unit which the vertex shader moves to cover the entire planet of 6 million unit radius. But the ...
1
vote
2
answers
394
views
How to publish WebXR game on Quest or Steam stores?
I would like to develop a simple and small game for WebXR so that Quest, Index, etc. can play it. I would eventually like to be able to put it on the Quest store and Steam.
Is there a way to publish a ...
1
vote
1
answer
667
views
My GLTF models made in Blender are transparent from certain directions
When I rotate the camera some of my blender models become transparent from different angles. They are gltf models
Here is the Python to save the gltfs
...
1
vote
1
answer
2k
views
THREE.JS - How to know the shortest rotation direction an object must do to look at other?
I am trying to understand a way in THREE.JS (and the mathematical foundation) to get the direction an object should rotate to lookAt other but without actually rotate it.
I've tried to use ...
1
vote
1
answer
387
views
Camera Sensitivity in PointerLockControls to match actual games
I am creating a FPS game online. I want the user to be able to use a sensitivity they are familiar with from games they've played. In this case, I want them to use their Fortnite sensitivity.
I am ...
1
vote
1
answer
3k
views
3rd person camera rotate around player with mouse
I'm trying to make a 3rd person camera for a game with THREE.js and Physijs (if that's important), and so far I have set it up so that the camera follows behind the player using cos and sin etc. but I ...
1
vote
1
answer
921
views
Throw ball - distance and force
I have a question, I need a formula to calculate the distance and a force based on the speed that drags the finger up on the phone. And is there any way I can get a look? And also shows the trajectory ...