Stack Overflow
Stack Overflow

Questions tagged [react-three-drei]

275 questions
2
votes
1 answer

ThreeFiber Drei PivotControls, get position after onDragEnd

I'm trying to get the updated position of a mesh after moving it with the Drei Pivot Controls, but digging into the object it says the position is [0,0,0]. How can I console.log the position after dragging a mesh? const meshRef = useRef(); …
Ashbury
  • 2,160
  • 3
  • 27
  • 52
2
votes
0 answers

snoise3' : no matching overloaded function found with Next.js and Webpack

Having issues loading glsl shaders in a Next.js project. More specifically, when attempting to load the glslify function 'snoise3', I am prompted with the following error message: WARNING: 0:64: 'glslify' : unrecognized pragma ERROR: 0:73: 'snoise3'…
John Smith
  • 21
  • 5
2
votes
1 answer

Adding Value in an array by click in a "button"

I have an array. That has a value of Objects. There are 3 values in 1 Array for 1 Object. It's a ReactJS project. For example like that const x = useMemo(() => [ [1, 1, 1], [2, 2, 2], [3, 3, 3], [4, 4, 4], [5, 5, 5], ]); Now I have a button. My…
Azmee Ahmed
  • 23
  • 4
2
votes
0 answers

Animate the camera with react-three-fiber

So what I am trying to do is animate the camera after it finds the mesh id. Right now it works, but it teleports to the mesh instead of animating the camera to the make. I have tried react-sprint and @react-three/drei, but I just can't figure this…
Cyrus Zei
  • 2,589
  • 1
  • 27
  • 37
2
votes
1 answer

Import errors with the package @react-three/drei

I get the same error no matter what I import from the drei package, I am sure I have installed all the necessary packages and the latest versions, but I have this odd error. Compiled with problems:X ERROR in…
WildThing
  • 969
  • 1
  • 12
  • 30
2
votes
0 answers

React Three Fiber, Three.js and Drei: lazy import models using components gets re-rendered to infinity

I'm trying to lazy import JSX models in React Three Fiber. I have a couple of JSX models which incorporate useGLTF() from drei, to load the actual .gltf/.glb model, as nodes and materials, like in the R3F tutorial. What I'm trying to do now, is to…
Jakub Pabis
  • 21
  • 3
2
votes
1 answer

How to get Raycaster to correctly detect intersection of meshes in react-three-fiber?

Three.js and React three fiber newbie here. I'm attempting to get ray casting to work correctly using Raycaster from three. I’ve got 2 simple mesh boxes, one static and other movable via keyboard events. Goal is to console log the static mesh when…
Sandeep Chandran
  • 21
  • 2
2
votes
1 answer

How do I change the initial camera position set up by Canvas in React Three Fibre

I am using React Three Fibre, using the Canvas component it sets up a scene and camera with default parameters: { fov: 75, near: 0.1, far: 1000, position: [0, 0, 5] } I want to change the position parameters in particular, I can change the position…
ewakwwg12
  • 71
  • 7
2
votes
1 answer

Using useHitTest ("@react-three/xr": "^5.0.1") with the newer version of XR

I've seen a few examples of using useHitTest with versions of @react-three/xr lower than v5, but I'm not quite sure how to convert the syntax using the newer versions.. (and using useRef with Typescript, which might be a separate issue). Here is an…
timhc22
  • 7,213
  • 8
  • 48
  • 66
2
votes
0 answers

react/threejs-how to create curvy version of rectAreaLight in react three fiber

Hi, I managed to make rectangle shape of lighting effect as shown in A. But, how to make a similar lighting effect in B? I could not find a curvy version of light API code provided by threeJs/react-three-fibre. What I currently have in mind is…
LY Hooi
  • 165
  • 1
  • 9
2
votes
0 answers

Why is react-three-drei's OrbitControls breaking when I use View with Routes?

I am loading multiple 3D elements in my pages, so to avoid creating multiple canvases I use react-three-drei's View. My is inside App.js and outside of my react-router-dom's . The problem is upon changing route the …
Monstar
  • 795
  • 1
  • 5
  • 23
2
votes
0 answers

How to properly embed a html link element in react-three-fiber?

I've been trying to understand the code from this sandbox and give it some features of my own. My goal is to create a link to a different website in the hidden element. However, I can't figure out how to embed the link like the other …
Lalaland124
  • 81
  • 9
2
votes
0 answers

How to duplicate VRM models properly with react-three-fiber?

I've been working on a 3D Web project using following libraries mainly react react-three-fiber @react-three/drei three-vrm @zoom/videosdk socket.io What I'm trying to achieve is, render 3D VRM models which represents each participant in the…
Nuintee
  • 33
  • 3
2
votes
1 answer

How to stop useFrame afrer n seconds in react-three-fiber

hi I have animation in useFrame which plays after click and I need to stop it after 2 seconds for example const [clicked, click] = useState(false) useFrame((state, delta) => (clicked ? group.current.rotation.x += 0.01 : …
Achi
  • 45
  • 8
2
votes
1 answer

Custom Geometry with React Three Fiber, bufferGeometry not showing

I'm trying to create a custom geometry using React Three Fiber. Since the Geometery has been removed from three.js I'm not having to use a bufferGeometry, however I can't get anything to show at all. The following Scene component only displays the…
WillMaddicott
  • 512
  • 6
  • 20
1
2
3
…
18 19