Stack Overflow
Stack Overflow

Questions tagged [react-three-drei]

275 questions
8
votes
5 answers

The React Three Fiber mesh tag is unrecognized in this browser

I am following a 3d portfolio tutorial from Youtube and got caught in this error. Here I am trying to render a mesh but the console is showing a warning that "This element is unrecognized in this browser". The browser is rendering the rest but this…
Aryansh Tripathi
  • 85
  • 1
  • 5
6
votes
2 answers

How to display a million of interactive line strings in Three.js

I would like to display a circuit using react-three-fiber (or with the Drei library). A circuit is composed of segments and turns. A segment is defined thanks to two points. A turn is defined thanks to a list of points. I'd like my user to be…
TheKalashnikov
  • 317
  • 2
  • 8
6
votes
2 answers

Using lookAt in @react-three/fiber

I am trying learn how to use three js with react.For this purpose I am using @react-three/fiber and @react-three/drei. This project by chriscourses was what I used to learn three js and I hope to use it to learn using threejs with react. The below…
Muljayan
  • 3,588
  • 10
  • 30
  • 54
5
votes
0 answers

Multiple scenes in VR mode and different cameras

I'm trying to implement this fiddle in an XR environment. In the fiddle, the second scene is fixed to the screen, but not with the oculus/player camera... Does anyone have a solution to making a scene or an object always on the top right corner of…
BENARD Patrick
  • 30,363
  • 16
  • 99
  • 105
5
votes
0 answers

When react-bootstrap and react-three/drei are combined, the union type that is too complex error occurs in

Phenomenon When react-bootstrap and react-three/drei are combined, the following error occurs in of react-bootstrap Expression produces a union type that is too complex to represent.ts(2590) The code is in the code sandbox…
MOSUMA
  • 51
  • 1
5
votes
0 answers

useConvexPolyhedron collision on react-three/cannon clipping through object

I am having issues trying to make collision work properly with an imported glb file only used for collision. There are two parts to this question: I am currently getting a whole lot of faceNormal errors and vertices warnings in the…
szr1ght
  • 51
  • 1
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
2 answers

react-three - 3D model displays a blank white square on Android phone devices

I am developing a portfolio application using Nextjs and 3D libraries such as Three and React-Three. I use Vercel to deploy the app. I am experiencing a problem where the 3D model in the deployed app is displaying as a blank white square on Android…
Itay Tur
  • 683
  • 1
  • 15
  • 40
3
votes
1 answer

three js shadow is not showing on object

I'm a beginner at Three JS and have some issues with my code. My problem is I don't get the shadow properly in every object I attached. Here's the picture: Here's my code in the sandbox: https://codesandbox.io/s/threejs-code-3rlk8b import React, {…
Sayedul Karim
  • 117
  • 6
3
votes
0 answers

Enabling fog in react-three/drei shaderMaterial

I am trying to enable fog in my custom shader. I would assume that shaderMaterial automatically passes down global fog variables but couldn't find any documentation. I did look at the posts for plain Three.js but couldn't manage to map the solutions…
Max
  • 754
  • 8
  • 24
3
votes
1 answer

How to correctly convert jsx to tsx

How to correctly convert exited jsx file from npx gltfjsx command to TypeScript file? Couldn't correct the errors. import React, {useRef} from 'react' import { useGLTF } from '@react-three/drei' export default function Crown(state: any, { ...props…
simplesample
  • 85
  • 8
3
votes
3 answers

Three react fiber OrbitControls ref object throws error in typescript at build phase (code does work)

I am currently stuck on a typescript error regarding the type of a ref object (as far as I know). I am quite new to typescript so i don't understand how to resolve the issue! I have appended the tootip typescript gave me, and the error it throws…
Jan Arend
  • 284
  • 2
  • 17
3
votes
4 answers

Cannot rotate mesh in React Three Fiber

I have a Plane mesh, and I want to have it initialised with an initial rotation vector. However, setting the rotateX prop does not work. What am I…
Sohail Saha
  • 483
  • 7
  • 17
2
votes
0 answers

useRef not working as expected, in react-three-fiber. Ref elements not unmounting?

I am trying to animate this group of trees inside component. But the treeRefs keeps on increasing by 2 times on each frame and results in very wonky behaviour filled with glitches. Logic - I have components which is a 3D Mesh. I am spwaning these…
Kaushal Panchal
  • 21
  • 1
2
votes
0 answers

useRef of React Three fiber/drei Component undefined/null in useEffect

I am trying to trigger a transition/movement for a React Three drei component on initial page load by accessing its ref in a useEffect function. Within the useEffect on initial load the useRef is still null. import React, { useRef useEffect,…
Jacob Rita
  • 31
  • 3
1
2 3
…
18 19