Questions tagged [react-three-drei]

275 questions
0
votes
0 answers

How to use FlyControls in react-three-fiber?

I just changing OrbitControls to FlyControls. However, it seems FlyControls is not working with PerspectiveCamera. Am I missing some props for FlyControls? function Product() { return (
TomFan
  • 113
  • 9
0
votes
0 answers

How to make scrollarea in react-three/fiber?

I wanted to understand and modify this webpage: https://github.com/thedevelobear/react-three-fibear. I created multiple files and wanted to combine them as a scrollable menu in r3f. All the effects work perfectly but I really don't know how to make…
0
votes
0 answers

ERROR GET http://localhost:port/textures/matcaps/matcap-porcelain-white.jpg 404 (Not Found)

I learn ThreeJS with a vite env and @react-fiber @react-drey gsap libraries. Dunno why but my console write several times the error: GET http://localhost:5173/textures/matcaps/matcap-porcelain-white.jpg 404 (Not Found) But I don't use this texture.…
0
votes
1 answer

TypeError: fetch failed when running npx gltfjsx command React Three Fiber

I'm a newbie trying to explore Three JS on react. When I try to run gltfjsx to generate the jsx component that I will be using on my experiment game. I encountered this error, anyone has an idea ? maybe I'm doing something wrong. I'm using node…
0
votes
0 answers

I want multiple copies of the same object on the canvas. However, when I try, only one copy of that object actually gets rendered to the screen

when calling canvas multiple time it appear once n disappear to the last canvas that I call i dont know how to fix it
0
votes
0 answers

react three fiber, can't make mesh responsive to onHover events

I am trying to incorporate react three fiber events into my mesh, however it is not responsive when I do so. My project has one canvas spanning the entire webpage, and multiple objects loaded into various scenes via scissoring (i.e., the "
Hikiki Me
  • 41
  • 7
0
votes
1 answer

why isnt my 3d model like what is should be?

i am creating a website with react and next js. i want to display a 3d model in my website. i downloaded a file with glb format and i saw that in this website. then i displayed the model in my website by using @react-three/fiber, @react-three/drei…
0
votes
1 answer

React Three Fiber, Drei & Intersection Observer: How to change Canvas Model Element Based on The InView Component

Would appreciate it you can help :) even a nudge in the right direction is welcomed Question How do I display, based on Aside component, a different Bonsai part on scroll. Context: BonsaiPart changes the mesh based on a prop called partName. I would…
0
votes
1 answer

Why am I getting this build error with three-xr of react?

I don't quite understand the error. How can I fix it or what can I do? I have three-xr included in my react app but I get this error: Failed to compile. ../../node_modules/@react-three/xr/src/DefaultXRControllers.tsx:8:65 Type error: Property…
0
votes
1 answer

how to access image data on React-three-fiber

I would like to take image data (RGBA) from react-three-fiber like this code on HTML var myCanvas = document.createElement("canvas"); myCanvas.width = texture.image.width; myCanvas.height = texture.image.height; var myCanvasContext =…
0
votes
2 answers

@react-three/drei Html element is not bubbling up the scroll event

I have a element in my react-three-fiber project. This element is grouped with the camera to keep element in front of the camera. When mouse pointer is on this element scroll i not working for ScrollControl and not scrolling. Is…
T.I
  • 53
  • 5
0
votes
1 answer

3D Latex Text in react-three/fiber

I am trying to write a few math equations in 3D with react-three/fiber, and have been looking for a way to get it working with latex. Currently I have been using the Text3D component in @react-three/drei, have been googling and looking for ways to…
0
votes
1 answer

Blobs shader GLSL

I want to create a similar background with a shader to these images: : These are just blurred blobs with colors, distributed across the whole page: Here's my current progress:…
Bart Krakowski
  • 1,655
  • 2
  • 8
  • 25
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

Blender Ocean Modifier time animation not showing in react-three/fiber

I'm creating a very simple plain in blender and applying the ocean modifier to it. After i configure the modifier and add the time keyframes, I apply the modifier and export it as .gltf . When I upload the file to an online gltfViewer the animation…