Questions tagged [react-three-drei]

275 questions
0
votes
0 answers

cant apply texture to glb 3d model file three js react

i have this 3d model glb file that has a texture but its not showing for some reason. so i tried to add the texture manually but didn't work either, but my texture image appears in my network with "Status Code: 304 Not Modified" and i can see the…
0
votes
1 answer

React-tree-js MeshTransmissionMaterial randomly change opacity after motion

Hello! I am new to tree.js and am a bit lost with this bug. After what seems to be random time interval, The object that uses the MeshTransmissionMaterial material, changes behaviour. Do you know where I could investigate ? I dont expect the…
0
votes
1 answer

In Three.js, how to replace geometry normal with normal map completely

How do you replace geometry normal with normal map completely? I am provided normal map and geometry from my work. I am not allowed to change these files. The goal is to just use normal map normal instead of geometry normal. However, I can't…
0
votes
1 answer

Change material of cloned mesh with multiple assinged materials in React Three Fiber

Im trying to highlight cloned object when clicked. Everything works as expected as long as each mesh in object has one material assigned. When loading FBX often fbx.material is an array. When looping and replacing within the array all cloned meshes…
tinytree
  • 1,009
  • 2
  • 12
  • 28
0
votes
0 answers

How to get 3D gltf object click event on maptiler map?

I made a react map component using maptiler docs. Then i added a 3d gltf object into the map and placed correctly. now my target is to load a custom react component when someone clicked the object, but then issue is ,i didnt get click event…
0
votes
1 answer

Any way to make touch-control work with ScrollControls?

I'm really very bad at programming and to be honest I'm a designer. However, I need to fix the problem so that scrolling works on touch devices as well. https://codesandbox.io/s/diamond-rflx8p?file=/src/App.js I tried to add touchmove, touchstart…
0
votes
1 answer

The scroll behaviour is behaving weird with React Three Fiber?

I have the following structure in my React Three Fiber application: Website Canvas NativeHTMLContent Canvas Website The problem I'm encountering is that after scrolling down the entire canvas, the scrollbar resets to the top and scrolls from top to…
0
votes
0 answers

R3F and Drei, how to reset useProgress to its initial state on component unmount

In react I'm using the "progress" state from useProgress hook to track the loading (and show my Loading component) of my gltf object which is located on my landing page. At this stage it works perfectly fine. The issue is that once I'm logged in and…
Simon
  • 209
  • 4
  • 12
0
votes
1 answer

I'm trying to convert a Korean otf font to json so that I can use it as Text3D in R3F, but it's not showing up properly

Facetype.js isn't allowing me to convert Korean fonts when 'reverse font direction' is selected. Also, if I generate the json font without that selected characters overlap, and the order is backwards. I usually use Facetype.js to convert my fonts to…
Szabo
  • 1
  • 1
0
votes
0 answers

How can I achieve pointerEvent all do not affect raycaster in react-three-fiber?

The raycaster work fine when make pointerEvent to none, but I need listen to some event like click on html tag that I change its pointerEvnet to all Then the coordinates of boxGeometry following mouse will be misaligned if using pointerEvent all my…
Roy
  • 731
  • 3
  • 10
  • 24
0
votes
0 answers

Three.js bezier curve not scaling properly with useDrag hook in react three fibre

I'm trying to create a functionality where i can stretch a bezier curve in such a way that when the pointer moves it also scales the curve to the position of the pointer,but the issue i have now is that even though the curve stretches when i drag…
0
votes
0 answers

Stars and 3D earth in Three.js - canvas and orbit control issue

I have been trying to get my 3D earth to work properly, every time I refresh the page it zooms in even after I set enableZoom to false. When I add Stars into the mix, it won't allow me to adjust earth at all - zooming in or out. I have tried…
0
votes
2 answers

Scroll HTML at same speed as 3D objects in Fiber/Drei

I have a 3D scene that has a bunch of elements that scroll with the page. I want to add some text in front of them, but I've not found have it match the speed. Link to scene in codeSandbox In the codeSandbox the "hello" text initially starts out in…
Ashbury
  • 2,160
  • 3
  • 27
  • 52
0
votes
1 answer

R3F: Hooks can only be used within the Canvas component

I am trying to make a Cube with an animated "hello" text on it using threeJs (im using react). It says "Hooks can only be used within the Canvas component!" but I even added the Canvas component in my code. This is the code. What am I doing wrong ?…
0
votes
1 answer

React Three Fiber Outline only selected model from an objectArray of meshes

I'm working on a R3F project with quite a bunch of models that are accessed through an object array. I want to highlight the currently selected model through the postprocessing EffectComposer, but that seems not to work since I load my models…