I am using the react-three-fiber getting started doc to render a cube on a page but nothing shows and I am at a bit of a loss. Link: https://r3f.docs.pmnd.rs/getting-started/your-first-scene I am getting this error and a blank page in the…
(perspective grid that might be useful to illustrate what I mean) I've been trying to create what I'd describe as a "dynamic perspective infinite marquee". Specifically I'm using this video as a reference. Screenshot of it attached. Any help would…
pretty new to r3f but having a blast so far. I've run into a bit of an issue when rendering HTML into the scene with the drei helper. I'll drop the code from my render function below: <group ref={group}> <LogoMesh…
fragment code : export const fragment = `varying vec2 vUv; uniform vec2 viewport; uniform vec2 uMouse; float createCircle() { vec2 viewportUv = gl_FragCoord.xy / viewport; float viewportAspect = viewport.x / viewport.y; vec2 mousePoint = vec2(uMouse.x, 1.0 - uMouse.y); float circleRadius…
I need to illuminate a sphere with two directional lights, one in front to illuminate the front of the sphere like sunlight. And one towards the back to display the light of the cities. To do this, I play with…
import Spline from '@splinetool/react-spline'; import { useRef } from 'react'; export default function App() { function onLoad(spline) { const obj = spline.findObjectByName('Clink'); // console.log(spline.style) spline.style = {width:"100vw"} // spline.camera.position.z = 0 // spline.canvas.width = "1920px" // let can = Object.keys(spline.canvas)…
I want to recreate something like the about section of this amazing portfolio: https://www.david-hckh.com/ There in the about section the section appears to be 100vh and has a side content with about info that scrolls in the main scroll and…
So i ve been messing aroud with threejs in react. I found out that the way to display 3d objects in react is turning the into a JSX Component by using gltfjsx . I followed everything, i even tried it…
Quite new to ReactJS and using it for web development. How do I show one div but hide all others onclick, all divs are hidden on purpose (popup divs from onclick on sidebar menu). I have two buttons on a…
I encountered a duplicate key warning that I did not expect(because it's not a list of the same type of components) for the following: <Foo key={'baz'} /> <Bar key={'baz'} /> Why it's totally fine to have the following? <Foo />…