Questions tagged [react-three-drei]
275 questions
1
vote
1 answer
Changing the points of React-three-fiber line dynamically
I have a react-three-scene where this line joins two cubes. I can move the cubes using TransformControls.
Samir Kumar Patro
- 13
- 3
1
vote
0 answers
Why do my shadows have a grainy "dot matrix" look in Three.js?
Expected behavior & code
I have a React Three.js scene with multiple elements with complex shadows. I use @react-three/drei use SoftShadows, and expect the shadows to be smooth.
Yanis
- 81
- 5
1
vote
0 answers
Bounding box of 3D object in the 2D preview canvas in react-three-fiber
I want to display a rectangle around each 3D object once the user selects them.
Is there a way to get the bounding box of a 3D object as a projection to the 2D canvas?
dmraptis
- 909
- 1
- 10
- 22
1
vote
1 answer
Cypress Testing Drag & Drop Three.js Canvas
I'm currently trying to get some drag and drop cypress tests working for a react three fibre project. I'm stuggling a little to test this however as I don't have selectable ID's for the 3D elements to be used in cypress as all of the three.js…
Adam Robinson
- 115
- 2
- 15
1
vote
0 answers
How to add coordinates on 3D earth using react-three-fiber/react-three-drie?
I have created a 3D earth using react-three-fiber and now I want to add multiple points on the surface of the model. Let's say I have an array with real coordinates of cities and I want to show those cities on the surface of the planet.
Below is the…
Rav
- 75
- 9
1
vote
2 answers
caught SyntaxError: The requested module '/src/hoc/SectionWrapper.jsx?t=1681652963874' does not provide an export named 'SectionWrapper' (
I'm getting this error "caught SyntaxError: The requested module '/src/hoc/SectionWrapper.jsx?t=1681652963874' does not provide an export named 'SectionWrapper' (at About.jsx:7:10)".
I have a component named "About.jsx":
import React from…
wail_10
- 35
- 5
1
vote
1 answer
nextjs & @react-three/drei - TypeError: Failed to parse URL
I'm building a nextjs app with 3D animations using @react-three/drei.
I have a gltf file in the public folder, under the desktop_pc folder called scene. gltf.
The path from the project root is: /public/desktop_pc/scene.gltf.
When importing the gltf…
Itay Tur
- 683
- 1
- 15
- 40
1
vote
1 answer
Clone the nodes from a GLB file loaded with useGLTF in react three fiber?
I am loading my model with useGLTF like this, and access to its nodes, since I need to manipulate them:
const { nodes, materials } = useGLTF("/model.glb");
Suisse
- 3,467
- 5
- 36
- 59
1
vote
1 answer
Using ref on ShaderMaterial causes Typescript error: "The expected type comes from property 'ref' which is declared here on type 'PolygonMat'"
When creating a shaderMaterial from the drei library, using ref causes TypeScript to complain:
Type 'RefObject' is not assignable to type 'Ref | undefined'.
I declared the type according to how it was written in this…
bluhtea
- 13
- 4
1
vote
1 answer
How to set side={THREE.BackSide} with external .glb file?
I'm new with Threejs. I want to use side="THREE.BackSide" with external model file room.glb file. I'm using nextjs 13 (typescript and app directory enabled) with @react-three/fiber and react-three/drei.
It works like this
naeemgg
- 177
- 1
- 8
1
vote
1 answer
I am unable to use canvas from @react-three/fiber here is the error that I am getting
Could not resolve "three"
node_modules/three-mesh-bvh/src/core/castFunctions.js:1:39:
1 │ import { Box3, Vector3, Matrix4 } from 'three';
╵ ~~~~~~~
You can…
Purav Kapoor
- 11
- 2
1
vote
0 answers
React Fiber/Drei and CCDIKSolver scaling issues
Problem: the bones of the CCDIKSolver seem to scale down when the target is further away.
I've run into an issue that I can't figure out. I have a 3d asset that is based on this example…
Joris
- 11
- 2
1
vote
1 answer
How do we create an Object as source of light in React Three Fiber?
Using directional/ point light will generate light from outside but not from inside the Object.
Example: Sun should be the source of light to the Objects around.
Please find the images below to understand the problem statement
Directional Light…
shanmuktej
- 11
- 1
- 3
1
vote
1 answer
Toggle materials/textures in an instance in react-three-fiber
I have an instance using Drei library with a plane geometry.
According to a state, I would like to display different materials for each instance:
state is false: display a standard material with a simple color
state is true: apply a different…
TheKalashnikov
- 317
- 2
- 8
1
vote
2 answers
react-three-fiber: How to capture events ANYWHERE in ?
I'm trying to create a 3D experience using react-three-fiber where the user can interact with any part of the 3D canvas, including points on the canvas that both (a) intersect an object, and (b) where there is nothing intersecting the ray at…
Anson Kao
- 5,256
- 4
- 28
- 37