31:T57f,

Animated 3D models created in Blender can be exported as **glTF ™** files (GL Transmission Format). This format is used for transmission and loading of 3D models in web applications. This notebook shows an example of a **.glb* file imported from Blender (version 3.6) and displayed using *three.js*.

The GLB model used for this demonstration shows locking forceps designed by WatchThenLearn. Based on his original STL file, I created an animated version. To do this, I used finite element analysis (SolidWorks CAD software) and animated the model with shape keys (Blender). If you would like to find out more about how this animated model was created, you can check this other version available on Sketchfab.

Downloads:

Forceps.blend (Blender model)
Forceps.glb (GLB binary file)

32:T467,dot` digraph { graph [fontname = "helvetica"]; node [fontname = "helvetica"]; edge [fontname = "helvetica"]; a1 [label=with a CAD software
(or download from the web)>]; a2 [label=<SolidWorks

FEM simulation>]; a3 [label=<Blender

Animation with
Shape keys
>] a4 [label=on the web using the three.js
javascript library>]; subgraph cluster_0 { style=rounded; color=lightgrey; penwidth=2; margin="28"; node [color=black]; a2 -> a3 [penwidth=1.5, label=< 1. Non-deformed
3D model

*.wrl>] a2 -> a3 [penwidth=1.5, label=< 2. Deformed
3D model

*.wrl>] } a1 -> a2 [penwidth=2, label=< *.stl
or *.stp>] a3 -> a4 [penwidth=2, label=< *.glb
or *.gltf>] a2 [shape=circle, penwidth=3, color="#BA0F09"]; a3 [shape=circle, penwidth=3, color="#EA7600"]; a1 [shape=none]; a4 [shape=none]; }`33:T518,layout = { let _id = 0; return function(layout) { return function * (parts, ...args) { yield html`

...loading...

`; const str = parts.map((s, i) => s + (i < args.length ? args[i] : "")).join(""); const svg = graphviz.layout(str, "svg", layout); const id = ++_id; yield html`\

${svg}

`; setTimeout((id) => { var svg = d3.select(`#id_${id}`).select("svg") .attr("width", `${width_digraph}px`) .attr("height", `${height_digraph}px`) .attr("pointer-events", "none") // Remove this line to make the graph zoomable and movable ; var g = svg.select("g"); var [x, y, _width, height] = svg.attr("viewBox").split(" "); var zoom = d3.zoom(); svg.call(zoom .extent([[0, 0], [width, height]]) .scaleExtent([0.1, 8]) .on("zoom", ({ transform }) => g.attr("transform", transform)) ); svg.call(zoom.translateTo, width / 2, -height / 2); }, 1000, id); } } }34:[{"id":"85c93d8aa6778c015afdb307c1549c5f8f22f8685a8d970aaee73a6d043ece6479ddfa4057c82c4d20995bd05e902b80e7af5e6189cdd3e6586b3255789aa5e2","href":"https://static.observableusercontent.com/files/85c93d8aa6778c015afdb307c1549c5f8f22f8685a8d970aaee73a6d043ece6479ddfa4057c82c4d20995bd05e902b80e7af5e6189cdd3e6586b3255789aa5e2","name":"forceps_youtube_thumbnail.png","type":"image/png","lastModified":1696156851631.694,"size":590483},{"id":"d4c4c380c7745bfc3baa97dee82675d3ba26be37076be68a067348bae9078dedc2dd3f8c8fb38f31a49097c77eb81dfd2569b38c53a8bfb5f156f4cb21b7bb22","href":"https://static.observableusercontent.com/files/d4c4c380c7745bfc3baa97dee82675d3ba26be37076be68a067348bae9078dedc2dd3f8c8fb38f31a49097c77eb81dfd2569b38c53a8bfb5f156f4cb21b7bb22","name":"graphviz.js","type":"application/javascript","lastModified":1705005201647.989,"size":659747},{"id":"6f85b59bf203966cb9abe7b81eadf83c5a44d15423177241a8f39f45b3146149ddb32c2be30d653163ac183a72fb704cb58bd2a1c0fd51ce4ceec3d3bfff479f","href":"https://static.observableusercontent.com/files/6f85b59bf203966cb9abe7b81eadf83c5a44d15423177241a8f39f45b3146149ddb32c2be30d653163ac183a72fb704cb58bd2a1c0fd51ce4ceec3d3bfff479f","name":"forceps.glb","type":"model/gltf-binary","lastModified":1695036388394.888,"size":10318608},{"id":"433feb267d029fa97ee00d0000e27bcad14fe6c13f2559eace5efd1f60dab8975682b861c9bb0532f2cf1f83f8be38d2a851939e61fc7e3531fb4fb83c686418","href":"https://static.observableusercontent.com/files/433feb267d029fa97ee00d0000e27bcad14fe6c13f2559eace5efd1f60dab8975682b861c9bb0532f2cf1f83f8be38d2a851939e61fc7e3531fb4fb83c686418","name":"forceps.blend","type":"application/x-blender","lastModified":1695051179796.041,"size":20373692}] 2f:{"title":"Embedding 3D models using three.js","cells":[{"id":0,"value":"# Embedding 3D models using three.js \n## **(GLB / GLTF formats)**","pinned":false,"hidden":false,"mode":"md"},{"id":929,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":624,"value":"renderer.domElement","pinned":false,"hidden":false,"mode":"ojs"},{"id":631,"value":"currentAnimate = Inputs.select(['No animation'].concat(modelAnimation.names), \n {value: \"KeyAction\", \n label: \"Play mode\", \n format: (name) => { if(name == `KeyAction`) {return `🏃 Animated model`} \n else if(name == `No animation`) { return `🧍‍♂ ${name}`} else { return `${name}`}} \n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1309,"value":"viewof Object_color = Inputs.color({label: \"Object color\", value: \"#1e31e7\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":908,"value":"viewof BKG_color = Inputs.color({label: \"Background color\", value: \"#141d2a\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":918,"value":"viewof Grid_color = Inputs.color({label: \"Grid color\", value: \"#757575\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1454,"value":"viewof Wireframe = Inputs.toggle({label: \"Geomoetry as wireframe\", value: false})","pinned":false,"hidden":false,"mode":"ojs"},{"id":954,"value":"viewof Display_origin = Inputs.toggle({label: \"Axis display\", value: false})","pinned":false,"hidden":false,"mode":"ojs"},{"id":946,"value":"viewof Display_grid = Inputs.toggle({label: \"Grid display\", value: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":896,"value":"
","pinned":false,"hidden":false,"mode":"md"},{"id":1625,"value":"## Tutorial video\n\nCheck also this tutorial where I show how to animate a flexible mechanical part in 3D. \nThis is done using SolidWorks Simulation (finite element calculations) and Blender. \nBlender's Shape Keys are at the heart of this process.\n\nLink: https://www.youtube.com/watch?v=a1SBZ0Ao354","pinned":false,"hidden":false,"mode":"md"},{"id":1636,"value":"

Video tutorial – Using SolidWorks Simulation and Blender's Shape Keys to animate a 3D model.

","pinned":false,"hidden":false,"mode":"md"},{"id":1631,"value":"
","pinned":false,"hidden":false,"mode":"md"},{"id":1487,"value":"## Digraph\n\n
This diagram shows the path followed to create and embed this 3D animated model in Observable.com using SolidWorks (Premimum 2012), Blender (v. 3.6), and three.js.","pinned":false,"hidden":false,"mode":"md"},{"id":1479,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1634,"value":"
","pinned":false,"hidden":false,"mode":"md"},{"id":888,"value":"\n## Appendices","pinned":false,"hidden":false,"mode":"md"},{"id":720,"value":"A_3D_Model = await (FileAttachment(\"forceps.glb\").url())","pinned":false,"hidden":false,"mode":"ojs"},{"id":1208,"value":"Blender_model = await (FileAttachment(\"forceps.blend\").url())","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":1551,"value":"width_digraph = 650","pinned":false,"hidden":false,"mode":"ojs"},{"id":1545,"value":"height_digraph = 800","pinned":false,"hidden":false,"mode":"ojs"},{"id":942,"value":"Axis_color = Grid_color","pinned":false,"hidden":false,"mode":"ojs"},{"id":1328,"value":"Model_color = Object_color.replace(\"#\",\"0x\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"THREE = {\n // import threejs\n const three = await require(\"three@0.139.2\");\n window.THREE = three;\n\n // import plugins\n await require(\"three@0.139.2/examples/js/controls/OrbitControls.js\").catch((e) => { console.warn(e) });\n await require(\"three@0.139.2/examples/js/loaders/GLTFLoader\").catch((e) => { console.warn(e) });\n\n console.log(three);\n return three;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"// create renderer\nrenderer = {\n \n const renderer = new THREE.WebGLRenderer({\n antialias: true,\n alpha: true,\n });\n renderer.setSize(width, height);\n //renderer.setClearColor(0xb9d3ff, 1);\n renderer.setPixelRatio(devicePixelRatio);\n \n // initial controls\n const controls = new THREE.OrbitControls(camera, renderer.domElement);\n controls.addEventListener(\"change\", () => renderer.render(scene, camera));\n invalidation.then(() => (controls.dispose(), renderer.dispose()));\n window.addEventListener('keyup', (e) => {\n if (e.code === 'Space') {\n controls.reset();\n }\n });\n return renderer;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"// create scene\nscene = {\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(BKG_color);\n\n // initial light\n const point = new THREE.PointLight(0xffffff);\n point.position.set(0, 100, 0);\n scene.add(point);\n const ambient = new THREE.AmbientLight(0xcccccc);\n scene.add(ambient);\n\n const axisHelper = new THREE.AxesHelper(20);\n const gridHelper = new THREE.GridHelper(220, 20, Axis_color, Grid_color);\n if(Display_origin) {\n scene.add(axisHelper);\n }\n if(Display_grid) { \n scene.add(gridHelper);\n }\n return scene;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"// create camera\ncamera = {\n const fov = 40;\n const aspect = width / height;\n const near = 1;\n const far = 1000;\n const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);\n\n camera.position.set(100, 120, 30);\n camera.lookAt(scene.position);\n\n return camera;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":"loadModel = {\n\n const loader = new THREE.GLTFLoader();\n const loadPromise = () => new Promise((resolve, reject) => {\n loader.load(\n // 'https://iaosee-resource.oss-cn-beijing.aliyuncs.com/model/RobotExpressive.glb',\n A_3D_Model,\n (model) => { \n resolve(model);\n },\n undefined,\n (error) => {\n reject(error);\n },\n );\n }); \n \n const result = await loadPromise().catch((e) => { console.warn(e) });\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":331,"value":"modelAnimation = {\n // model animation\n const clock = new THREE.Clock();\n const mixer = new THREE.AnimationMixer(loadModel.scene);\n \n const names = [];\n const actionMap = new Map(); // save Action\n\n for (let i = 0; i < loadModel.animations.length; i++) {\n const clipItem = loadModel.animations[i];\n names[i] = clipItem.name;\n actionMap.set(clipItem.name, mixer.clipAction(clipItem));\n }\n return { actionMap, names, mixer, clock };\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1116,"value":"function animate() {\n console.log('Play: ', currentAnimate.value);\n modelAnimation?.mixer?.stopAllAction();\n const animateAction = modelAnimation?.actionMap.get(currentAnimate.value);\n animateAction?.play();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":239,"value":"{\n scene.add(loadModel.scene);\n\n loadModel.scene.traverse(function (child) {\n if (child.isMesh) {\n child.material.color.setHex(Model_color);\n if(Wireframe){\n child.material.wireframe = true;\n child.material.opacity = 0.12;\n child.material.transparent = true;\n } else {\n child.material.wireframe = false;\n child.material.opacity = 1;\n child.material.transparent = false;\n } \n\n }\n });\n \n animate();\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1169,"value":"{\n currentAnimate.addEventListener('change', (v) => {\n animate();\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1373,"value":"{\n while (true) {\n renderer.render(scene, camera);\n modelAnimation.mixer?.update(modelAnimation.clock.getDelta());\n yield null;\n } \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1471,"value":"/*\ngraphviz = {\n const path = await require.resolve(\"@hpcc-js/wasm\");\n const hpccWasm = await require(path);\n // Setting wasmFolder is not typically needed ---\n const pathParts = path.split(\"/\");\n pathParts.pop(); \n hpccWasm.wasmFolder(pathParts.join(\"/\"));\n hpccWasm.graphviz.version = hpccWasm.graphvizVersion;\n return hpccWasm.graphviz;\n}\n*/\ngraphviz = GraphvizModule.Graphviz.load();","pinned":false,"hidden":false,"mode":"ojs"},{"id":1473,"value":"// GraphvizModule = import ('@hpcc-js/wasm/dist/graphviz');\n// GraphvizModule = import ('https://unpkg.com/@hpcc-js/wasm/dist/graphviz.js')\nGraphvizModule = import(await FileAttachment(\"graphviz.js\").url())","pinned":false,"hidden":false,"mode":"ojs"},{"id":1481,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1477,"value":"dot = layout(\"dot\");","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}