Skip to main content
318 questions
Newest Active Bountied Unanswered
Filter by
Sorted by
Tagged with
4 votes
1 answer
70 views

i want to show on the screen the 3d model when i import it from cloudinary and it is succesful but the problem is that it wontshow the 3d model on the screen and the error says failed to load GLF ...
Albert Gayanilo's user avatar
  • 41
0 votes
0 answers
31 views

I’m building a 3D website in React Three Fiber, Three.js, and @react-three/drei. The scene is a 3d circular monument with 4 wall-mounted objects spread evenly around the monument: Mirror, ATM, Statue, ...
Vinraj's user avatar
  • 141
0 votes
0 answers
42 views

I’ve built a custom pixel distortion effect post-processing effect for R3F using @react-three/postprocessing’s . Here’s the gist: CustomEffect file: class CustomPixelDistortionEffect extends Effect { ...
Duckford's user avatar
  • 1
0 votes
0 answers
51 views

I am trying to add a trailing effect to a glb model of Tinkerbell. I have the logic split into four components: SimpleTrail.jsx which renders the trail effect on a particular target ref (working) ...
Veron's user avatar
  • 3
1 vote
0 answers
39 views

I am using glb files and using useGLTF from @react-three/drei I need to run specific functions in specific animation whenever it is running the issue is I am getting all the animations at a time and ...
Sirjan Baral's user avatar
  • 31
0 votes
2 answers
88 views

I'm new to R3F and I'm trying to learn some basic fundamentals, basically what I'm trying to do is render a car model from a .glb file and then render a circular button on the door of car which would ...
Code_Dummy00's user avatar
  • 84
0 votes
1 answer
122 views

I am trying to rotate each object separately, and each object has its own rotation field and, when I change the rotation field it should maintain the corner position.Right now only negative rotation ...
Dinesh Ghimire's user avatar
  • 39
0 votes
1 answer
96 views

In the camera-controls source code, there is an example of a view offset. How can this be implemented using the CameraControls wrapped in '@react-three/drei'? let offsetUpdated = false; const ...
leon's user avatar
  • 127
0 votes
1 answer
98 views

I need the same effect like the screenshot below. Here is the sandbox import React, { useEffect } from "react"; import { useGLTF, OrbitControls } from "@react-three/drei"; import { ...
Masum Billah's user avatar
  • 2,409
0 votes
0 answers
73 views

So I have been building a 3D model showcase site, at random times I am getting this error of texture not being rendered, I am using Three.js drei package At random times, I encounter a texture/...
lost_decimal's user avatar
  • 3
0 votes
1 answer
41 views

I'm doing LOD rendering for multiple meshes. I'm confused about where the threshold is measured from. I have a demo that works, except the high and low resolution meshes are swapped out for both the ...
Evanss's user avatar
  • 22.5k
5 votes
1 answer
186 views

I'm using CameraControls from React Three Drei, but I imagine my question is about three.js in general. https://drei.docs.pmnd.rs/controls/camera-controls#cameracontrols I need to be able to move ...
Evanss's user avatar
  • 22.5k
1 vote
1 answer
61 views

I have a 3D cube with 6 sides. Two of those sides have icons: one for music and one for sports. I also have two buttons: one labeled Music and one labeled Sports. When the user hovers over the Music ...
Saroj's user avatar
  • 41
0 votes
0 answers
70 views

Im running into alot of issues trying to run react three fiber on react native app(expo sdk 52). I have a simple box setup but get error saying 'cannot convert undefined value to object'. I tried ...
Byrie's user avatar
  • 29
0 votes
0 answers
47 views

I created a simple animation of some boxes arranging themselves into a wall with react-three/fiber + react-three/rapier. Unfortunately, it seems that whenever the computational requirements increases -...
ufghd34's user avatar
  • 168
0 votes
0 answers
42 views

I am trying to add a react-three/drei texture to a rigid body like this: <RigidBody type="fixed" name="floor" friction={0.7}> {/* ...
ufghd34's user avatar
  • 168
0 votes
1 answer
103 views

I'm trying to learn and work with react and threejs specifically react-three/fiber. I'm running react and three 19 and @react-three/fiber 9.0.4 and react-three/drei 10.0.1. The scene renders fine as ...
Oguogho 's user avatar
  • 1
0 votes
0 answers
58 views

Full Error: Failed to parse source map from 'C:\Users\Leroy\ReactProjects\CoolVec\Frontend\node_modules\@react-three\drei\node_modules\@mediapipe\tasks-vision\vision_bundle_mjs.j s.map' file: Error: ...
Leroy Jeslyn's user avatar
  • 57
0 votes
0 answers
45 views

Seems is not possible to have a 'non-floating' mpdel within a , so I am trying to come up with a workaround as I have seen here: hack for skyground from three.js, since I couldnt figure out how to use ...
JGarnie's user avatar
  • 624
1 vote
1 answer
103 views

I'm trying to create a 3d rugby ball using ThreeJS and RTF and I'm struggling to create 4 faces on the ball where two subsequent faces on the ball will have two different images. Something similar to ...
SiddAjmera's user avatar
  • 39.6k
0 votes
1 answer
46 views

I want to move background behind the model covering the whole section. I have created a stackblitz sandbox [https://stackblitz.com/edit/sb1-el22jkdo?file=src%2FApp.tsx] for my project so that it is ...
Abhi's user avatar
  • 21
0 votes
0 answers
67 views

I am working on a React Three Fiber (R3F) project where I want to display a video texture on an iPhone model. The scene is using @react-three/fiber, @react-three/drei, and GSAP for animations. However,...
Omkar Ohol's user avatar
  • 1
0 votes
0 answers
22 views

I'm implementing video autoplay functionality in a React Three Fiber application using the useVideoTexture hook from @react-three/drei. While the video autoplays correctly on desktop browsers and ...
BEAJ Oussama's user avatar
  • 3
0 votes
0 answers
43 views

<Html portal={{ current: gl.domElement.parentNode }} scale={100} transformGroup > <div className="about-wall about-wall-text" style={{ width: '40rem', position: 'fixed', ...
Portgas D. Ace's user avatar
  • 35
1 vote
1 answer
52 views

Context Using React Three Fiber and Drei I have created a simple rotating gallery of images to create a 3D carousel of projects. I have set up an onClick event to fire on each of the cards as shown ...
Finn Formica's user avatar
  • 160
0 votes
0 answers
33 views

I'm having an issue where I have a dynamically loaded client-side component (because I'm using R3F and ThreeJS, and apparently it needs to be that way), and on route change in production (but not in ...
philolegein's user avatar
  • 1,565
-1 votes
2 answers
2k views

I'm trying to install @react-three/drei and react-three/fiber@alpha for a 3d globe componenet in nextjs. but i get the below error when i try to install them. npm error node_modules/@react-three/fiber ...
Yash Singhal's user avatar
  • 47
0 votes
0 answers
40 views

I’m working on a project where I’m switching between multiple animations (e.g., sitting, pointing, phone) based on scroll position. The animations are loaded using useFBX and applied to a model using ...
dzekiczan1's user avatar
  • 33
0 votes
1 answer
73 views

I am trying to create a ripple, below is my code but it's not rendering on the screen. I seem not to be getting any errors. import './App.css'; import { useMemo } from 'react'; import * as THREE from ...
Ande Caleb's user avatar
  • 1,204
1 vote
1 answer
384 views

I have a simple sphere which has an impulse added to it on a tap, but as it moves it seems to jitter a bit as the mesh doesn't quite keep up with the physical model. Is there a solution to this? The ...
Wex's user avatar
  • 4,796
2 votes
0 answers
80 views

I have a very simple scene like so: import React from 'react'; import { Canvas } from '@react-three/fiber'; import { OrbitControls } from '@react-three/drei'; const Scene = () => { return ( &...
FutureCake's user avatar
  • 2,856
1 vote
1 answer
129 views

I want to move to last section "Color Transitions" text and background image behind of the 3d model. I am using react-three/fiber, drei Deployed preview - https://astonishing-pony-00dd84....
Abhi's user avatar
  • 21
0 votes
0 answers
38 views

I'm quite new to ThreeJS and I just got this car model on Sketchfab, but when i try to put it in my React Three Fiber app it display very far away in the scene, when I attempt to rotating it follow ...
Thuan Tran's user avatar
  • 329
0 votes
0 answers
34 views

enter image description here I just want the red green and blue part and want to hide or disable other scale properties.I look for the option to hide or disable it but i didn't found on the library ...
Nischal Shrestha's user avatar
  • 1
0 votes
0 answers
25 views

I have a 3D object, a New balance shoe with a <directionLight/> and directionalLightHelper to visualize the lightsource, the issue is the shadow on the shoes looks weird, it seems like the shoes ...
Thuan Tran's user avatar
  • 329
0 votes
0 answers
52 views

I have a shoes component as below, whenever the props currentShoes change, I need to update the nodes and materials from useGLTF, is there a way to achieve this? Right now when parent component change ...
Thuan Tran's user avatar
  • 329
0 votes
1 answer
141 views

I need to display thousands of polygons (2d) of different shapes with react-three-fiber. I thought the best option would be to use instances of the same polygon with, let's say 100 vertices. And then ...
Zamadhi Eturu's user avatar
  • 123
0 votes
0 answers
40 views

I'm working on a Three.js project (React) using the @react-three/fiber and @react-three/drei libraries. My goal is to place markers on the surface of a terrain .glb model based on specific coordinates....
Fatima Waheed's user avatar
  • 1
0 votes
2 answers
167 views

(perspective grid that might be useful to illustrate what I mean) I've been trying to create what I'd describe as a "dynamic perspective infinite marquee". Specifically I'm using this video ...
Ciaran Gutteridge's user avatar
  • 1
1 vote
0 answers
64 views

I'm trying to render a 3D animation using @react-three/fiber, @react-three/drei, and three. But it leads to an empty screen. No error logs are displayed. I checked whether WebGL was being supported by ...
Kanji's user avatar
  • 15
0 votes
1 answer
207 views

pretty new to r3f but having a blast so far. I've run into a bit of an issue when rendering HTML into the scene with the drei helper. I'll drop the code from my render function below: <group ref={...
Ocean Evers-Peete's user avatar
  • 1
0 votes
1 answer
52 views

So I'm rendering out instanced meshes in my scene using the code below interface IInstanceContext { [key: string]: Mesh<BufferGeometry<NormalBufferAttributes>, Material | Material[], ...
Ocean Evers-Peete's user avatar
  • 1
2 votes
0 answers
788 views

I tried to add some png on 3d model using rtf(React Three Fiber). Here is my code import React from 'react'; import { Decal, useGLTF, useTexture } from '@react-three/drei'; export function ...
Dinh Thang's user avatar
  • 25
0 votes
1 answer
284 views

I'm having an issue with basic react-three-fiber events, specifically in the context of Drei Views (although that may or may not be related, and I'm hoping I'm just missing a simple implementation ...
philolegein's user avatar
  • 1,565
1 vote
0 answers
99 views

import React, { useRef } from 'react' import { useGLTF } from '@react-three/drei/native' import BaseWhite from './base.gltf' export default function Model(props) { const gltf = useGLTF(BaseWhite); ...
user2998964's user avatar
  • 109
1 vote
0 answers
107 views

In my application ( React JS ) I'm switching between orbit controls and device orientation controls import { DeviceOrientationControls, OrbitControls } from '@react-three/drei'; ... const [...
Arm's user avatar
  • 11
-1 votes
1 answer
65 views

When changing a filter on an object array, the UI will never return to a higher quantity of objects after displaying a lower quantity. The array/filter functions correctly. I've deduced this to the ...
rtnlsltn's user avatar
  • 37
0 votes
1 answer
709 views

I'm playing around with Three for the first time, and trying to get React Three Fiber and React Three drei working in a NextJS environment. I have a simple model working, but I can't figure out how to ...
philolegein's user avatar
  • 1,565
1 vote
0 answers
28 views

I am facing an unexpected bug. On my page I have a bunch of 2D images and assets and one 3D model. When I open the website, the 2D assets show, then the loading.tsx file shows and then disappears when ...
Atharv Agarwal's user avatar
  • 11
3 votes
2 answers
161 views

I'm working on a React Native project, and I'm using Three.js for rendering 3D content. I encountered the following error: Error: R3F: AndroidProgressBar is not part of the THREE namespace! Did you ...
Muneeb Qureshi's user avatar
  • 255

1
2 3 4 5
…
7