model-viewer
gltfjsx
Our great sponsors
model-viewer | gltfjsx | |
---|---|---|
68 | 54 | |
6,517 | 4,141 | |
1.8% | 4.4% | |
8.5 | 7.1 | |
about 14 hours ago | 8 days ago | |
TypeScript | JavaScript | |
Apache License 2.0 | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
model-viewer
-
Would it be possible to implement this 3d model viewer into 3d tavern?
I came across this after finding out about chatvrm https://modelviewer.dev and I was wondering if it would be possible to implement it into silly tavern or if anyone knows of similar extensions? I might try it myself but I really have no idea what I am doing but it would be cool to add any video game character to it with animations for a more realistic rp experience.
-
F3D is an open source 3D viewer, fast and minimalist
Shameless plug: if you are interested in viewing and/or embedding glTF or USDZ files on the web, I worked on an HTML element for that called
"It's like or tag for 3D models"
https://modelviewer.dev/
-
Time estimate from a pro
That said, maybe in your case, if it's a really minimal 3D viewer, it could be that the modelviewer.dev could what you need. You can use it like any other html element and just link it to a 3D model you export from blender as a .glb file. I think it also allows you to add labels.
- Want to create AR experience on Shopify
-
a free alternative to github pages that support at least repos of 60mb?
something free like github pages where can I load fore free about 60mb? basically I am using modelviewer.dev to render a 3d model, but I can't insert it directly into my website because I am using google sites, so I though about using an iframe via github but I am limited to 25mb, which the model is about 40/50mb I can't make it smaller
- a way to freerly render 3d models within google sites?
-
3d Models on Shopify.
Anyways, I would suggest that you use package by google. You can find it here: https://modelviewer.dev/ .. It takes care of loading the model and controls as well as show the "view in AR" button on supporting devices. More important than anything, you just give it the model and it takes care of everything else.
-
how do I export a 3d model with animated textures as glb?
I was going to use this: https://modelviewer.dev/
-
Tool to convert JS file into <script></script> friendly code to use in all in one HTML file?
I'd like to get the google 3d model-viewer working on Ordinals: https://modelviewer.dev/
- WebAR help
gltfjsx
-
How can I get rid of these gaps?
Hello! I loaded a model using https://gltf.pmnd.rs and it displays correctly, but there are weird gaps that you can see through on the edges. This is a Next.js project with ts. I'm using @react-three/fiber and @rect-three/drei to use three.js in react. I'll attach the file that creates this object, but if there's anything more you need, just ask me. Here's the file that contains the code of this object:
-
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.
-
Add texture to loaded glb, threejs
especially for what you describe above. it can lay out a glb model declaratively, the whole scene is yours to control. watch the first video here https://github.com/pmndrs/gltfjsx and then use that tool:
- Optimization checklist GLTF models in Three.js?
-
Any good tutorials on creating dynamic animations?
stuff like this doesn't have to be keyframed, you can just rotate model groups. im sure this will be overwhelming atm but if you have the time watch the video there https://github.com/pmndrs/gltfjsx models in threejs are blobs, they are not meant to do anything. people traverse them and create mutations. but that tool puts the entire model scene under your control, every node in its graph is declarative now, to my it dynamic is trivial at that point.
-
which skills to learn from Blender for three js
the second practically doesn't exist in vanilla three. a gltf is a blob that you throw into the scene. pair three with react and blender will be a lot more useful: https://github.com/pmndrs/gltfjsx (watch the first video there)
-
How to apply Mesh Wobble Material to gltf model in r3f?
I want to implement this for a gltf model loaded as a gltfx. MeshWobbleMaterial is not getting qpplied. i don't know what to where to add the component either. i have attached the code below,
-
Help making a model look like the demo
/* Auto-generated by: https://github.com/pmndrs/gltfjsx Command: npx [email protected] crystal_ball_test.glb Author: WarderiiK (https://sketchfab.com/WarderiiK) License: CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/) Source: https://sketchfab.com/3d-models/crystal-ball-test-fc727811052a4b2ba9ef2ffa327e8349 Title: Crystal Ball Test */ import React, { useRef } from 'react' import { useGLTF, useAnimations, MeshTransmissionMaterial } from '@react-three/drei' export default function Model(props) { const group = useRef() const { nodes, materials, animations } = useGLTF('/crystal_ball_test.glb') const { actions } = useAnimations(animations, group) return ( ) }
-
Where should I keep my assets?
Have you compressed your models with https://gltf.pmnd.rs ? ( sorry this is unrelated to your post ) or you could use https://github.com/pmndrs/gltfjsx ( same thing but you use it like an npm package )
- Need help figuring out how many texture set to use and how to split them up (more in comments)
What are some alternatives?
three.js - JavaScript 3D Library.
gltf-pipeline - Content pipeline tools for optimizing glTF assets. :globe_with_meridians:
BabylonJS - Babylon.js is a powerful, beautiful, simple, and open game and rendering engine packed into a friendly JavaScript framework.
react-three-fiber - 🇨🇭 A React renderer for Three.js [Moved to: https://github.com/pmndrs/react-three-fiber]
A-Frame - :a: Web framework for building virtual reality experiences.
drei - 🥉 useful helpers for react-three-fiber
trois - ✨ ThreeJS + VueJS 3 + ViteJS ⚡
leva - 🌋 React-first components GUI
3d-model-convert-to-gltf - Convert 3d model (STL/IGES/STEP/OBJ/FBX) to gltf and compression
react-xr - 🤳 VR/AR with react-three-fiber
vircadia-native-core - Vircadia open source agent-based metaverse ecosystem.
awesome-react-three-fiber - 🍕 A loose collection of cool r3f links, gifs, people, stuff