I used to see those 3D industrial demos and assume they were all AI-generated … · @yeemio · TwKit

@yeemio

I used to see those 3D industrial demos and assume they were all AI-generated videos. Then I tried to figure out how people made them, and discovered Three.js. It’s a JavaScript library that lets you build 3D scenes in a web page. Instead of just watching a video, you can rotate the model, change its state, take it apart, and see what happens. This is our first attempt, so please be kind 😄 We used GLM-5.3 to help make an interactive bicycle derailleur. The mechanical drawings came from publicly available patents we found by searching online. You can look for patents, parts diagrams, or manuals for whatever you want to make, too. We also used the manufacturer’s parts and service documents as references. In our demo, you can change gears and watch the chain and derailleur move together. You can slow it down, pull the parts apart, and click a part’s name to highlight it. The key was separating the work into pieces: build the individual parts in code, calculate how their positions relate, and let Three.js draw and animate the result. We used a simplified mechanical model, so this is an interactive explanation, not an engineering-grade simulation. Want to try making your own? Find some references and give this prompt to a coding AI: “Help me build an interactive 3D web demonstration of [object] that explains [the movement or process] to [audience]. I’m providing [images, patent drawings, parts diagrams or manuals]. First, identify the main parts, how they connect, and how they move. Separate facts supported by the references from assumptions. When a dimension or movement is unknown, use a clearly labeled simplification instead of inventing a precise value. Use HTML, CSS and JavaScript, with Three.js for the 3D scene, camera, lighting, materials and shadows. Build and name the important parts separately so they can be selected and highlighted. Add drag-to-rotate, zoom and useful preset views. Keep the mechanism calculations separate from rendering. When a control changes, calculate the related positions and angles together, then animate the model to the new state. Add play, pause and slow motion. Where appropriate, add an exploded-view slider and a parts list that highlights the selected part. Open the page and test the controls and movements. Check that the whole model fits in the initial view and the interface doesn’t cover important parts. Deliver the complete files, dependencies, startup instructions, and a list of what you actually tested and what remains approximate. If you can’t run or test it, say so. Start by briefly explaining your understanding and assumptions, then build it.” It doesn’t have to be a derailleur. You could try a door lock, a coffee grinder, or any mechanism you’ve always wanted to understand.

曝光 173 · 评论 3 · 点赞 9 · 书签 0