Stack Overflow
Stack Overflow

Questions tagged [react-three-fiber]

Questions about React-three-fiber, a React renderer for Three.js.

981 questions
0
votes
1 answer

movement of the rotated camera relative to space

I am using react-three. I want to bind the camera to the player's position and I want to rotate the camera, but then the camera moves along its coordinate system (rotated), I want its position to change in the world coordinate system. How can I do…
LIMPIX64
  • 201
  • 1
  • 3
  • 12
0
votes
1 answer

Modelviewer environment of three.js editor in react-three-fiber

I'm working on a little project with react-three-fiber. If I load my .gbl 3D Model into the scene it's completly dark even if I use the ambientlight in the canvas. But in the three.js editor it looks exactly like I want it if I use the Modeviewer…
jimbo
  • 13
  • 3
0
votes
0 answers

Three.js / React-three-fiber | How to spread PointsMaterial evenly on a BufferGeometry(costum SphereGeometry) and compare vertices with Image data

I try to reacreate the github landingpage globe (if youre not logged in https://github.com/) with three.js and react-three-fiber by the example provided by them (https://github.blog/2020-12-21-how-we-built-the-github-globe/). My goal is to archieve…
Just a dude
  • 1
  • 1
0
votes
1 answer

Layout does not reflow when transition canvas parent's margin-right with react-spring and react-three-fiber

I am trying to create an animation with @react-spring, a mesh defined into a canvas with r3f and some dom elements. Actually I am unable to correctly change canvas size when I change margin-right of parent container. It does not reflow the layout,…
lezan
  • 759
  • 6
  • 23
0
votes
1 answer

How to filter on-click in react three js?

So I explore 2 cubes sample. I want to click only on one cube at a time. Yet when I click on a cube that has a cube right behind the current one both get clicked. How to force click and hover only on the nearest one? In other words clicking\hovering…
DuckQueen
  • 772
  • 10
  • 62
  • 134
0
votes
0 answers

Unsure how to unmount scene in @react/three-fiber

I'm building this scene, and I have a few issues. One small issue is with directionalLight. When I try using more up to date three.js attributes like shadow.camera.far on it, @react-three/fiber loses the ability to call the dispose function on the…
isaacsan 123
  • 1,045
  • 8
  • 11
0
votes
1 answer

Unexpected transparency in alpha map from three.js RenderTarget

I’m using a RenderTarget in three.js/react-three-fiber to generate a simple alpha map using a Cylinder. The Cylinder uses a basic material with color white, which should be fully opaque in the alpha map, per the docs. However, when applied to a…
stephent
  • 1,355
  • 15
  • 29
0
votes
1 answer

I want to make a earth globe which zooms in with react-three-fiber

I am making a globe that is in a canvas. I want to zoom towards the globe from far somewhere. Eg: Globe's position is at [0,0,0] and camera is at [0,0,100] now I want when the page loads the camera zooms towards it slowly creating nice animation. I…
Daksh Desai
  • 3
  • 1
  • 2
0
votes
1 answer

threejs skinnedMesh not allowing more than a single instance

Problem I'm using a threejs skinnedMesh via react fiber. I can control the skeleton but I cannot have more than a single instance of my model in a scene. I assume this is because the skinnedMesh assigns the mesh by reference not value (makes…
Jacksonkr
  • 31,583
  • 39
  • 180
  • 284
0
votes
1 answer

useEffect is not firing consistently

The component is creating a positionalAudio within a 3D-scene and the audio object is tweakable by using leva. The object is being created just as it should and tweaking the position and rotation just works fine. What is not working properly is…
Defgun
  • 79
  • 4
0
votes
1 answer

BufferGeometry normals react-three-fiber

I'm trying to create custom shapes. I've created a triangle, but I'm struggling to create normals in order to have the material reflect shadows. In another question using useLayoutEffect was the suggested soltuion. How is this done? const mesh =…
Timmotoo
  • 71
  • 2
  • 6
0
votes
1 answer

Loading glb model in react native three using expo-three component not working on android device. The model appears on the web version though

I'm trying to create a react-native apps with three js using expo-gl, expo-three frameworks. Following is the list of…
PD124
  • 51
  • 3
0
votes
2 answers

Object cannot be used as JSX component

I'm getting the error from Typescript that GroundLoadTextures can't be used as a JSX component. My goal is to set up a textureloadercomponent for a react-three-fiber-scene, so I can use the loaded textures in other components. 'GroundLoadTextures'…
Defgun
  • 79
  • 4
0
votes
1 answer

Re-render of the custom BufferGeometry crashes in react-three-fiber

I have a react-three-fiber app, which renders custom BufferGeometry cone. On the frontend I got some user inputs for setting parameters like height, radius etc. Then I send this data to the server via post request and the server sends back…
agt-ru
  • 73
  • 1
  • 7
0
votes
2 answers

Three.js shadows grainly/artifacty on animated object

I'm trying to get soft shadows to look nice on this animated mesh test https://codesandbox.io/s/zen-black-et9cs?file=/src/App.js No amount of playing with the shadow mapSize or shadowBias appears to fix this strange grainyness/artifacting I see on…
SavanaPope
  • 55
  • 5
1 2 3
…
64 65