Our great sponsors
-
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
If you have installed blender but didn't create any model, here you have the one I'm using in the tutorial
/* Auto-generated by: https://github.com/pmndrs/gltfjsx */ import React, { useRef } from 'react' import { useGLTF } from '@react-three/drei' import { useFrame } from '@react-three/fiber' export default function Model({ props, currentState, setCurrentState, setHover }) { const group = useRef() const { nodes, materials } = useGLTF('/ShoeModelDraco.glb'); // Animate model useFrame(() => { const t = performance.now() / 1000 group.current.rotation.z = -0.2 - (1 + Math.sin(t / 1.5)) / 20 group.current.rotation.x = Math.cos(t / 4) / 8 group.current.rotation.y = Math.sin(t / 4) / 8 group.current.position.y = (1 + Math.sin(t / 1.5)) / 10 }) return ( <> { e.stopPropagation(); setHover(e.object.material.name); }} onPointerOut={(e) => { e.intersections.length === 0 && setHover(null); }} onPointerMissed={() => { setCurrentState(null); }} onClick={(e) => { e.stopPropagation(); setCurrentState(e.object.material.name); }}> group> ) } useGLTF.preload('/ShoeModelDraco.glb')
Content pipeline tools for optimizing glTF, more here