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 />…
I downloaded a gltf model from sketchfab to put in my website. This one, https://sketchfab.com/3d-models/space-exploration-wlp-series-8-91964c1ce1a34c3985b6257441efa500. But everytime I try to load it into my project, everything from my screen just disappears. I thought that I set up the Canvas element…
I am following a 3d portfolio tutorial from Youtube and got caught in this error. Here I am trying to render a mesh but the console is showing a warning that "This element is unrecognized in this browser". The browser…
I've been trying to load a GLTF model into my gatsby site using react-three-fiber, but can't seem to get it to load. This seems like it should be very simple, but I'm new to Gatsby and threejs and was wondering…