Questions tagged [r3f]
The r3f tag has no usage guidance.
14
questions
0
votes
0
answers
37
views
Locomotive-scroll don't work in my code in R3F
Locomotive scroll doesn't work in my code. When I click on a 3D element it displays a modal with text and I'd like to add scrolling effects with locomotive, I don't get console errors but scrolling is ...
- 1
0
votes
0
answers
25
views
react three fiber scene lagging on windows when keyboard keys are held down
I have a next JS app that is using react through fiber to create and render a scene with a model of an airplane. I have an array that contains about 50,000 objects that describe the airplanes position ...
0
votes
1
answer
414
views
Why does the error While resolving: [email protected] occur while installing react-three-fiber in react-native?
I am trying to use react-three-fiber in react-native. When I try to install and run it according to the manual, the following error occurs.
When I run npm install, the following error occurs. Can you ...
- 11
0
votes
0
answers
12
views
Problem of misalignment with html components when zoomed in and out with react r3f
I want to position the html components like mesh even if they are enlarged or reduced.
But this is what happens when you zoom in or out
enter image description here
this is my code
<Canvas style={{ ...
- 1
0
votes
1
answer
45
views
React three fiber - setting up postprocessing using effectComposer and Passes (OutlinePass) from three.js addons
I'm having a hard time using the R3F -postprocessing library so I decided to use raw threejs classes:
By diving into the R3F extending third party library tutorials I managed to setup the renderPass ...
- 257
-1
votes
0
answers
18
views
R3F how can I get the camera controls through the hook get()
In a model class I'm calling the r3f hook get() to the camera controls
const { raycaster, camera, scene, gl, controls } =
ViewerModel._shared.viewerState!();
the console log prints it as a ...
- 257
0
votes
1
answer
37
views
Converting 3ds/obj/fbx 3d model to glb
Im trying to implement a 3d baseball stadium model to my next.js project using three.js/r3f.
The problem is that the model i need only supports fbx, 3ds, obj format, and as far as i know, to implement ...
- 1
0
votes
0
answers
22
views
Using r3f to update camera rotation/lookAt value
I’m pretty new to r3f and ThreeJS in general, I’m trying to achieve an effect where the camera starts on the outside of the model at [0,50,50] for instance, then animates to the centre of point at [0,...
1
vote
0
answers
27
views
Fix skewed image when camera is rotated in three.js (R3F)
Here is a code snippet of what I have done so far
const Sphere = () => {
// url is an panoramic image of type .png, jpeg, webp, or jpg.
const texture = useLoader(THREE.TextureLoader, url);
...
- 101
0
votes
0
answers
17
views
R3F Single Canvas Multiple ScrollControls
I want to have multiple ScrollControls, each with a Scroll. The implementation below makes only the 2nd ScrollControls work as expected, why is the first one broken?
function VerticalScrollContent1() {...
- 251
0
votes
1
answer
70
views
R3F Decal with specific shapes
I want to be able to change the shape of Decal mesh such that the image appears cropped according to the given shape. My attempt was to make it a triangle.
const Image = ({ position, image, scale, ...
0
votes
0
answers
49
views
shortest path between two points(mesh) in the glb file in three.js using React.js
I've a .glb file which is about to showcase the map. I need to find the shortest path between two points(mesh) and draw a line using Yuka . The solution should be in React.Js or R3F. Also camera ...
- 9
0
votes
1
answer
37
views
Building layout of the warehouse using react three fiber, while building 1/10 project it started freezing
I am trying to create 3D layout of the warehouse but even I build little part of the project it started freezing in first person movemenent . So I am wonder is that possible to create such a project ...
- 5
0
votes
0
answers
27
views
How do I convert camera angle in first person perspective to velocity in order to throw an object away from the camera?
I am using rapier physics with R3f, using pmndrs Ecctrl.
// returns the current player position or a default position
const calculatePosition = useCallback((pos, addMe) => {
if (ecctrlRef....
- 2,404