Questions tagged [react-three-drei]
275 questions
0
votes
0 answers
Disable react three fiber canvas scale up transition to fit container
I try to build a sort of gallery that includes images and a 3d model of a tshirt. To do so i display the pictures of the shirt first then a button toggle the rendering of the 3d model. I know react-three-fiber canvas adapts to fill its closest…
MarK
- 41
- 5
0
votes
0 answers
Is there any way to hook into React Three Drei KeyboardControls and programatically trigger a key press?
Is there any way to hook into react three drei KeyboardControls and programatically trigger a key press?
Here are the docs for the KeyboardControls component, it seems to use zustand under the…
timhc22
- 7,213
- 8
- 48
- 66
0
votes
0 answers
React three drei, movement controls broken in Drei `^9.53.3`
I've been using this react three fiber minecraft example:
https://codesandbox.io/s/vkgi6?file=/src/Player.js:1228-1312
As a base for player movements..
frontVector.set(0, 0, backward - forward)
sideVector.set(left - right, 0, 0)
These lines control…
timhc22
- 7,213
- 8
- 48
- 66
0
votes
1 answer
React Three loading multiple textures to same 3d model
I have a component as follows:
function Character(props) {
const obj = useFBX('/character.fbx');
const bodyNormal = useTexture('/textures/body_normal.png')
const bodyColor = useTexture('/textures/body_base_color.png')
return…
Andrea D'Attero
- 35
- 5
0
votes
1 answer
Add Custom components in @react-three/fiber scene
So my issue is that I want to add my custom components into my scene. But these custom components will be defined in a different file. So when I define my custom component all three-fiber components come across as
Cannot find name 'planeGeometry'.…
Brownpanda
- 78
- 1
- 9
0
votes
0 answers
CycleRaycast does not detect a
I have a r3f scene with a mesh and a GizmoViewcube. console.log prints all change events from CycleRaycast. When mouse moves over the gizmo hits appear in console. When mouse is over the mesh - nothing happens.
How can I make CycleRaycast "see" all…
Boycott Russia
- 11,818
- 5
- 28
- 29
0
votes
0 answers
How do I calculate the positions of x,y,z coordinates of a sphere which I want to orbit around the origin [ Three JS ]
I am using React Three Fiber and trying to figure out how I can do a moon orbiting around the earth animation
const MoonGeometry = () => {
const [colorMap] = useLoader(TextureLoader, [MoonMap])
const meshRef = useRef()
const…
ewakwwg12
- 71
- 7
0
votes
0 answers
Implementing Mobile Controls into React Three Fiber
I'm currently trying to create a desktop AND mobile experience using React Three Fiber, using this example as a boilerplate: https://codesandbox.io/s/vkgi6. For mobile I've managed to create some buttons which simulate pointerControls interactions…
timhc22
- 7,213
- 8
- 48
- 66
0
votes
0 answers
React-three local server suddenly stopped working
I'm working on a react-three project and everything seemed to be working fine. The problem is after a while, when I restart my dev server (yarn start) the react seems to not be loading.
When I console.log inside of the index.html file it does show…
Til
- 26
- 3
0
votes
0 answers
Shaders and Postprocessing making textures darker
I am working on a Threejs image carousel with React. Currently trying to add a light motion blur whilst fast dragging. I found this shader composition on code pen but it seems to be making my textures darker or highly contrasted.
This is the…
Shimsho
- 107
- 9
0
votes
0 answers
How can I use a fragment shader along with a geometry buffer array to create points in React-Three-Fiber
To clarify I am using React-Three-Fiber
I would like to create a bunch of points on the canvas, beforehand I was using buffered arrays of colors and positions to plot the points. Here is my attempt at getting it work with buffered positions and…
ewakwwg12
- 71
- 7
0
votes
0 answers
ThreeJS Canvas Texture returns the entire canvas with the drawing inside of it instead of just the drawing
I am using react, three js, react-three-fiber
I want to place 10 points on the scene, the points are to be circles. I was able to place the points but by default they are squares.
I tried to draw a circle inside of a canvas and use that as a texture…
stopbanningmelmao123
- 11
- 5
0
votes
1 answer
React-Three-Fiber Canvas is empty
Can someone explain to me why my imported model doesn't appear in the canvas? I am using next.js and my generated tsx file has all the mesh , also i'm using tailwind for styling.
I have put the gltf and the bin file in the public folder.
initially…
tangir miah
- 43
- 5
0
votes
0 answers
How do you update ThreeJS objects based on parameter changes?
To elaborate I am using React, ThreeJS, React-Three-Fibre
I want to create 100 points, but I am struggling to understand how I can go about it with the React-Three-Fibre API. My first thought was that based on the syntax I could add as a DOM…
stopbanningmelmao123
- 11
- 5
0
votes
1 answer
How do you create Points using Three JS and React-Three-Fibre
I am using React, Three JS, and React-Three-Fibre
I want to create an array of 100 Points with random colors, position and sizes. I am confused with how to go about it, I would like to accomplish it by pre defining buffer arrays, then in some loop…
stopbanningmelmao123
- 11
- 5