Stack Overflow
Stack Overflow

Questions tagged [drei]

18 questions
5
votes
0 answers

Unable to load textures using remote url in react-three/drei/native

I'm trying to load an image texture using useTexture and apply it to a meshStandardMaterial in my react-native app. The texturing works fine when I import the image from local assets folder. But, when I change the image to a remote URL, the…
KBhokray
  • 117
  • 1
  • 10
3
votes
3 answers

How to limit panning distance in react three fiber MapControls

I‘m using React Three Fiber and drei. I'm wondering how to limit the maximum panning distance with the MapControls. There are some solutions online on how to archive it with plain three.js but nothing using the MapControls or OrbitControls from drei…
Alexander Hörl
  • 578
  • 4
  • 11
  • 24
2
votes
0 answers

React state update during control change breaks OrbitControls from three

I am using react three with drei orbitControls and try to detect wether the camera is above or below zero, while moving the camera around. Currently I'm using onEnd listener to trigger my code in my ParentComponent. If I change a state of my parent…
tinytree
  • 1,009
  • 2
  • 12
  • 28
2
votes
1 answer

How to move the camera using react-three-fiber and @react-three/drei?

I'm drawing a 3d model with the following configuration. react-three-fiber @react-three/drei The following is a CodeSandBox with a model drawn. CodeSandBox-A The drawn model is close to the top of the canvas, and I want to center it. Could you…
C.V.Alkan
  • 79
  • 1
  • 7
2
votes
1 answer

When using @react-three/drei useGLTF crashes scene

Hi everyone I'm kind of driving myself crazy with this, but I am trying to set up a simple three.js scene, however when I try to use the useGLTF function from @react-three/drei the scene crashes, and my console says: Warning: meshopt_decoder is…
Robert Sims
  • 31
  • 4
1
vote
1 answer

React-fiber (drei) ScrollControls prevent from scrolling

I've noticed in V9 of drei there is a bug when combing the elment with . I just want bind text to a 3D element but the ScrollControll makes the text scroll out of the view: CodeSandBox Example It works fine in v8: CodeSandBox…
Luhn
  • 706
  • 6
  • 15
1
vote
1 answer

Import Error with @react-three/fiber / @react-three/drei

I'm trying to use some components from @react-three/drei and it gives me a ton of import errors. No matter what I try to use from @react-three/drei, I get these errors. Example: ERROR in ./node_modules/three-stdlib/loaders/EXRLoader.js…
BeatsByRSD
  • 43
  • 1
  • 4
1
vote
1 answer

How can I create first person controls in react three fiber?

I am trying to create a situation where the camera is fixed and you can rotate the view around the y or axis by dragging your mouse. Something similar to threejs.org/examples/?q=panorama#webgl_panorama_cube . But I should be able to manouvre within…
saan
  • 13
  • 1
  • 6
1
vote
1 answer

Pinning Html to fixed location r3f

I'm trying to pin a drei Html element to the top left corner. I'm struggeling with getting it to stay in the same location when rotating or moving the camera. This is my current attempt: const { mouse2D, mouse3D, normal, plane } = useMemo(() =>…
Timmotoo
  • 71
  • 2
  • 6
0
votes
0 answers

How to draw a line that connects geo coordinates on a @react-three/drei Earth model?

I used this sandbox to create my own 3D model of the Earth and add some markers to geolocation coords. Now I want to create curved lines to connect some markers, sort of flight track style. By looking at the drei documentation, I thought maybe I…
Igal
  • 5,833
  • 20
  • 74
  • 132
0
votes
0 answers

React three drei, movement controls broken in Drei `^9.53.3`

I've been using this react three fiber minecraft example: https://codesandbox.io/s/vkgi6?file=/src/Player.js:1228-1312 As a base for player movements.. frontVector.set(0, 0, backward - forward) sideVector.set(left - right, 0, 0) These lines control…
timhc22
  • 7,213
  • 8
  • 48
  • 66
0
votes
0 answers

CycleRaycast does not detect a

I have a r3f scene with a mesh and a GizmoViewcube. console.log prints all change events from CycleRaycast. When mouse moves over the gizmo hits appear in console. When mouse is over the mesh - nothing happens. How can I make CycleRaycast "see" all…
Boycott Russia
  • 11,818
  • 5
  • 28
  • 29
0
votes
0 answers

Adding HTML to a React Three Drei 'Instance'

I've been looking at this example here: https://codesandbox.io/s/floating-instanced-shoes-h8o2d?file=/src/App.js Which uses from React Three Drei.. The docs: https://github.com/pmndrs/drei#performance say that html can be…
timhc22
  • 7,213
  • 8
  • 48
  • 66
0
votes
1 answer

Resize 3D Model in React

I'm using React and this is my first time trying Three.js / @react-three/fiber / @react-three/drei. I use this 3D model downloaded from Sketchfab.com and it's appearing too big for my website. I want to make the model size smaller but can't find any…
KYin
  • 439
  • 1
  • 5
  • 21
0
votes
1 answer

Unable to use Pointer Lock with PerspectiveCamera and PointerLockControls

I like react-three and I am trying to make an FPV character with a body: https://codesandbox.io/s/fpv-player-ers63 So the goal is that the camera is placed at the head level and the character moves around like in original example…
andrei dev
  • 11
  • 2
1
2