React Fiber Puns

I've made a basic animation in react three fiber using useFrame hook and changing the position of the mesh. Is there a way i can pause the animation with a button and resume from where it left off?

Hello!

Using React-three-fiber, I’m trying to build out a carousel made of plane geometries that I intend to animate.

I’m having a bit of trouble figuring out how to pass multiple textures inside my basic mesh material so that each of my three planes have a unique texture (like a carousel of images)

Would appreciate any feedback on the best approach!

I made use of react-drei’s useTexture:

const [ texture1, texture2, texture3 ] = useTexture([\${strike1}\, `${strike2}`, `${strike3}`]);``

return (

<>

<mesh>

<meshBasicMaterial map={} />

...

Started using React-three-fiber with Blender in the new year. It's very interesting, and feels more approachable then WebGL and Three.js. Built this simple scene using a model I created in blender and added some on hover effects. I think that there is so much potential to be what can be made with R3F and the Docs are very helpful, would heavily recommend checking them out. Would be interested here hear other peoples experience using it.

CodeSandBox Demo - https://y3d0y.csb.app/

Docs - https://docs.pmnd.rs/react-three-fiber/getting-started/examples

https://codesandbox.io/s/misty-fire-92mpl

How can I navigate to a new page when Click on each of the object??. (Do check the <Home /> component it has all the code.

thanks

Still relatively new to both React and 3js. I’m hoping to avoid learning an abstraction before the fundamentals, but R3F is impossible to ignore.

Hello I was about to ask a question related to the react-three-fiber library that I'm new to; but I figured I'd first ask if there are any communities for that library specifically that would be better suited for it?

I tried running the example on the react-three-fiber GitHub repo README. The two cubes render fine, and the mouse hover event works but the part where you subscribe to the render loop with ‘useFrame’ doesn’t seem to work, the cubes do not spin.

I have no idea as to why this occurs, any insight would be helpful :)

Thanks.

Edit: typo

Hey, i have Ulcerative Colitis and it seems like all plant protein sources that are also cheap are tons of fibers in them. Is there any way to remove the fiber or something? Like idk what to do, i wish i could just eat lots of beans and lentils daily

I downloaded a glb that is a knight with an armor. I'm noticing that this knight object is very very dark in the scene compared to the other objects. if I turn up the lighting big time he is clearly visible but the other objects are way too light.

Doing some research I discovered this is often the case when objects have a lot of metal in them? Makes sense with the knight in armor I guess :P I created my knight by auto generating the gltf model with npx gltfjsx, this package built the knight with skinnedMeshes.

The solution I encountered for the darkness of the model is to set the metalness to 0 but I can't figure out how to do this for a SkinnedMesh.

The code for this knight is the following. The metalness={0,0} does not solve anything, I believe this is not a valid property of a skinnedMesh.

Does anybody have any advice on how to deal with this issue?

/*
Auto-generated by: https://github.com/pmndrs/gltfjsx
*/

import React, {useRef, useEffect, useState} from 'react'
import { useGLTF, useAnimations } from '@react-three/drei'

export default function Model(props) {
  const {animation} = props;

  const group = useRef()
  const { nodes, materials, animations } = useGLTF('/knightmultiple.glb')
  const { actions } = useAnimations(animations, group)

  return (
    <group scale={0.01} ref={group} {...props} dispose={null}>
      <group rotation={[Math.PI / 2, 0, 0]} scale={[0.01, 0.01, 0.01]}>
        <primitive object={nodes.Hips} />
        <skinnedMesh
          metalness={0.0}
          geometry={nodes.Paladin_J_Nordstrom.geometry}
          material={nodes.Paladin_J_Nordstrom.material}
          skeleton={nodes.Paladin_J_Nordstrom.skeleton}
        />
        <skinnedMesh
          metalness={0.0}
          geometry={nodes.Paladin_J_Nordstrom_Helmet.geometry}
          material={nodes.Paladin_J_Nordstrom_Helmet.material}
          skeleton={nodes.Paladin_J_Nordstrom_Helmet.skeleton}
        />
        <skinnedMesh
          geometry={nodes.Paladin_J_Nordstrom_Shield.geometry}
          material={nodes.Paladin_J_Nordstrom_Shield.material}
          skeleton={nodes.Paladin_J_Nordstrom_Shield.skeleton}
        />
        <skinnedMesh
          geometry={nodes.Paladin_J_Nordstrom_Sword.geometry}
          material={nodes.Paladin_J_Nordstrom_Sword.material}

Hello, I am thinking about tweaking and using a model from threejs on my project. I have some (limited) experience with threejs but I'm still pretty inexperienced. This is a relatively minor attribute of the project I'm working on at the moment so I haven't had the time to go all-in on mastering threejs as of yet. I'm wondering how feasible it would be to convert a relatively complex scene from threejs to react three fiber. I've been working through this and trying to improve with threejs fiber for a few days but the complexity of this project is just a bit too high for me to really grasp how I can approach this. I would really appreciate if anyone would be willing to take a look at the code and generally lay out the approach they would take, I'm mostly lost on maintaining the parameters they have laid out while also making it compatible with react. Here's a link to the project I'm looking at https://tympanus.net/codrops/2021/01/26/twisted-colorful-spheres-with-three-js/ -- I'm trying to port the second model. I would really appreciate any pointers, even if you aren't particularly keen on taking the time to actually look through the code itself. Thank you!