2a:[{"id":"1f5a87a11fbc2059d7090d3d805cd76e749e8904c901043dca016ee12cf8df034c9a9a5c92d6b9f6980b8febc241fa2ffd88266c845f63426f2e8496fceac1bd","href":"https://static.observableusercontent.com/files/1f5a87a11fbc2059d7090d3d805cd76e749e8904c901043dca016ee12cf8df034c9a9a5c92d6b9f6980b8febc241fa2ffd88266c845f63426f2e8496fceac1bd","name":"mouth_200611_goldd.BMP","type":"image/bmp","lastModified":1592946512859.962,"size":12582966},{"id":"4be52e0bb7622600cea0430a54ca74cd608fa42e4f8166a30caee78b94650427b18faea5fc2efc7797c05558f207fab81179ad5766e1e360fe314bde88dfc158","href":"https://static.observableusercontent.com/files/4be52e0bb7622600cea0430a54ca74cd608fa42e4f8166a30caee78b94650427b18faea5fc2efc7797c05558f207fab81179ad5766e1e360fe314bde88dfc158","name":"mouth_200611_goldd.OBJ","type":"application/octet-stream","lastModified":1592932127511.286,"size":2607440}] 29:{"title":"three.js | Camera animation","cells":[{"id":0,"value":"md`# three.js | Camera animation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":162,"value":"md`\n- Model originally from: Valerie Chen\n- HemisphereLight, DirectionalLight\n- TWEEN library for camera animation\n- I've created a virtual camera rig using THREE.Group() and the camera is attached to the rig\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":274,"value":"{\n const button = html``\n button.onclick = () => { \n let rotateTo = Math.PI * Math.random() * .3;\n moveTo(0,0,3,rotateTo,0,0) \n }\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":369,"value":"{\n const button = html``\n button.onclick = () => { \n let rotateTo = Math.PI * Math.random() * .6;\n moveTo(0,0,2.2,0,rotateTo,0) \n }\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":406,"value":"{\n const button = html``\n button.onclick = () => { \n let rotateTo = -Math.PI * Math.random() * .1;\n moveTo(0,0,1.5,rotateTo,0,0) \n }\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"{\n // const controls = new THREE.OrbitControls(camera, renderer.domElement);\n // controls.addEventListener(\"change\", () => renderer.render(scene, camera));\n while (true) {\n TWEEN.update();\n renderer.render(scene, camera);\n yield renderer.domElement;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"renderer = {\n const renderer = new THREE.WebGLRenderer({antialias: true});\n renderer.setSize(width, height);\n renderer.setPixelRatio(devicePixelRatio);\n renderer.setClearColor(0xffffff);\n return renderer;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"scene = {\n const scene = new THREE.Scene();\n const axesHelper = new THREE.AxesHelper(1);\n scene.add(model);\n // scene.add(axesHelper);\n scene.add(lights);\n scene.add(cameraZRotation);\n \n return scene;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":104,"value":"lights = {\n let group = new THREE.Group();\n let hlight = new THREE.HemisphereLight(0xffffff, 0x888888);\n let dlight = new THREE.DirectionalLight( 0xffffff, 0.56 );\n\t dlight.position.set( 3, 3, 3 ).normalize();\n let dlight2 = new THREE.DirectionalLight( 0xffffff, 0.56 )\n\t dlight2.position.set( -2, -2, -2 ).normalize();\n group.add( hlight, dlight, dlight2 );\n \n return group;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":239,"value":"html `

Camera setup

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":261,"value":"function moveTo(xPos, yPos, zPos, xRot, yRot, zRot) {\n moveXPos(xPos);\n moveYPos(yPos);\n moveZPos(zPos);\n moveXRot(xRot);\n moveYRot(yRot);\n moveZRot(zRot);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":304,"value":"function moveXRot(to) { \t\n\t\tlet pos = { val: cameraXRotation.rotation.x }; // current position\n\t\tlet tween = new TWEEN.Tween( pos )\n\t\t\t\t.to( { val: to } , tweenTime)\n\t\t\t\t.easing(tweenType)\n\t\t\t\t.onUpdate(() => cameraXRotation.rotation.x = pos.val)\n\t\t\t\t.delay( delayTime )\n\t\t\t\t.start();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":303,"value":"function moveYRot(to) { \t\n\t\tlet pos = { val: cameraYRotation.rotation.y }; // current position\n\t\tlet tween = new TWEEN.Tween( pos )\n\t\t\t\t.to( { val: to } , tweenTime)\n\t\t\t\t.easing(tweenType)\n\t\t\t\t.onUpdate(() => cameraYRotation.rotation.y = pos.val)\n\t\t\t\t.delay( delayTime )\n\t\t\t\t.start();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":301,"value":"function moveZRot(to) { \t\n\t\tlet pos = { val: cameraZRotation.rotation.z }; // current position\n\t\tlet tween = new TWEEN.Tween( pos )\n\t\t\t\t.to( { val: to } , tweenTime)\n\t\t\t\t.easing(tweenType)\n\t\t\t\t.onUpdate(() => cameraZRotation.rotation.z = pos.val)\n\t\t\t\t.delay( delayTime )\n\t\t\t\t.start();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":297,"value":"function moveXPos(to) { \t\n\t\tlet pos = { val: cameraXPosition.position.x }; // current position\n\t\tlet tween = new TWEEN.Tween( pos )\n\t\t\t\t.to( { val: to } , tweenTime)\n\t\t\t\t.easing(tweenType)\n\t\t\t\t.onUpdate(() => cameraXPosition.position.x = pos.val)\n\t\t\t\t.delay( delayTime )\n\t\t\t\t.start();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":286,"value":"function moveYPos(to) { \t\n\t\tlet pos = { val: cameraYPosition.position.y }; // current position\n\t\tlet tween = new TWEEN.Tween( pos )\n\t\t\t\t.to( { val: to } , tweenTime)\n\t\t\t\t.easing(tweenType)\n\t\t\t\t.onUpdate(() => cameraYPosition.position.y = pos.val)\n\t\t\t\t.delay( delayTime )\n\t\t\t\t.start();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":272,"value":"function moveZPos(to) { \t\n\t\tlet pos = { val: cameraZPosition.position.z }; // current position\n\t\tlet tween = new TWEEN.Tween( pos )\n\t\t\t\t.to( { val: to } , tweenTime)\n\t\t\t\t.easing(tweenType)\n\t\t\t\t.onUpdate(() => cameraZPosition.position.z = pos.val)\n\t\t\t\t.delay( delayTime )\n\t\t\t\t.start();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":258,"value":"cameraZRotation = {\n const cameraZRotation = new THREE.Group();\n cameraZRotation.add(cameraXPosition);\n return cameraZRotation;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":255,"value":"cameraXPosition = {\n const cameraXPosition = new THREE.Group();\n cameraXPosition.add(cameraXRotation);\n return cameraXPosition;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":252,"value":"cameraXRotation = {\n const cameraXRotation = new THREE.Group();\n cameraXRotation.add(cameraYPosition);\n return cameraXRotation;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":249,"value":"cameraYPosition = {\n const cameraYPosition = new THREE.Group();\n cameraYPosition.add(cameraYRotation);\n return cameraYPosition;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":247,"value":"cameraYRotation = { \n const cameraYRotation = new THREE.Group();\n cameraYRotation.add(cameraZPosition);\n cameraYRotation.rotation.y = .3;\n return cameraYRotation;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":241,"value":"cameraZPosition = {\n const cameraZPosition = new THREE.Group();\n cameraZPosition.add(camera);\n cameraZPosition.position.z = 3.2;\n return cameraZPosition;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":336,"value":"html `

Basic setup

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"camera = {\n const fov = 50;\n const aspect = width/height;\n const near = 0.01;\n const far = 100;\n const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);\n // camera.position.set(.6, .6, 2.5);\n // camera.lookAt(new THREE.Vector3(0, 0, 0));\n return camera;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"model = {\n const objLoader = new THREE.OBJLoader();\n const blob = await FileAttachment(\"mouth_200611_goldd.OBJ\").blob();\n const url = URL.createObjectURL(blob);\n const mouth = await new Promise(resolve => \n objLoader.load(url, obj => {\n obj.traverse(child => { if(child.isMesh) child.material = standard_material; })\n resolve(obj)\n })\n );\n mouth.position.z = -1; // -1\n return mouth;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"standard_material = {\n // return new THREE.MeshBasicMaterial({ color: 0x2194CE, side: THREE.DoubleSide });\n const img = await FileAttachment(\"mouth_200611_goldd.BMP\").url();\n if(img) {\n return new THREE.MeshPhongMaterial({ \n color: 0x2194CE, \n // map: new THREE.TextureLoader().load(img),\n side: THREE.DoubleSide, \n flatShading: true\n });\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"height = 480","pinned":false,"hidden":false,"mode":"ojs"},{"id":269,"value":"tweenType = TWEEN.Easing.Quadratic.Out; // TWEEN.Easing.Linear.None, TWEEN.Easing.Quadratic.Out","pinned":true,"hidden":false,"mode":"ojs"},{"id":267,"value":"delayTime = 0","pinned":true,"hidden":false,"mode":"ojs"},{"id":266,"value":"tweenTime = 1000","pinned":true,"hidden":false,"mode":"ojs"},{"id":227,"value":"TWEEN = await require('tween.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"THREE = {\n // const THREE = window.THREE = await require('three');\n // await require('three/examples/js/controls/OrbitControls.js').catch(() => {});\n // await require('three/examples/js/loaders/OBJLoader.js').catch(() => {});\n\n const THREE = window.THREE = await require('three@0.105.1/build/three.min.js');\n await require('three@0.105.1/examples/js/controls/OrbitControls.js').catch(() => {});\n await require('three@0.105.1/examples/js/loaders/OBJLoader.js').catch(() => {});\n return THREE;\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W2a","stdlib":"1","titling":"auto"}