Questions about React-three-fiber, a React renderer for Three.js.
Questions tagged [react-three-fiber]
981 questions
4
votes
1 answer
react-three-fiber 360 image darker than the original image
I'm trying to create a 360 image using react-three-fiber. The 360 viewer is working perfectly as it purposed but the generated image is darker than the original image.
Here's the screenshot from my 360 viewer
Here's the original image
Here's my…
Why Would You
- 297
- 2
- 9
4
votes
3 answers
Difficulty creating basic Line (@react-three/fiber and Typescript)
Can anyone help me get this line to show up? Im using @react-three/fiber and Typescript
My Faulty Component:
import * as THREE from 'three'
const RoadLine = ({start, end}: {start: THREE.Vector3, end: THREE.Vector3}) => {
return (
…
Noah Carmichael-Hitsman
- 61
- 2
- 3
4
votes
0 answers
Cannot update a component while rendering a different component - Environment / React- Three-Fiber
My App.jsx
import "./App.css";
import { Canvas } from "@react-three/fiber";
import React, { Suspense } from "react";
import { Html, useProgress } from "@react-three/drei";
const Scene = React.lazy(() => import('./components/Scene.jsx'));
function…
Aaron
- 176
- 3
- 14
4
votes
2 answers
How to create water in react-three-fiber
I want to create 3D scene with water like in this example three.js shader ocean or water but I have to create this in react-three-fiber library. I already searched the internet to find some good working example for this case but without result.
Can…
DonkeyLuck0
- 103
- 1
- 10
4
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 -…
Alex
- 111
- 2
- 9
4
votes
0 answers
React-Three-Fiber Drei - Swap between Orbit Controls, Map Controls, and Fly Controls
I have an app where I would like to move between views when the user clicks a button. Here is what I have so far:
4
votes
0 answers
react-three-fiber attachArray broken
For some reason I can't seem to add multiple textures to my mesh with attachArray. Attaching a single texture works but if I change attach="material" to attachArray="material", my mesh vanishes. I'm on Three version 0.126.1.
return (
Max
- 754
- 8
- 24
4
votes
4 answers
React-Three-Fiber (R3F): GLTF loader loading issue. Why can't I see my model?
I'm trying to load a gltf model in react-three-fiber (R3F) and I am having a nightmare. I have tried looking for the answer and there have been people with a similar problem but I was not able to solve my issue.
I keep getting this in the console:…
SheShellSheShore
- 41
- 1
- 3
4
votes
1 answer
How to implement Three.js inside Gatsby?
I've installed react-three-fiber and three packages. I'm following this tutorial, but I have doubts of where to put this line:
const rootElement = document.getElementById("root");
Also, I'm starting to receive this error:
Error: Element type is…
dawn
- 1,327
- 6
- 19
- 39
4
votes
2 answers
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);
…
n1stre
- 5,856
- 4
- 20
- 41
3
votes
1 answer
planebuffergeometry is not part of the three namespace
I am building a three.js project with next.js but I am getting this error:
'planeBufferGeometry is not part of the THREE namespace. did you forget to extend?…
ayaz
- 35
- 6
3
votes
2 answers
react-three - 3D model displays a blank white square on Android phone devices
I am developing a portfolio application using Nextjs and 3D libraries such as Three and React-Three.
I use Vercel to deploy the app.
I am experiencing a problem where the 3D model in the deployed app is displaying as a blank white square on Android…
Itay Tur
- 683
- 1
- 15
- 40
3
votes
1 answer
three js shadow is not showing on object
I'm a beginner at Three JS and have some issues with my code. My problem is I don't get the shadow properly in every object I attached. Here's the picture:
Here's my code in the sandbox:
https://codesandbox.io/s/threejs-code-3rlk8b
import React, {…
Sayedul Karim
- 117
- 6
3
votes
0 answers
How to use custom post progressing shader pass in react-three-fiber?
I am using react-three.
I created a custom post progressing shader for my three js project.
The below code is worked in typical html and js file.
const CustomShader = {
uniforms: {
'tDiffuse': { value: null },
},
vertexShader:…
TomFan
- 113
- 9
3
votes
0 answers
Enabling fog in react-three/drei shaderMaterial
I am trying to enable fog in my custom shader. I would assume that shaderMaterial automatically passes down global fog variables but couldn't find any documentation. I did look at the posts for plain Three.js but couldn't manage to map the solutions…
Max
- 754
- 8
- 24