Questions about React-three-fiber, a React renderer for Three.js.
Questions tagged [react-three-fiber]
981 questions
-1
votes
1 answer
Moving 3d Object in three JS by BUTTON
I'm a beginner at Three JS and need some help with my code. Please, Could you help me for a second?
1| Button1 "increase + 1". After Clicking Button 1, ROOM1 will move to ROOM2 Location and so forth. Room8 will move to ROOM1 position.
2| Button2…
Sayedul Karim
- 117
- 6
-1
votes
1 answer
React-three/fiber canvas's width and height is being overridden and I don't know why
I have a Next.js app that uses react-three/fiber here: https://github.com/ChristianOConnor/linear-vaporwave-react-three-fiber-typescript AND CHECKOUT migrate-to-nextjs13 branch. The issue is regarding css. I have a react-three/fiber object rendered…
ChristianOConnor
- 820
- 7
- 29
-1
votes
1 answer
Background image in react-three
I need to set static background image on scene with image formats like .png, .jpg, etc. May be someone know how to do it? I tryed lot of variants, mut still can't fiend correct solution.
-1
votes
1 answer
What should I add/change to make the model look like the sample?
I just started learning ThreeJS and Fiber.
I loaded the 3D model and added the lights, but it still doesn't look the way I want it to.
Could you tell me what needs to be added so the model looks like the example (please see below)?
Current…
Alexiuscrow
- 776
- 2
- 15
- 34
-1
votes
1 answer
HTML Canvas/THREE.js Apply clip path and opacity on first layer (composed of multiple shapes) depending on the second layer shape
HTML Canvas or Three.js experts,
I have a task this is very similar to and I have big difficulties in finding a solution, most probably because I am a newbie in THREE.js/HTML Canvas, a suggestion on how to approach this would be very…
Cristian Ceamatu
- 1
- 1
-1
votes
1 answer
My GTFL won't load with GLTFLoader: error Invalid typed array length: 55419
I'm currently trying to load a model gltfLoader I've debugged what I can with some of the common errors.
I've made sure my gltf file is in the /public folder, I've also tried using and import with the path both give the same error:
"Uncaught Could…
sam
- 27
- 4
-1
votes
1 answer
How to create website loader that shows the progress of initial request in nextjs?
I'm using react three fiber in my website which has added to the initial load time of my site. Rather than just using a useEffect hook with a timeout, I'm trying to create a website loader to show the user the progress of the initial load before the…
Noah Trotman
- 155
- 1
- 11
-1
votes
1 answer
Rendering DOM elements onto webGL
I would like to render DOM elements (which im otherwise using React for) onto (for example) a plane in a 3D (WebGL -> Three.js -> Three Fiber (??? so far best way to go about it as im figuring?)) environment.
So basically Id have my containing my…
John Thummel
- 23
- 6
-1
votes
1 answer
Display 3d model format gltf With React-js
I want to display a 3d model into a react JS component, I made some research on how to use Three fiber or web GL but instruction were not clear for me and when I try simplified package like 3D viewer or model viewer from google it simply do not work…
Jagarkin
- 468
- 1
- 5
- 14
-1
votes
1 answer
Double Scroll with react-spring parallax & react-three-fiber `Canvas`
I am trying to create a scrolling box with parallax but for some reasons it won't bound with Canvas element, even if I will include both under the same
.
In this screenshot, you can see div1 and div2 where each has its own scroll…
enkicoma
- 461
- 4
- 25
-2
votes
1 answer
react three fiber not showing buffer object
i been learning lots about three js with react which use react-three/fiber right now i am learning how to use points to make a simple grid which fill with circle image that i just imported but for some reason it wont render any of the object i been…
adhi_wika
- 145
- 2
- 13
-2
votes
2 answers
How can I make it so that this function ensures coordinates returned are a minimum distance away from other coordinates?
I'm plotting points on a 3D plane so the coordinates are (X,Y,Z), but the height, Y, will be hardcoded so the algorithm doesn't have to include checking for that.
The way I currently plot the points is that on mount, a function is called to generate…
jabusir
- 21
- 5
-3
votes
1 answer
Simple app that shows pages depending on an API built with a static site framework
I created a project with React, but now I'm thinking of SEO
My project is very simple, although it shows 3D Models using React Three Fiber
But it also shows pages that are defined depending on some videos obtained from Vimeo (using an API), making…
Rafael
- 2,413
- 4
- 32
- 54