Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality. Learn more →
Gltfjsx Alternatives
Similar projects and alternatives to gltfjsx
-
-
Google Fonts
Font files available from Google Fonts, and a public issue tracker for all things Google Fonts
-
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.
-
-
-
-
-
-
WorkOS
The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.
-
twind
The smallest, fastest, most feature complete Tailwind-in-JS solution in existence.
-
-
-
gltf-pipeline
Content pipeline tools for optimizing glTF assets. :globe_with_meridians:
-
react-three-fiber
Discontinued 🇨🇭 A React renderer for Three.js [Moved to: https://github.com/pmndrs/react-three-fiber] (by react-spring)
-
-
-
awesome-react-three-fiber
🍕 A loose collection of cool r3f links, gifs, people, stuff
-
-
twin.examples
Packed with examples for different frameworks, this repo helps you get started with twin a whole lot faster.
-
component-material
Discontinued 🧩 Compose modular materials in React
-
drei
Discontinued 🌭 useful helpers for react-three-fiber [Moved to: https://github.com/pmndrs/drei] (by react-spring)
-
-
InfluxDB
Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
gltfjsx reviews and mentions
-
React + Three.js. Creating your own 3D shooter. Part 1
Then we need to generate a react component that will contain the markup of this model to add it to the scene. Let's use the official resource from the @react-three/fiber developers.
- Optimization checklist GLTF models in Three.js?
- Need help figuring out how many texture set to use and how to split them up (more in comments)
-
Can someone help me rendering .gltf files into react?
you should also consider https://github.com/pmndrs/gltfjsx this usually is the best choice and the tool will also compress your files (up to 99% smaller).
-
Scroll animations with React Three Fiber and GSAP
/* Auto-generated by: https://github.com/pmndrs/gltfjsx */ import { useGLTF, useScroll } from "@react-three/drei"; import { useFrame } from "@react-three/fiber"; import gsap from "gsap"; import React, { useLayoutEffect, useRef } from "react"; export const FLOOR_HEIGHT = 2.3; export const NB_FLOORS = 3; export function Office(props) { const { nodes, materials } = useGLTF("./models/WawaOffice.glb"); const ref = useRef(); const tl = useRef(); const libraryRef = useRef(); const atticRef = useRef(); const scroll = useScroll(); useFrame(() => { tl.current.seek(scroll.offset * tl.current.duration()); }); useLayoutEffect(() => { tl.current = gsap.timeline(); // VERTICAL ANIMATION tl.current.to( ref.current.position, { duration: 2, y: -FLOOR_HEIGHT * (NB_FLOORS - 1), }, 0 ); // Office Rotation tl.current.to( ref.current.rotation, { duration: 1, x: 0, y: Math.PI / 6, z: 0 }, 0 ); tl.current.to( ref.current.rotation, { duration: 1, x: 0, y: -Math.PI / 6, z: 0 }, 1 ); // Office movement tl.current.to( ref.current.position, { duration: 1, x: -1, z: 2, }, 0 ); tl.current.to( ref.current.position, { duration: 1, x: 1, z: 2, }, 1 ); // LIBRARY FLOOR tl.current.from( libraryRef.current.position, { duration: 0.5, x: -2, }, 0.5 ); tl.current.from( libraryRef.current.rotation, { duration: 0.5, y: -Math.PI / 2, }, 0 ); // ATTIC tl.current.from( atticRef.current.position, { duration: 1.5, y: 2, }, 0 ); tl.current.from( atticRef.current.rotation, { duration: 0.5, y: Math.PI / 2, }, 1 ); tl.current.from( atticRef.current.position, { duration: 0.5, z: -2, }, 1.5 ); }, []); return ( ); } useGLTF.preload("./models/WawaOffice.glb");
-
Hey guys, i have a problem with HTML (website) on 3D model screen.
Another helpful tool you can use https://gltf.pmnd.rs/ or use react-there’s command line tool gltfjsx to make a component of your mesh.
-
I would like to focus more on using threejs and blender to develop 3D experiences; how should I improve my portfolio site? Thanks for the advice!
https://github.com/pmndrs/react-three-fiber in combination with https://github.com/pmndrs/gltfjsx will give you a better experience. https://github.com/pmndrs/drei contains tons of components that would improve the visual look.
-
threlte v5.0 is here! A completely new developer experience that is faster, more powerful, and incredibly flexible.
Unfortunately it's not that easy. While in this component there are only two imports happening, these two imports will still have an impact on your bundle size that is larger than the actual two files imported. This is the nature of three.js. A popular tool to minify three.js for production is this minifier. It's an interesting topic for sure but our goal is not to market threlte against other frameworks but to cooperate. There's a lot of tooling that threlte is able to benefit from in the react-three-fiber ecosystem and there's the intention from both sides to do so. One of the first candidates for this could be gltfjsx. For me personally using Svelte over React is huge.
-
How to traverse scene and exclude a mesh?
change the paradigm and all of this goes away. skip to 0:20 in the video at the top and you get at least an impression what normal web dev is like: https://github.com/pmndrs/gltfjsx
-
Create a First Person Movement in React Three Fiber - Part 2
We are not going to see all the code of the components but it's important to know some key concepts. The next component is ThreeModel.js which is the model of the three. To do this I have used a model from internet and this utility to create a React component from a gLTF.
-
A note from our sponsor - InfluxDB
www.influxdata.com | 17 Apr 2024
Stats
pmndrs/gltfjsx is an open source project licensed under MIT License which is an OSI approved license.
The primary programming language of gltfjsx is JavaScript.