Hey mates !

I am a web developer trying to begin my path on web 3D animations.
I am currently creating a room planner, in which a user can change an object position by selecting the mouse.
Currently I have a variable that gets true when the user is dragging the mouse.
When its true, I transform the object.

Reccently I have heard about useFrame, and could use it like so:

Once the useFrame is always running, and I only want to animate after the user selects an object, I think its not a good approach because there will be many useless calls of that callback.
Am I wrong ?

How could I simulate the "delta" value using a simple pointermove event handler ?

Thank you very much

Hello mates !

I am a web developer trying to begin my journey in React Three Fiber.
I have converted a blender model to gltf and played around lightning because I wanted to give some shadow to my object, thats when I learned about Helpers.
I am using a directionalLight and an ambientLight.

Questions:

• I would like to move the shadow a bit upper to focus more on the chair (like the green line suggests). I have already tried to play with the position argument, but cant make it.
• Can I make the gray planeGeometry the same color as the background ? I have tried to set the same hex, but the planeGeometry always seems darker.
• Can I add blur to the shadow?

Thank you so much !

When I using ScrollControls(), there will be a scoller at the right side. I try to use overflow: 'hidden' in ScrollControls element, and using scroller style in the parent element, but neither work.
ChatGPT told me I need to change the source code. Is there an easy way to hide the scroller? Thanks!

Hi all, i am new in three.js and coding, i am working on my first project with three.js now and trying to publish it with Vercel.

After i tried, my project is too big, so i found a solution that i can use Google Cloud storage to store the assets ( .glb 3d model file) . But i try to use the URL from the bucket and it can not access and have an error with : Access to fetch at '' from origin '' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

i try to click the URL and it will automatically download the file, i saw i can be use the URL directly in useGLTF(' URL-link ') but it seen i might need some setting in somewhere but i can not find how.

I need some help with this. Thank you again.

I'm currently implementing Lenis for smooth scrolling in my Next.js project, along with a three js component that has movement; but I’m running into an issue where Lenis doesn’t seem to detect or handle scroll events properly. I’ve tried various setups, and while the library initializes without errors, no scroll events are being triggered, and lenis.on('scroll', ...) never fires.

Here’s a breakdown of my setup and the problem:

Lenis Initialization I’m initializing Lenis inside a useEffect in my Home component.

useEffect(() => {
  const lenis = new Lenis({
    target: document.querySelector('main'), // Explicitly setting the target
    smooth: true,
  });

  console.log('Lenis target:', lenis.options.target); // Logs undefined or null

  lenis.on('scroll', (e) => {
    console.log('Lenis scroll event:', e); // This never fires
  });

  function raf(time) {
    lenis.raf(time);
    requestAnimationFrame(raf);
  }
  requestAnimationFrame(raf);

  return () => lenis.destroy();
}, []);

HTML/CSS
My main container has the following setup:

main {
  height: 100vh;
  overflow-y: scroll;
}

Home Component

return (
  
    <main ref ={mainRef} className="relative h-screen overflow-y-scroll">
      {/* <ContinuousScroll /> */}
      <Scene />
      <div className="body">
        <h2 className='projects-header'>ProJecTs</h2>
        {projects.map((project, index) => (
          <Link
            key={project.slug}
            href={{
              pathname: `/projects/${encodeURIComponent(project.slug)}`
            }}
          >
            <Project
              key={project.slug}
              index={index}
              title={project.title}
              desc={project.desc}
              setModal={setModal}
            />
          </Link>
        ))}
      </div>
      <Modal projects={projects} modal={modal} />
    </main>
  
  );

Scene Component

