Stack Overflow
Stack Overflow

Questions tagged [react-three-drei]

275 questions
1
vote
1 answer

R3F / three.js - Instanciate a combination of objects

In the following codesandbox example: there are different geometries merged together thanks to drei library (2Boxes and 1 Sphere). I would like to have a lot of this new geometry with a good performances. I think the solution would be to…
TheKalashnikov
  • 317
  • 2
  • 8
1
vote
0 answers

React Three Fiber Morph Targets with Skinned mesh

Basing on three.js example https://threejs.org/examples/#webgl_animation_skinning_morph I wanted to add to the scene object with blend shapes and have control over it through the influencers (in later stages I would like to have animation with…
DonkeyLuck0
  • 103
  • 1
  • 10
1
vote
0 answers

How to apply a vertex shader to a meshline / @react-three/drei fat line?

I'm trying to use @react-three/fiber and @react-three/drei to render a fat, multi-colored line onto a canvas. Here is the result I'm trying to achieve: It's a fat, multi-colored line. In this image it represents the first quarter of a sine wave,…
Paul M.
  • 10,481
  • 2
  • 9
  • 15
1
vote
0 answers

THREE JS computeBoundingBox

i am working on this react project, its using threeJs objects, i upgraded the version of threeJs and this part of the code stated showing this error . Text.js:16 Uncaught TypeError: self.geometry.computeBoundingBox is not a function the part of…
EL HACHIMI
  • 17
  • 6
1
vote
0 answers

React Three Fiber | Rotate Camera or Scene Not Working

I am using the @react-three/fiber to create a canvas and then some objects inside the canvas. In certain cases I want the scene to be inverted in front of me. I tried using the useThree hook but that doesn't seem to work at all. Here's my…
Vipul Rajan
  • 494
  • 1
  • 5
  • 16
1
vote
4 answers

How To set intensity for Shadow using Directioal Light on BoxGeometry in threejs

I am working on light and shadow part on Box Geometry. I am using Directional light with some intensity but when I reduce the intensity, plane is getting dark and the shadow intensity remains the same. let minPosition = this.map(max, 10, 1000,…
Priyadarshini Patil
  • 13
  • 3
1
vote
1 answer

React-fiber (drei) ScrollControls prevent from scrolling

I've noticed in V9 of drei there is a bug when combing the elment with . I just want bind text to a 3D element but the ScrollControll makes the text scroll out of the view: CodeSandBox Example It works fine in v8: CodeSandBox…
Luhn
  • 706
  • 6
  • 15
1
vote
0 answers

how to change particles' position when a mouse pointer comes over an element in VertexShader

I made interaction text particles with shaderMaterial. I passed the cursor’s position as a uniform and displace the particles based on their distance from it. It works, but there is a problem, which is that particles are displaced before the cursor…
hello
  • 21
  • 1
  • 3
1
vote
0 answers

Add MeshPhongMaterial to Custom Obj

I'm trying to add MeshPhongMaterial to my model but it's not working, I need shininess to the center of the model and it moves with the rotation of the object const materials = useLoader(MTLLoader, ob[1].mtl) materials.preload() let object =…
Zein
  • 571
  • 4
  • 24
1
vote
1 answer

react three fiber drei typescript build errors

I'm trying to build a typescript project that uses r3f and drei as a dependency. The modules are working fine in storybook, with no errors. When building the project using scripts below, I get this: Found 73 errors in 20 files. Errors Files 1…
Diederik Van Remoortere
  • 111
  • 2
  • 10
1
vote
2 answers

How can I pass an array of textures into react-three-fiber mesh?

I am trying to recreate something like a virtual tour of a room given 6 sides of it, (front, back, top, bottom, left and right). In the other code... let loader = new THREE.TextureLoader(); // array for holding all texutre let textureArray…
B_M
  • 175
  • 1
  • 11
1
vote
0 answers

how i can THREEJs TextGeomtry added more verties?

i use dependencies "@react-three/drei": "7.5.1", "@react-three/fiber": "6.2.3", "@types/three": "0.128.0", /* eslint-disable new-cap */ /* eslint-disable no-nested-ternary */ import React, { useEffect, useLayoutEffect, useMemo, useRef } from…
Y Eng
  • 13
  • 3
1
vote
1 answer

HTML overlay always gets clipped when it is larger than the canvas in react-three-fiber

I am trying to display a tooltip or a HTML overlay on the instances in an instanced mesh in three.js via react-three-fiber. However I am facing an issue in the sense that if the content is large, which is often the case, the content gets clipped…
jar
  • 2,646
  • 1
  • 22
  • 47
1
vote
1 answer

React Fiber ThreeJs components rendering issues ( undefined data Line2.computeLineDistances )

I have reproduced 3 components of my React App in the following codesandbox As you can see in the demo, i have 3 react threejs components, rotating, moving and zooming with no issues. The problem is in my local app with exactly the same code…
Koala7
  • 1,340
  • 7
  • 41
  • 83
1
vote
1 answer

group selection react three fiber

I am trying "merge"/"group" select multiple meshes. At the moment I have something like this. //wrapper getOverEvent(e)} onPointerOut={(e) => getOutEvent(e)} …
Fanna1119
  • 1,878
  • 4
  • 24
  • 30
1 2 3
…
18 19