Questions tagged [react-three-drei]
275 questions
0
votes
0 answers
React Three FIbre Drei Bounds fill screen
I'm trying to fill the screen with an image in React Three Fiber Drei.
I'm attempting to use Bounds.
This gets mostly there…
GrandMassive
- 19
- 6
0
votes
1 answer
How do I use Suspense startTransition when loading a sequence of GLTF models with useGLTF
I am using useGLTF to load and show a sequence of models. It is working OK with Suspense/fallback, but I would like to improve it by showing the transition from one model to the next a little more elegantly.
With Suspense/fallback, the Canvas goes…
Bill O
- 315
- 4
- 13
0
votes
1 answer
How to dynamically render and edit 3D models using ReactJS?
I am new to Three.js, I am building a 3D product configurator using React-three-fiber. I have followed some tutorials and am able to render and edit textures/colors live, but still unable to find a way to dynamically load any 3D object and edit it…
Muneeb Khan
- 1
- 2
0
votes
1 answer
How can I create a 3D flat ellipse in react-three-fiber
I'm doing a project using react-three-fiber to make 3d objects,
I'm trying to make sorts of shapes and I'm having trouble with making a flat ellipse.
Note: I know r3f and three.js are basically the same but in r3f I can use it in tags so it's…
Alon
- 1
0
votes
0 answers
More performant way to have 2D text labels/elements in React-Three/Fiber?
I have around 100 objects in a React-Three/Fiber scene. I need to add 2D text labels for each one of these objects, similar to https://threejs.org/examples/css2d_label.html. React-Three/Drei's
works perfectly in small amounts, but is…
Kewargs
- 101
- 2
0
votes
0 answers
My memory in three-fiber keeps adding up. How can I free up memory? How to delete past meshes, from memory, I don't use?
In my application I create a 3d maze using a gridHelper and positioning cubes on top of the grid. I use each maze for a specific amount of time and after that I overwrite it by another one. My problem is from what I understand is that I don't…
niko pi
- 1
0
votes
2 answers
How to always look at the same object in react-three/fiber?
I have a 3D model which includes a building. The problem is when I load the model the camera always looks at the yellow marked point[given image]. When I zoom in and out, rotate the model everything is happening centering that yellow point. When I…
Tanjil Hossain
- 79
- 1
- 10
0
votes
1 answer
How to get control over skeleton of a GLB model in THREE.JS?
I have generated an avatar, In glb format. But when I render the same the hands are stretched out. The model has a skeleton. But how do I get access to the skeleton such that I can bring its hands down or make the person sit on a chair etc? The…
Aravind Jaimon
- 85
- 8
0
votes
1 answer
anmated.mesh is not working in react-three-fiber
I tried to make meshes interact with on click using react-spring and when I build this onclick function I got this error
type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got:…
Azr.em
- 83
- 1
- 11
0
votes
1 answer
Conversion React Typescript component into Javascript gives errors
I am playing with React Fiber and React Drei but i do not want to use Typescript like in the examples i have found in their git
I have converted the following example Stars.tsx with typescriptlang tool
This is the output
import React, { useState,…
Koala7
- 1,340
- 7
- 41
- 83
0
votes
1 answer
smooth horizontal scroll - REACT THREE FIBER
I've been trying to make a small horizontal scroll with react three fiber so I can later add some WebGL Distorsion on the elements and even though i succeeded in the most basic way, there are still some things that need improvement :
(here is the…
Alexandre PUJOL
- 121
- 8
0
votes
1 answer
How can I attach a texture using react-three-fiber
const texture = useLoader(THREE.TextureLoader, 'assets/texture.png')
return (
{/*Alioth*/}
…
user1383163
- 577
- 1
- 7
- 24
0
votes
1 answer
Add pointLight in react three fiber
I want to add pointlight in react three fiber and it seems that it follows different syntax from usual three.js syntax.
raghav-wd
- 410
- 4
- 12
0
votes
1 answer
How to get OrbitControls ref
I am trying to access OrbitControls ref as follow:
const controlsRef = useRef();
return (
<>
-1
votes
1 answer
Moving 3d Object in three JS by BUTTON
I'm a beginner at Three JS and need some help with my code. Please, Could you help me for a second?
1| Button1 "increase + 1". After Clicking Button 1, ROOM1 will move to ROOM2 Location and so forth. Room8 will move to ROOM1 position.
2| Button2…
Sayedul Karim
- 117
- 6