Stack Overflow
Stack Overflow

Questions tagged [react-three-fiber]

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

224 questions
4
votes
0 answers

How to Set-up Raycasting in React-three-fiber

I am trying to set up a scene in react-three-fiber that uses a raycaster to detect if an object intersects it. My Scene: scene I have been looking at examples like this example and this other example, of raycasters that use simple three objects but…
user14440113
3
votes
0 answers

WARNING: Multiple instances of Three.js being imported

I'm getting the following warning when trying to use @react-three/fiber and @react-three/drei in the same project. Steps to reproduce npx create-react-app reproduced-warning cd reproduced-warning npm install three @react-three/fiber…
sxkx
  • 172
  • 2
  • 9
3
votes
1 answer

how does vans have a small-sized json 3d model

I am trying to create a 3d site using Threejs and React and react-three-fiber where I can customize shirts and then stumbled upon vans website in their customization page. I noticed that they are not using gltf but instead just use json and it's…
Jay-R Joseph Gabunada
  • 342
  • 1
  • 7
3
votes
1 answer

Add video player to a GLB model with controls

I'm trying to add a video player in a GLB model mesh using Three.JS. Although this can done using VideoTexture, I'm trying to add all of the controls that a video player has by default. Here's a code snippet by using VideoTexture: let video =…
Himanshu Jotwani
  • 329
  • 1
  • 13
3
votes
1 answer

How to extract and play animation in react-three-fiber

Well I have .gltf animated model. I was successful in loading the model but wasn't able to play the embedded animation. I would like to know if in any way one can resolve it. Btw I am working this in react. Thank you in advance. Here you can find…
Avinash
  • 41
  • 1
3
votes
4 answers

Loading gltf in gatsby site with react-three-fiber

I've been trying to load a GLTF model into my gatsby site using react-three-fiber, but can't seem to get it to load. This seems like it should be very simple, but I'm new to Gatsby and threejs and was wondering if I could get some guidance. My model…
April Wang
  • 31
  • 2
3
votes
1 answer

Passing URL for texture through props in react-three-fibre

I have recently started using react-three-fibre and I have discovered this example Where the svg image is loaded through the component rather than directly in the function. I wanted to use this idea since I want to reuse the same component but…
Sophia98
  • 309
  • 1
  • 11
3
votes
1 answer

Using react-router with reconcilers such as react-three-fiber

I'm try to use react-router with react-three-fiber. The issue is the components lose their context when added inside a react-three-fiber element. To fix this I can wrap the switch inside a inside the Canvas. And the routes…
Ryan King
  • 2,798
  • 9
  • 37
  • 62
3
votes
1 answer

bufferGeometry setFromPoints with react-three-fiber

Considering toLinePath function: const toLinePath = (arrayOfPoints, color = 0x000000) => { const path = new THREE.Path(); const firstPoint = arrayOfPoints[0]; path.moveTo(firstPoint.x, firstPoint.y, firstPoint.z); …
streletss
  • 4,305
  • 4
  • 14
  • 34
2
votes
1 answer

babel-loader can't deal with multiline string?

Running babel-loader from create-react-app, seeing the following error from the @react-three/drei module: Failed to compile. ./node_modules/@react-three/drei/core/softShadows.js 11:40 Module parse failed: Unexpected token (11:40) File was processed…
Jorgen Builder
  • 21
  • 2
2
votes
2 answers

Is there any advantage of usage Next.Js over plain React when it comes to rendering of 3D models with three.js?

I did application of 3D product configurator in past and wonder whether 3D models would perform better (FPS of the application) if "server side rendering" of Next.JS is used over plain React.
Juraj Zovinec
  • 27
  • 5
2
votes
1 answer

@react-three / react-three-fiber: useLoader() to load new file on props change

I have a functional react component and initial load a gltf model - the path gets passed through the props - this works fine. But if the props change the component rerenders - I checked that - the path is changed and a new Model should be loaded -…
Alexander Frey
  • 23
  • 5
2
votes
1 answer

Importing useGLTF from '@react-three/drei/useGLTF' cause Module not found:

I have installed the react three fiber here's a dependences "dependencies": { "@react-three/drei": "^3.0.0", "@testing-library/jest-dom": "^5.11.9", "@testing-library/react": "^11.2.3", "@testing-library/user-event": "^12.6.0", "drei":…
anjit pariyar
  • 21
  • 1
  • 3
2
votes
1 answer

How to get the Vector3 of a point from the viewport perspective in three.js?

I need to create 2 THREE.Vector3 points. from the browser viewport perspective. The starting point is the top right corner of the browser viewport, far from the screen The ending point is the centre (both horizontal centre and verticle centre) of…
Albert Gao
  • 3,095
  • 5
  • 33
  • 58
2
votes
1 answer

How to load mtl files with gltf in react-three-fiber

I have downloaded a set of files from a site and exported the glb, gltf, and mtl files in blender. I can get the glb or gltf file to display in the react-three-fiber scene, but I am not sure how to get the textures to display properly. I have come…
Joshua Foxworth
  • 1,053
  • 12
  • 29
1
2 3
…
14 15