Stack Overflow
Stack Overflow

Questions tagged [react-three-drei]

275 questions
1
vote
1 answer

First person perspective in threejs

I've created this example from a GLTF file of Dragonball animation on scroll, but i couldn't achieve my goal which is the user should feel like he is the one riding the car ( 1st person perspective ), How can i do that? Also i have a question, when…
Moncef Grey
  • 33
  • 5
1
vote
0 answers

How to animate camera in React three fiber without lookAt()?

I am trying to animate a camera movement so that when a user clicks on the contact menu, the 3D model shows on the left of the screen. Something like this project Currently, I'm using the UseFrame hook as in this tutorial The problem is I'm using…
lorenzoajt
  • 105
  • 2
  • 7
1
vote
0 answers

React Three Drei: PresentationControls not working

Can somebody explain why the following block does not allow for using controls? import React from 'react' import { PresentationControls, Stage } from '@react-three/drei' import { Canvas, useLoader } from '@react-three/fiber' import { GLTFLoader }…
knipknap
  • 5,934
  • 7
  • 39
  • 43
1
vote
0 answers

iFrame not detecting touch or scroll on mobile with 3D scene - Threejs - React Three

I have created a iFrame on my 3D website in which renders a path from my portfolio. I have been attempting to scroll or touch (mobile) this iFrame for a while now, the desktop version works fine, you can scroll, access pages, etc although on mobile,…
Nilton Schumacher F
  • 814
  • 3
  • 13
  • 43
1
vote
1 answer

React Native Application crashing on release but working on debug when trying to render a 3d .glb model using React Three Fiber

I have a bare react native app with expo-modules for expo-gl and react-three/fiber and react-three/drei. I'm trying to render a 3d .glb model with animations and external textures in a separate .jpg file and it is all working fine on debug but on…
sedDev
  • 33
  • 4
1
vote
0 answers

Need help converting three.js snippet to React Three Fiber

I'm trying to follow a tutorial on three.js, but coding it in React three fiber. Am stuck with the following snippet, to create a block, with line and edge geometries. Can anyone help, I basically need to convert it to R3F? three.js: function…
Deepto
  • 11
  • 1
1
vote
3 answers

How can I get a reference to the Scene object in React Three Fiber?

I'm trying to figure out how I can get the scene object programatically in React Three Fiber, so that I can add a Three component in the traditional way: scene.add(myThing). I've tried using const canvasRef = useRef() with …
timhc22
  • 7,213
  • 8
  • 48
  • 66
1
vote
0 answers

How to change the shape of Points from ThreeJS from a square into a circle?

I am using React, Three JS, React-Three-Fibre Here is what I have: // Texture for Points const getTexture = (size, color) => { const matCanvas = document.createElement('canvas'); matCanvas.width = matCanvas.height = size; …
stopbanningmelmao123
  • 11
  • 5
1
vote
1 answer

What makes the component re-render?

I have trouble finding the reason for making the component re-render when scrolling down. I've tried to build scenes with particles using shader and FBO techniques. I used useRef and useMemo to prevent re-rendering instead of useState. I tried to…
hello
  • 21
  • 1
  • 3
1
vote
0 answers

useProgress React three drei always goes from 0 to 100

I'm using useProgress from react three drei. Apparently, this is used to keep track of the loading state from the models on the scene. I have created a loading screen with a progress bar in which I will be showing the loading state from this…
Nilton Schumacher F
  • 814
  • 3
  • 13
  • 43
1
vote
1 answer

Html blurry on rotation: react-three/drei

So I can't seem to get html to rotate with react-three/drei without it being extremely blurry. It won't blur at smaller sizes, but whenever I add more text it reaches a point where it just blurs up like below. If there's a more standard way to…
Andrew Young
  • 684
  • 1
  • 13
  • 23
1
vote
1 answer

React Three Fiber Html tag not respecting if object is in front

I have been working with React Three Fiber for a while now. I'm implementing a Html tag in my code, this html tag will have a page for now. Although, all the content inside this html tag, doesn't seem to respect the objects at all, if a object is in…
Nilton Schumacher F
  • 814
  • 3
  • 13
  • 43
1
vote
1 answer

How to set a plane to be the size of the camera React-Three-Fiber?

I'm trying to add a 3D effect on a plane in a React site. But I haven't been able to create a plane that fills the camera, like in all the Three.js shader or post-processing examples. I have tried using an Orthographic Camera + plane, based on this…
Cécile Lebleu
  • 125
  • 2
  • 14
1
vote
1 answer

can primitive tag react three fiber only be used once for the same model

I have an iphone model and i want to load it to my react project. I use primitive tag from react three fiber R3F which is not a real object that we will be able to see in the scene, but it’s a container supported by R3F. I want to display 2 iphone…
Yustina Yasin
  • 147
  • 2
  • 12
1
vote
1 answer

Text masking using react fiber/drei

Is it possible to mask a / or mask another object with / like this image which is a text masking a cube. I've seen the examples on the pmndrs/drei and tried few things like replacing some other objects but I can't make…
A.Taghavi
  • 25
  • 6
1 2 3
…
18 19