3 ms·

Can you point to what libraries he could have used that would have made it simpler? I doubt anything like would benefit from any type of abstraction that curren

by soheil 4y ago

Can you point to what libraries he could have used that would have made it simpler? I doubt anything like would benefit from any type of abstraction that currently exists, unless it was a more interactive application that would incorporate user input etc.

ThePhysicist 4y ago
Three.js maybe, but it doesn't abstract too much away in my opinion, it has a lot of functionality around more complex topics (textures for example), but since he doesn't seem to use those it's probably not worth the hassle.
JayStavis 4y ago
Depending on one's skillset, you could use a dcc tool like Blender + three.js to make creation of these visuals and interactions much simpler. Have a look at gltfjsx + react-three-fiber [1] combination, which themselves are abstractions over vanilla three.js. With that said, the raw webGL approach here is arguably more educational, so goal achieved I think! [1] https://docs.pmnd.rs/react-three-fiber/getting-started/examples https://docs.pmnd.rs/react-three-fiber/getting-started/examp... Edit: there's actually a 50 LOC watch example with r3f: https://codesandbox.io/s/bouncy-watch-qyz5r https://codesandbox.io/s/bouncy-watch-qyz5r
- soheil 4y ago
  Cool example, but all r3f is doing here is just providing the threejs camera, controls and the text with emoji, the watch itself is loaded as a .glb file, where I'd assume most people would be interested in learning about.
  - JayStavis 4y ago
    Yeah, I think exporting a scene from blender as glft/glb, and then using these tools to bring your exported 3D file to the web, is one of the more approachable abstractions. The reason you'd use gltfjsx (which that example doesn't) is to have fine grained controls for every node in the scene graph. In the case of the watch, this would map to having a component for each mesh or gear, which can be controlled with mechanics/physics.

by soheil 4y ago

ThePhysicist 4y ago

Three.js maybe, but it doesn't abstract too much away in my opinion, it has a lot of functionality around more complex topics (textures for example), but since he doesn't seem to use those it's probably not worth the hassle.

JayStavis 4y ago

Depending on one's skillset, you could use a dcc tool like Blender + three.js to make creation of these visuals and interactions much simpler. Have a look at gltfjsx + react-three-fiber [1] combination, which themselves are abstractions over vanilla three.js. With that said, the raw webGL approach here is arguably more educational, so goal achieved I think! [1] https://docs.pmnd.rs/react-three-fiber/getting-started/examples https://docs.pmnd.rs/react-three-fiber/getting-started/examp... Edit: there's actually a 50 LOC watch example with r3f: https://codesandbox.io/s/bouncy-watch-qyz5r https://codesandbox.io/s/bouncy-watch-qyz5r

soheil 4y ago
Cool example, but all r3f is doing here is just providing the threejs camera, controls and the text with emoji, the watch itself is loaded as a .glb file, where I'd assume most people would be interested in learning about.
- JayStavis 4y ago
  Yeah, I think exporting a scene from blender as glft/glb, and then using these tools to bring your exported 3D file to the web, is one of the more approachable abstractions. The reason you'd use gltfjsx (which that example doesn't) is to have fine grained controls for every node in the scene graph. In the case of the watch, this would map to having a component for each mesh or gear, which can be controlled with mechanics/physics.