2a:Tb7b,{ let dom = html`

` yield dom; const thingy = document.getElementById("thingy") console.log(thingy) const idleScale = parseFloat(thingy.getAttribute("scale")) console.log(idleScale) let rotateSpeed = 0 let scaleAnimation let colorAnimation let speedAnimation thingy.tick = (dt) => { console.log("tick") if (rotateSpeed > 0) { thingy.object.rotateX(rotateSpeed * 0.8 * dt) thingy.object.rotateY(rotateSpeed * 0.4 * dt) thingy.object.rotateZ(rotateSpeed * dt) thingy.game.requestFrame() } } const stopAnimations = () => { scaleAnimation && scaleAnimation.stop() colorAnimation && colorAnimation.stop() speedAnimation && speedAnimation.stop() } thingy.addEventListener("pointerenter", () => { stopAnimations() console.log("pointer enter") speedAnimation = popmotion.animate({ from: rotateSpeed, to: 2, duration: 1000, onUpdate: (v) => (rotateSpeed = v) }) scaleAnimation = popmotion.animate({ from: thingy.object.scale.x, to: idleScale * 1.5, onUpdate: (v) => { thingy.object.scale.setScalar(v) } }) colorAnimation = popmotion.animate({ from: thingy.object.material.color.getStyle(), to: "#fff", onUpdate: (v) => { thingy.object.material.color.setStyle(v) } }) }) thingy.addEventListener("pointerleave", () => { stopAnimations() console.log("pointerleave") speedAnimation = popmotion.animate({ from: rotateSpeed, to: 0, duration: 500, onUpdate: (v) => (rotateSpeed = v) }) scaleAnimation = popmotion.animate({ from: thingy.object.scale.x, to: idleScale, onUpdate: (v) => { thingy.object.scale.setScalar(v) } }) colorAnimation = popmotion.animate({ from: thingy.object.material.color.getStyle(), to: "#666", onUpdate: (v) => { thingy.object.material.color.setStyle(v) } }) }) }2b:[] 29:{"title":"Hello, three-elements + popmotion","cells":[{"id":0,"value":"md`# Hello, three-elements + popmotion`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"html`three-elements , popmotion.io -- Inspired by the three-elements example here.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"$2a","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"html`

Codes

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"import('https://unpkg.com/three-elements@0.3.0/dist/index.esm.js?module')","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"popmotion = require('popmotion@9.1.0/dist/popmotion.min.js')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W2b","stdlib":"1","titling":"auto"}