Questions tagged [react-three-fiber]

I'm encountering an import error in the @react-three module of my downloaded package. ./node_modules/@react-three/drei/node_modules/troika-three-text/dist/troika-three-text.esm.js Attempted import error: 'webgl-sdf-generator' does not cont ...

I'm currently working on converting an equirectangular panorama image into cubemap format using NEXT JS. The scene is being rendered but I'm facing an issue where the background isn't applying, and surprisingly, no errors are showing up! import { useLoade ...

Having trouble using drei materials and other features like MeshWobbleMaterial, MeshDistortMaterial, or ContactShadows? You may encounter errors such as: react-three-fiber.esm.js:1383 Uncaught TypeError: Cannot read property 'getState' of null at useFrame ...

When attempting to import glsl (import glsl from "babel-plugin-glsl/macro";), I encountered an issue where I received a "Module not found: Can't resolve 'fs'" error, or after configuring my next.config.js file with module.exports = { ...

I have been delving into the world of React and Three.js, specifically using React Three Fiber. Currently, I am trying to create a simple grid filled with circle images that I imported. However, I'm facing an issue where none of the objects are being ...

We are currently involved in a project utilizing Next.js and Three.js (react-three-fiber). However, after clearing the cache in the browser, the 3D model disappeared and we encountered some errors. Specifically, there was one warning and one error that kep ...

I have been working on a website using React and Next.js, and I am trying to incorporate a 3D model into my site. After downloading a file in glb format, I noticed some discrepancies between the model I saw on this website and the one displayed on my own w ...

I am currently facing an issue with the dimensions of a three-fiber canvas. I require specific fixed width and height for the canvas, but I cannot figure out how to adjust these parameters. Although I've tried changing the sizes using style={{width: 100p ...

Every time I attempt to execute this code within my React application, it fails with the following error message: SyntaxError: Cannot use import statement outside a module import React, { useRef, useEffect } from 'react' import { extend, useThre ...

My model is rotating on the X axis, but the center of rotation is not aligned with the axis. The code for rotation is quite straightforward: model.current.rotation.x += 0.016; (axis and speed) However, I am struggling to define the actual axis of rotation ...

Currently, I am experimenting with creating multiple 3D models of cubes with varying textures on the faces using react-three-fiber. My goal is to export these models as gltf files. I have been referencing this useful resource on Stack Overflow for guidanc ...

My goal is to create a scrolling box with a parallax effect, but I'm facing an issue where it won't bind with the Canvas element, even when both are included under the same div. In the screenshot provided, you can see div1 and div2 each having t ...

Out of the blue, my react-native app is now showing me a warning message that says: WARNING Unable to locate Fiber with id "21847" Can anybody explain what this means and suggest how I can resolve it? ...

As I develop my website using spline and react-three-fiber with next.js, I have encountered an issue when deploying. The @splinetool/r3f-spline package I am using works perfectly during development and building stages, but upon deployment, I receive the ...

Despite following the react-three docs and various examples, I am struggling to get drei useGLTF to function properly in my project. I have a basic Next|React|react-three/fiber project that I built from scratch. My goal is to load the astronaut example an ...

Having issues with the Canvas component in react-three-fiber not functioning correctly in my next app. I am new to react-three-fiber and Next.js, and when I try to use the Canvas component, I encounter the following error: ./node_modules/three/build/three ...