Questions tagged [react-three-drei]
275 questions
0
votes
0 answers
React Three Fiber Animate when the canvas gets changed
I am using r3f to make a 3d slideshow for when the user click next it slide to the next slideshow but I want to trigger an animation when the user moves to the next slideshow some sort of glitch effect or something and only trigger once the 2nd…
geniar99s
- 31
- 7
0
votes
0 answers
Is there a way to fix parts react three fiber mesh turning invisble?
I have a react three fiber component from a GLTF model I created in Blender. When I apply a material, it becomes invisible at different angles.
In blender it looks fine, so it seems that maybe it is something to do with adding a material via react…
Tom
- 26
- 5
0
votes
0 answers
React Three Fiber Scroll and Hover aren't working and custom cusor is lagging
I am trying to use a 3d model in my project using react three fiber. But I haven't add 3d model yet. Even though, the custom cursor i made is lagging. Cursor is the solid circle inside Cursor 2's outline circle
This is custom cursor code
const…
Galactus
- 11
- 1
0
votes
0 answers
How to sync the orbit control for multiple canvases simententiously? (Using React fiber & Drei)
I have 4 differet canvases with Cube geometry. I have written common scene for this and using them in diff canvas. I want to share the orbitcontrol for all simententiously. As of now orbitcontrols are working individually for each canvas.
Here is my…
AnilPandiya
- 1
- 1
- 3
0
votes
1 answer
What tool (library) can now be used to display 3D models in an application written in React Native?
What tool (library) can now be used to display 3D models (and interact with them - twist, zoom) in an application written in react native? I tried a bunch of expo-three, three, expo-gl, but they don't even run examples from the official repository…
Ivan Noskov
- 1
- 2
0
votes
0 answers
React Three Fiber mesh is unrecognisable in this browser
I am following a 3D portfolio tutorial on youtube and I get stuck in this error. It says that Warning: The tag is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter. I am trying to render…
Pranav Modgil
- 1
- 1
0
votes
0 answers
Rotate a groupd of objects around the CG of a bounding box
I'm trying to rotate objects around the cg of bounding box, but they are still rotating around the [0,0,0] origin.
The code is shown below :
import React, { forwardRef, useEffect, useRef, useState } from "react";
import { objects, library, building…
Mahmoud Mohamed Ouf
- 21
- 3
0
votes
1 answer
R3F - PerspectiveCamera seems broken or objets are further away than they should
I have a small problem with R3F and after investigating and searching for a solution I end up with nothing, so I'll try here.
The problem is with the PerspectiveCamera, I don't know why, if is something related with the declaration or with R3F…
Dede
- 11
- 1
0
votes
1 answer
Center a camera inside of a sphere with react-three
I am trying to create a 360 image viewer with @react-three, but I cannot place the camera inside, although I have centered both of them at 0, 0, 0.
Here it is a codesandbox link with my project
I am pretty new to three.js by the way, so I was just…
lucasbbs.dk
- 61
- 4
0
votes
0 answers
Next.js, VPS server and .gltf files
I made a project using three.js + reaction/three fiber. Everything works on localhost, even if I did the build and download via npm run start, but when I did the same on my vps server, he wrote this:
http://IP:3000/models/model.gltf 404 (Not…
Nord
- 1
0
votes
0 answers
InPlace Character animation plays abruptly when the character is moved in React Three Fiber
I have an inplace walk animation for a character, the animation plays well in blender (see below gif) but when the character is moved using code in React-Three-Fiber it moves abruptly as you can see in the below gif. I am not sure where the issue…
SpaceX
- 2,814
- 2
- 42
- 68
0
votes
0 answers
How to attach a camera to a CatmullRomLine in React Three Fiber?
In my React Three Fiber app I created a CatmullRomLine:
import { CatmullRomLine } from '@react-three/drei';
import * as THREE from 'three';
const Path = ({ pathRef }) => {
const points = [];
const numPoints = 50;
const radiusX = 70;
const…
Lucas
- 37
- 1
- 5
0
votes
1 answer
Why do I get "The tag is unrecognized in this browser"
I have tried everything I could think off and everything I could find on this problem but I cannot get it to work. VS Code doesn't show any errors, but I keep on getting this warning:
"Warning: The tag is unrecognized in this browser. If you meant…
0
votes
0 answers
MeshRefractionMaterial on Mac
I am experiencing a quality issue when rendering a diamond using MeshRefractionMaterial. Specifically, the issue occurs when I run the application on Google Chrome on a Mac computer. On Windows machines and Safari on Mac, the application runs…
0
votes
1 answer
How to move the Point according the line orientation
I am using React THREEJS and some other libraries (DREI, Meshline, etc) to draw the Lines and Text, etc. Right Now I am drawing a line and I have to show the length label along with the line. It will be something like this.
Now I have to add an…
Shoaib Ijaz
- 5,347
- 12
- 56
- 84