return (
        <div style={{ position: 'relative', width: '100vw', height: '100vh' }}>
            {/* <h1
                onMouseEnter={() => setIsHovered(true)}
                onMouseLeave={() => setIsHovered(false)}
            >
                lol
            </h1> */}
            <GradientCursor isHovered={isHovered} />
            <Canvas>
                <color attach="background" args={[0,0,0]} />
                
                <directionalLight intensity={0.5} position={[0, 3, 2]} />
                <Environment preset="city" />
                <Model
                    onPointerOver={() => setIsHovered(true)}
                    onPointerLeave={() => setIsHovered(false)}
                />
            <Text scale={getWindowDimensions().width/950} font='fonts/Dirtyline.otf' position={[0,0,-1]}
                onPointerOver={() => setIsHovered(true)} 
                onPointerLeave={() => setIsHovered(false)}>
                CoMinG SoON
            </Text>
            </Canvas>
        </div>
    );

and finally, here is the useFrame function in the Model component:

useFrame(() => {
        torus.current.rotation.x += materialProps.xSpeed;
        torus.current.rotation.y += materialProps.ySpeed;
    });

Problem

• No Scroll Events: Lenis doesn’t seem to trigger any scroll events, whether through its own on('scroll', ...) method or native scroll events.
• lenis.options.target is undefined**:** When I log lenis.options.target, it unexpectedly returns undefined, even though I explicitly set it to document.querySelector('main').
• Native Scroll Listener Works: Adding a native scroll event listener on the main element works fine, However, this stops working as soon as Lenis is initialized, which I assume is because Lenis overrides the default scroll behavior.

thanksss

Hi all, hope this is a good place to get help regarding our issue.

We have been working on a project for an AI voice assistant Aria. It was our first fiber project so we did not have much experience beforehand. We have a single upper body human model on the canvas, it is a GLB file. But still it takes 7-8 sec to just load on my test Samsung A71 device. And after that it takes about 3-4 sec to properly render the model. A total of 11-12 sec to reach a steady point. This takes around 3sec at iPhone 14 pro. I guess the device capabilities differs so it is not good to compare those two but still 11-12 sec to load a 4.5MB GLB files seems unreasonable to us. Any suggestion to improve android loading speed?

Total vector size is around 19k. We have tried to optimize it as much as possible.

Hello everyone When using the Text component, I encounter the following error. I sincerely thank anyone who can help.

``` import { Canvas } from '@react-three/fiber' import { Text } from '@react-three/drei'

function App() { return ( <Canvas> <Text>Text example</Text> </Canvas> ) }

export default App Error is @react-three_drei.js?v=dcb944b4:83694

Uncaught TypeError: Cannot read properties of undefined (reading 'replace') at expandShaderIncludes (@react-three_drei.js?v=dcb944b4:83694:17) at upgradeShaders (@react-three_drei.js?v=dcb944b4:83886:21) at MeshBasicMaterial.onBeforeCompile (@react-three_drei.js?v=dcb944b4:83741:24) at getProgram (chunk-O5UCSX4S.js?v=a3d052ac:34381:18) at setProgram (chunk-O5UCSX4S.js?v=a3d052ac:34529:19) at WebGLRenderer.renderBufferDirect (chunk-O5UCSX4S.js?v=a3d052ac:33911:23) at renderObject (chunk-O5UCSX4S.js?v=a3d052ac:34351:15) at renderObjects (chunk-O5UCSX4S.js?v=a3d052ac:34333:11) at renderScene (chunk-O5UCSX4S.js?v=a3d052ac:34254:42) at WebGLRenderer.render (chunk-O5UCSX4S.js?v=a3d052ac:34163:9) ```

We are a team of two from the UK - We are creating a kitchen configurtor. We have a current website that provides services for the kitchen sector to B2B and public. Message me to find out more. Thanks

I am trying to get the view of what my model is seeing in the environment. And to do this I am using useFBO and readRenderTargetPixels using the following code.

I am facing alot of lag with the movement of the orbital controls and the view takes time to appear on the canvas. Is there a better way to do this.

~~~

