29:null 2a:["$","title",null,{"children":"3D zoetrope: Penguins walk | Christophe Yamahata | Observable"}] 2f:T4fc,

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*.

Below, the GLB model features walking penguins designed by Gavin Shapiro. Based on his original STL file, I created an animated version of his 3D zoetrope. If you would like to find out more about how this animated model was created, you can check this model available on Sketchfab (model embedded in this notebook).

Downloads:

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

30:T4e9,

3D zoetrope: Penguins walk by C. Yamahata on Sketchfab

31:[{"id":"b02af834e98becbed4c23e04602a3450c57e8ecda05d8c06ed8ff431185fe8499b4919b858b36ac7046a7e8a931a5bb97a3fc7d5adf4c9969de68c5e924730f5","href":"https://static.observableusercontent.com/files/b02af834e98becbed4c23e04602a3450c57e8ecda05d8c06ed8ff431185fe8499b4919b858b36ac7046a7e8a931a5bb97a3fc7d5adf4c9969de68c5e924730f5","name":"Penguins.blend","type":"application/x-blender","lastModified":1709482092697.161,"size":22516724},{"id":"1f951f05307ade15a54d4f9996f7fcffdda75787f956a22c454fee546d5dd8f222792d103af34a492d8a82aaf9861defd4d51ef9f4b99884ff15d139c76d257e","href":"https://static.observableusercontent.com/files/1f951f05307ade15a54d4f9996f7fcffdda75787f956a22c454fee546d5dd8f222792d103af34a492d8a82aaf9861defd4d51ef9f4b99884ff15d139c76d257e","name":"zoetrope_penguins_walk.glb","type":"model/gltf-binary","lastModified":1709482878598.94,"size":20853292}] 2d:{"id":"d41d25c171cd7737","slug":"3d-zoetrope-penguins-walk","title":"3D zoetrope: Penguins walk","thumbnail":"9e9913bda4f1f329e168fdddb9c67d34757236048637f10f8a7d46e5a6d79af8","access_level":"public","create_time":"$D2024-03-03T11:11:02.348Z","update_time":"$D2024-03-03T16:50:05.669Z","view_time":null,"first_public_time":"$D2024-03-03T16:12:41.153Z","has_unpublished_edits":null,"fork":{"id":"ca982cc2875f0f82","slug":"embedding-3d-models-using-three-js","title":"Embedding 3D models using three.js","owner":{"id":"dd67891d326bcfb1","login":"christophe-yamahata","name":"Christophe Yamahata"}},"stars":1,"starred":false,"owner":{"type":"team","id":"dd67891d326bcfb1","login":"christophe-yamahata","name":"Christophe Yamahata","avatar_url":"https://avatars-next.observableusercontent.com/8256ac716aa8395babba412b2835913d186874fa4190df57a4a28f2e60129876","tier":"starter_2024"},"version":1821,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"06f083eba60f5a76","login":"christophe-yamahata","name":"Christophe Yamahata","avatar_url":"https://avatars-next.observableusercontent.com/8256ac716aa8395babba412b2835913d186874fa4190df57a4a28f2e60129876","tier":null}],"members":[{"type":"individual","id":"06f083eba60f5a76","login":"christophe-yamahata","name":"Christophe Yamahata","avatar_url":"https://avatars-next.observableusercontent.com/8256ac716aa8395babba412b2835913d186874fa4190df57a4a28f2e60129876","tier":null,"role":"editor"},{"type":"team","id":"dd67891d326bcfb1","login":"christophe-yamahata","name":"Christophe Yamahata","avatar_url":"https://avatars-next.observableusercontent.com/8256ac716aa8395babba412b2835913d186874fa4190df57a4a28f2e60129876","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"0e48f0602412f50d","slug":"3d-three-js","title":"3D (three.js, Sketchfab)","owner":{"id":"dd67891d326bcfb1","login":"christophe-yamahata","name":"Christophe Yamahata"}},"type":"notebook","body":{"title":"3D zoetrope: Penguins walk","cells":[{"id":0,"value":"# 3D zoetrope: Penguins walk\n## **(GLB model embedded using three.js)**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":929,"value":"$2f","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":624,"value":"renderer.domElement","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":631,"value":"currentAnimate = Inputs.select(['Animation', 'No animation'],\n {value: \"KeyAction\", \n label: \"Play mode\", \n format: (name) => { if(name == `Animation`) {return ` Animated model`} \n else if(name == `No animation`) { return ` Static`} else { return `${name}`}} \n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1309,"value":"viewof Object_color = Inputs.color({label: \"Object color\", value: \"#b8ddf9\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":908,"value":"viewof BKG_color = Inputs.color({label: \"Background color\", value: \"#040e1b\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":918,"value":"viewof Grid_color = Inputs.color({label: \"Grid color\", value: \"#434c70\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1454,"value":"viewof Wireframe = Inputs.toggle({label: \"Geomoetry as wireframe\", value: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":946,"value":"viewof Display_grid = Inputs.toggle({label: \"Grid display\", value: false})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1816,"value":"
","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":896,"value":"$30","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1631,"value":"
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1634,"value":"
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":888,"value":"\n## Appendices","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":720,"value":"The_3D_Model = await (FileAttachment(\"zoetrope_penguins_walk.glb\").url())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1763,"value":"Blender_model = await (FileAttachment(\"Penguins.blend\").url())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":942,"value":"Axis_color = Grid_color","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1328,"value":"Model_color = Object_color.replace(\"#\",\"0x\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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(100, 100, 100);\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\n if(Display_grid) { \n scene.add(gridHelper);\n }\n return scene;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"// create camera\ncamera = {\n const fov = 35;\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(200, 80, 30);\n camera.lookAt(scene.position);\n\n return camera;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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 The_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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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.5;\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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1169,"value":"{\n currentAnimate.addEventListener('change', (v) => {\n animate();\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1373,"value":"{\n while (true) {\n renderer.render(scene, camera);\n modelAnimation.mixer?.update(modelAnimation.clock.getDelta());\n yield null;\n } \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2e:"$2d:body"