Questions tagged [three.js]
Three.js is a JavaScript 3D Library which makes use of WebGL
123
questions
0
votes
0
answers
27
views
Shadow squares on meshes
I had created project on r3f (React THREE Fiber), and after "blocking" when I decided to add high resolution models, I noticed this shadow issue.
Help me to understand, how can I fix the ...
3
votes
1
answer
269
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 ...
- 85
0
votes
1
answer
70
views
Discontinuous Normals on a Normalized Cube Mesh with Displacement Texture
In my project, I have created a normalized cube using six plane meshes. To improve its visual quality, I added a displacement texture and calculated the normals for that texture to ensure proper ...
- 3
0
votes
0
answers
174
views
three.js shader to keep moving vertices of points cloud inside sphere
I am trying to achieve the effect of having a points cloud with moving points while also keeping them confined within a sphere of radius X.
I have managed to do it without using shaders but I want to ...
1
vote
2
answers
154
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 ...
- 13
1
vote
1
answer
311
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
...
- 11
0
votes
0
answers
82
views
Octree build time crashes page for complex mesh
Using the standard three.js FPS example of octree implementation with a more advanced mesh, crashes the page on load.
My first idea is to write a few functions to save the octee data to a file, then ...
0
votes
1
answer
161
views
Multiplayer game - Player position updates transmission pattern
I'm building a very basic 3D multiplayer game using Three.js and Socket.io where all the player does is move in an environment.
Considering there will be ~ 100 players in a single room and all data ...
0
votes
1
answer
116
views
Creating a Game in Three.js do i share camera, scene objects?
Im creating a game with React and Three.js and vanilla Javascript, i have several clases, representing objects in the game, do i need to create a camera, scene, renderer for each class or i simply ...
- 111
1
vote
0
answers
294
views
Aircraft simulation
Trying to get a "semi" realistic aircraft simulator. I'm pulling my hair out because I just can't get the math right. I'm not looking for super realistic but want to at least get some ...
- 111
0
votes
0
answers
98
views
Three.js Animate Text error geometry.faces
In this three.js Text example they animate text, i am trying to implement it on React/Three.js but i got the error TypeError: can't access property "length", geometry.faces is undefined
in ...
- 111
0
votes
1
answer
154
views
Interpolate colors between vertex in a plane
So I have this plane generated with two different Perlin noises. It has mainly 3 regions, divided by color. I want to smooth out the lines, to create a "gradient" so there are no abrupt ...
- 5
1
vote
0
answers
72
views
Calculate 2d rotation to target (uniformly accelerated rotation, constant speed)
I'm trying to calculate an uniformly accelerated rotation for the autopilot module in my 3d space game shooter. The autopilot should fly the spaceship to any given point in the 3d space on the ...
- 11
0
votes
1
answer
589
views
Assign biomes to areas with a Voronoi noise function
I've created this terrain based on a Voronoi noise function:
This is how it looks without the elevation:
I want to assign biomes to the polygons following certain rules and use the slope on the ...
- 5
0
votes
0
answers
48
views
How should I modify my terrain according to the biome? [duplicate]
I have this terrain I generated using Perlin Noise layers whose colors are applied based on the height of the vertex, just for reference before I am done being clear about how I will implement the ...
- 5
1
vote
0
answers
154
views
Z-Fighting mitigation performance overhead
Which of following approaches will have less performance overhead(using threejs renderer)?
I am currently have an issue with z-fight for distant objects, while my near/far plane is already set to most ...
0
votes
0
answers
157
views
How to calculate local orientation of child relative to parent from only global positions?
I am trying visualize a human finger's pose with a 3D model in Three.js.
The 3D model is composed of 3 bones that represent the proximal, middle, and distal bones of the human finger, connected in ...
- 1
0
votes
1
answer
522
views
Shade a box different colors for two ends with one material in Three.js
First, I knew the following basic knowledges,
GLSL Language, Learn WebGL2 - GLSL
* GLSL Shaders
OpenGL - Coordinate Systems, [OpenGL - Advanced GLSL]
3D Game Shaders For Beginners - GLSL
...
- 121
0
votes
1
answer
36
views
How to check if a line casted from one point to another point passes through a mesh?
Let's say we have two vectors A and B. Is there a way to use Three.js' Ray or Raycaster classes to cast a line between vector A and vector B and check is it passes through a mesh in the scene? I know ...
- 11
1
vote
0
answers
173
views
Is there a way where we can verify if certain image is 3D or not [closed]
I wanted to understand - Is there a way where we can verify if certain image is 3D or not
So basically I want to automate the process where we can detect if certain given image is of 3D or not
Problem:...
- 11
0
votes
1
answer
887
views
How to move a player on a sphere surface using Ammo.js and Three,js
I am moving a rigidbody (the character) on the surface of a sphere, like what is described here.
I am facing the following issue that I am having hard time to solve:
After moving the character, it ...
- 141
0
votes
1
answer
474
views
What is the best rate at which to send updates to clients for a first person shooter NodeJS WebSocket server?
I developed a multiplayer FPS using WebGL, Nodejs and WebSockets.
So far it is running great.
I am currently using setInterval(sendPlayerPositions, 16); to send updates to WebGL clients.
Ideally I ...
- 103
0
votes
1
answer
452
views
How to import three.module.js
I'm looking at this three.js cubemap example, and it runs fine in my browser when loaded from that page.
After much strain to find and download the files - it does not run?
What am I doing wrong, with ...
- 21
2
votes
0
answers
444
views
THREE.ShaderMaterial cannot perform antialiasing
I created a ShaderMaterial to draw a box in three.js using the following key code:
...
- 121
1
vote
1
answer
1k
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 ...
- 143
1
vote
0
answers
311
views
How can I use canon.js in three.js editor?
I would like to add bullet physics to a scene crated by the three.js editor. Where do I need to put the canon.js file in order to be able to access it's functions from the editor scripts?
I ...
-1
votes
1
answer
1k
views
threejs lerp and camera the animation is not smooth
what is the problem with linear interpolation?
in update() in case this is animate()
and when I call zoomCamera() in update() there is lerp with smooth
but when I call here
...
- 283
0
votes
3
answers
565
views
Center Perspective Camera on Coordinates
I've got a PerspectiveCamera and set of coordinates (x,y,z).
How could I pan the camera to make these coordinates at the center of the screen?
- 1,146
0
votes
0
answers
638
views
Three js raycaster WITHOUT camera
I seem to find only examples to use the raycaster with the camera, but none that just have a raycaster from Point A to Point B.
I have a working raycaster, it retrieves my Helpers, Lines etc. but it ...
0
votes
2
answers
1k
views
Drag 3D camera with mouse cursor
I have a camera that is moved by changing its X and Z coordinates. However, the camera is rotated, so when an object moves by 1 unit in the world, the number of pixels it moves by isn't trivial to ...
- 1,146
1
vote
1
answer
332
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
0
answers
51
views
How to load models with possibility to change textures in Three.js
I'm working on a game in Three.js where I have a few variations of the same model in blender.
What I want to achieve is that I'll load the model once with all the material settings, but then I'll ...
- 111
0
votes
0
answers
844
views
OpenGL seamless repeated texture has artifacts on edges
I'm currently trying to map a seamless texture onto a 3d wall object but when it comes to the edges of the texture there are visible artifacts.
closeup:
Here is the shader code i use for the texture ...
- 101
0
votes
2
answers
478
views
How to avoid the cutoff of a Sprite when overlapping in a terrain?
I have a scene where I have a terrain as a PlaneGeometry. And I'm trying to locate a building on it as Sprite. But I'm not able to put that building/sprite centered on the terrain without getting a ...
- 115
0
votes
1
answer
213
views
Combine rotation XZ (horizontal) with YZ (vertical). Math formula
I'm trying to make a rotation vertically and horizontally around a point at the same time but I'm not able to combine both.
I have this formula for the horizontal rotation:
...
- 115
0
votes
1
answer
31
views
How to orient a layer to connect 2 points AND facing the camera
here is my question, which I hope will be in general interest:
If you have got 2 Points in 3D space and want a plane to connect those, you can quite easily use a function similar to "lookAt" to ...
- 3
1
vote
0
answers
2k
views
How to make an object which position is not on the world origin rotate around the world orgin in threejs?
I've loaded an object and set its position on vector(5,2,-5) by threejs. And I wanted it to rotate around the origin point in the world coodinate system. I found a method in class Object3D called '...
- 23
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 ...
- 163
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 ...
0
votes
1
answer
2k
views
Change shadervalues for different Meshes in Three.js
Hey I am writing a Shader for Three.js.
My goal is to have multiple objects with the same shader and each object should have a color set on the object that is then given to the shader. The goal is to ...
- 93
0
votes
1
answer
3k
views
Raycasting in three.js not working properly on ipad and touch devices
I am working on a 3D tool for desktop and iPad. Everything is working fine except for two issues:
Issue 1 - When I select a 3D object with the mouse and move it on an iPad (as opposed to on desktop, ...
- 3
0
votes
0
answers
203
views
How to position a 3D crosshair on an objects face and set its angles **outward** from objects face?
What I have right now, is a ray tracer for my cursor on my canvas, when I click on the object, it gets the vector of my selection in the 3D space on the object I had my mouse on.
The ray tracer ...
- 111
0
votes
1
answer
280
views
Finding the closest face normal from a given point in space efficiently
I have a large model (roughly 400k faces) and a large number of points on this model (roughly 2000) and I need to calculate a normal per point based on the closest face on the model. Is there a faster ...
- 1,634
0
votes
1
answer
1k
views
Set custom Yaw Pitch and Roll in Three.js
So I have the following struct in C++, it gets updates with the values of an program that uses a camera in spectator mode:
...
- 1
3
votes
1
answer
7k
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 ...
- 61
0
votes
1
answer
2k
views
Three.js recover camera values
When I start the script, camera has starting values. When I will move it and click button to set up startign values it is never same. What values I missed?
The best way, I suppose, it is to look at ...
- 101
1
vote
1
answer
165
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.
...
- 920
2
votes
0
answers
328
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 ...
- 21
1
vote
1
answer
863
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 ...
- 31
1
vote
0
answers
418
views
Texture mapping artifacts at triangle edge (for thin triangles?)
I'm working on generating programmatic textures for 3d models and showing them in WebGL using Threejs. To do this I generate a texture image (PNG) that contains per-triangle textures (a rectangle on ...