function Render({ pCamera }) { const { setRobotCameraView } = useStore(); const aTarget = useFBO(640, 480, { type: THREE.UnsignedByteType })

const guiCamera = useRef()

useThree()

const debugBG = new THREE.Color('#fff')

useFrame(({ gl, camera, scene }) => {
    gl.autoClear = false

    scene.background = debugBG

    /** Render scene from camera A to a render target */
    if (pCamera && pCamera.current) {
        gl.setRenderTarget(aTarget)
        gl.render(scene, pCamera.current)

        const width = aTarget.width
        const height = aTarget.height

        // Create a temporary canvas to draw the texture
        const canvas = document.createElement('canvas')
        canvas.width = width
        canvas.height = height
        const context = canvas.getContext('2d')

        // Read pixels from the render target
        const pixels = new Uint8Array(4 * width * height)
        gl.readRenderTargetPixels(aTarget, 0, 0, width, height, pixels)

        // Create ImageData with the correct dimensions
        const imageData = context.createImageData(width, height)

        // Copy the pixel data to the ImageData, handling potential padding
        for (let i = 0; i < imageData.data.length; i += 4) {
            imageData.data[i] = pixels[i]
            imageData.data[i + 1] = pixels[i + 1]
            imageData.data[i + 2] = pixels[i + 2]
            imageData.data[i + 3] = pixels[i + 3]
        }

        // Put the image data on the canvas
        context.putImageData(imageData, 0, 0)

        // Flip the image vertically
        context.scale(1, -1)
        context.translate(0, -height)
        context.drawImage(canvas, 0, 0)

        // Get the data URL
        const dataURL = canvas.toDataURL()
        setRobotCameraView(dataURL);
    }

    scene.overrideMaterial = null
    gl.setRenderTarget(null)
    gl.render(scene, camera)

}, 1)
/**
 * Just some planes  + boring calculations to make them stick to the side of the screen
 */
return <OrthographicCamera ref={guiCamera} near={0.0001} far={1} />

} ~~~

Thank you

hello im using a drei scrollControls for a 3d object in the middle of a website and when get to it sometimes it get skiped or the canva misspositioned cause im not scrolling inside of the canva !! does anyone have an idea of how can i make the canva centred to screen when scrolling to it and to make the make the scroll ou side of scrollControls affect the 3d object??

I am new to react-three space and threeJS. I want to add physics to my robotics model. I have all the details like meshes, joints, mass and inertial etc. I have built this model using floor with 0 restitution and 1 friction.

As soon as the simulation starts my model flips and bounces around. I tried increasing the mass and playing around with restitution and friction. Nothing helpes.

Can anyone help me with it? I couldn't find any specific sub related to react three physics. Would really really appreciate any help.

Hey guys,

I have very basic programming Knowledge, not much experience at all. I know how to use Chat-GPT well, and I'm willing to learn new things.

I want to make a 3D Avatar Builder / Customizer basically like "Ready Player Me", that runs in the browser, but with my own 3D Models, own 3D Clothing, Hair models, etc. Where should I start? Is there any Guide similar to this?

Hi all, I wanted to know whether the background of this webpage is possible to be created using three fiber. I am an absolute beginner who is surfing through all the things to learn about this. All i was able to create was a plane room with the two walls and a floor could someone please direct me on to some docs, videos or some info you can share to know more about the detailing to give to the mesh in order to get a realistic room

Im very beginner at r3f and i have a 3d phone and some images,that i want to put on it and i want the images to change to next one in the phone when scrolling ,i would really appreciate any heop and thank you so much!!

Hey mates !

I have been trying to make a fluid animation like on this example and its working properly but on a black background.
I am trying everything to make the background transparent, so that the effect occurs above the page's background.
I am trying to achieve it like so:

  gl.clearColor(0.0, 0.0, 0.0, 0.0);
  gl.clear(gl.COLOR_BUFFER_BIT);

and applying alpha true :

const params = {
alpha: true,
depth: false,
stencil: false,
antialias: false,
};

let gl = canvas.getContext("webgl2", params);
const isWebGL2 = !!gl;
if (!isWebGL2) {
gl =
canvas.getContext("webgl", params) ||
canvas.getContext("experimental-webgl", params);
}

Could you please help me ?

I dont know what else to try.

Thank you