25:["$","title",null,{"children":"prova 3d 2 b | Paolo Andrenacci | Observable"}] 4c:T520, plane = { const planeSize = 40; const planeGeo = new THREE.PlaneBufferGeometry(planeSize, planeSize); // Load a texture // First we load the texture, set it to repeating, set the filtering to nearest, and set how many times we want it to repeat. // Since the texture is a 2x2 pixel checkerboard, by repeating and setting the repeat to half the size of the plane each check // on the checkerboard will be exactly 1 unit large; const loader = new THREE.TextureLoader(); const texture = loader.load(checkerUrl); texture.wrapS = THREE.RepeatWrapping; texture.wrapT = THREE.RepeatWrapping; texture.magFilter = THREE.NearestFilter; const repeats = planeSize / 2; texture.repeat.set(repeats, repeats); const planeMat = new THREE.MeshPhongMaterial({ map: texture, side: THREE.DoubleSide }); const planeMat2 = new THREE.MeshStandardMaterial({ color: '#FFFFFF'}); // a mesh: the combination of an object (geometry), to be rendered using a material (how it looks), and located at a specific place (here: default position) const mesh = new THREE.Mesh(planeGeo, planeMat2); // Planes default to being in the XY plane but the ground is in the XZ plane so we rotate it. mesh.rotation.x = Math.PI * -.5; mesh.receiveShadow=true; mesh.castShadow=false; return mesh; } 4d:T739,realTimeVideoRecorder = function(canvas) { var div = html`

` $('').text('Real Time Canvas Video Recorder').appendTo(div); var startButton = $('').appendTo(div).css({margin:"0 14px"}).click(onStart); var stopButton = $('').appendTo(div).css({margin:"0 14px"}).hide().click(onStop); var progress = $('progress...').appendTo(div).hide(); var link = $('').appendTo(div).hide(); var recordedChunks = []; var mediaRecorder; var t0; var progressInterval=-1; const now = ()=> new Date().getTime(); function onStart(){ startButton.hide(); stopButton.show(); progress.show(); link.hide(); recordedChunks=[]; var fps = 25; var stream = canvas.captureStream(fps); mediaRecorder = new MediaRecorder(stream, { mimeType: "video/webm; codecs=vp9" }); mediaRecorder.start(); mediaRecorder.ondataavailable = function (event) { //console.log({ondataavailable:event.data}); recordedChunks.push(event.data); }; mediaRecorder.onstop = function (event) { //console.log({onstop:recordedChunks.length}); var blob = new Blob(recordedChunks, { type: "video/webm" }); var url = URL.createObjectURL(blob); link.text("download video").attr('href', url); }; t0=now(); progressInterval = setInterval(function(){ var t=((now()-t0)/1000).toFixed(1); progress.text("time: "+t+" sec"); }, 250); } function onStop(){ startButton.show(); stopButton.hide(); progress.hide(); link.show(); mediaRecorder.stop(); clearInterval(progressInterval); } return div; }4e:[{"id":"6dfbcbde9ad476a9101f9feaf358d1609e917d45f1e4df8c2c269994112166a1478d6caf4a4cd541fb4c4082fde3b2f4c8d84ca6396d4fe38c40af393cdcf79e","href":"https://static.observableusercontent.com/files/6dfbcbde9ad476a9101f9feaf358d1609e917d45f1e4df8c2c269994112166a1478d6caf4a4cd541fb4c4082fde3b2f4c8d84ca6396d4fe38c40af393cdcf79e","name":"checker.png","type":"image/png","lastModified":1673618738659.482,"size":1017}] 48:{"id":"3a419aa2d0c1eb8d","slug":"prova-3d-2-b","title":"prova 3d 2 b","thumbnail":"4af68c529bf3bc14a7218a0c3d189a3b51f681beafd0b9a23b2df4c1ccd5a6a8","access_level":"public","create_time":"$D2023-01-13T14:05:38.659Z","update_time":"$D2023-01-13T15:14:44.047Z","view_time":null,"first_public_time":"$D2023-01-13T14:05:38.659Z","has_unpublished_edits":null,"fork":{"id":"0057bdaaa28cc64e","slug":"prova-3d-2","title":"prova 3d 2","owner":{"id":"3b42508407aca5a3","login":"zawinul","name":"Paolo Andrenacci"}},"stars":0,"starred":false,"owner":{"type":"team","id":"3b42508407aca5a3","login":"zawinul","name":"Paolo Andrenacci","avatar_url":"https://avatars-next.observableusercontent.com/5cf0f05427bb66405cd76829c2ade969967efb177b4ffefd635433c153ce8f46","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":415,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"ed8740f4700202b7","login":"zawinul","name":"Paolo Andrenacci","avatar_url":"https://avatars-next.observableusercontent.com/5cf0f05427bb66405cd76829c2ade969967efb177b4ffefd635433c153ce8f46","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"ed8740f4700202b7","login":"zawinul","name":"Paolo Andrenacci","avatar_url":"https://avatars-next.observableusercontent.com/5cf0f05427bb66405cd76829c2ade969967efb177b4ffefd635433c153ce8f46","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"prova 3d 2 b","cells":[{"id":0,"value":"# prova 3d 2 b","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"{\n const div = html`

`;\n function renderFun(time) {\n render(time);\n requestAnimationFrame(renderFun);\n }\n div.append(canvas);\n requestAnimationFrame(renderFun);\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":343,"value":"realTimeVideoRecorder(canvas)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"canvasDimension=[412,916]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"camera = {\n const fov = 45;\n const aspect = 2; // the canvas default\n const near = 0.1;\n const far = 100;\n const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);\n camera.position.set(0, 10, 20);\n return camera;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":" controls = { \n // OrbitControls let the user spin or orbit the camera around some point\n const controls = new OrbitControls(camera, canvas);\n controls.target.set(0, 5, 0);\n controls.update();\n return controls;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"scene = {\n let scene = new THREE.Scene();\n scene.add(plane);\n\n addRandCubes(scene, 32, 10, 3, 3.5);\n scene.add(whiteLight);\n return scene;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"planesize=1\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"function addRandCubes(scene, nPerLato, spacePerc, minHeight,maxHeight) {\n for(let i=0;i`;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"renderer = {\n let renderer = new THREE.WebGLRenderer({ canvas });\n renderer.shadowMap.enabled = true;\n renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap\n return renderer;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":" function resizeRendererToDisplaySize(renderer) {\n const canvas = renderer.domElement;\n const pixelRatio = window.devicePixelRatio;\n const width = (canvas.clientWidth * pixelRatio) | 0;\n const height = (canvas.clientHeight * pixelRatio) | 0;\n const needResize = canvas.width !== width || canvas.height !== height;\n if (needResize) {\n renderer.setSize(width, height, false);\n }\n return needResize;\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"function camerapos(time) {\n const alpha = .00003;\n const rtime = 200;\n const dump = .005;\n camerapos.status = camerapos.status || {x:0,y:3,z:0,tx:0,ty:3,tz:0,dx:0,dy:0,dz:0};\n let {x,y,z,tx,ty,tz,dx,dy,dz} = camerapos.status;\n if (Math.random()*rtime<1) {\n tx = Math.random()*.73;\n ty = 3;\n tz = Math.random()*.73;\n }\n dx = dx * (1-dump) +(tx-x)*alpha;\n dy = dy * (1-dump) +(ty-y)*alpha;\n dz = dz * (1-dump) +(tz-z)*alpha;\n x+=dx;\n y+=dy;\n z+=dz;\n camerapos.status = {x,y,z,tx,ty,tz,dx,dy,dz};\n console.log(camerapos.status);\n return camerapos.status;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"function animate(time) {\n // console.log('animate '+time);\n let cp = camerapos(time);\n camera.position.set(cp.x, cp.y, cp.z);\n //controls.target.set(cp.x+cp.dx, cp.y+cp.dy, cp.z+cp.dz);\n controls.target.set(cp.x+cp.dx, cp.y+cp.dy-.001, cp.z+cp.dz);\n //controls.target.set(0,0,0);\n\n controls.update();\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":" function render(time) {\n time *= 0.001; // convert time to seconds\n animate(time);\n // Resize\n if (resizeRendererToDisplaySize(renderer)) {\n const canvas = renderer.domElement;\n camera.aspect = canvas.clientWidth / canvas.clientHeight;\n camera.updateProjectionMatrix();\n }\n // console.log('render '+time);\n renderer.render(scene, camera);\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"THREE = await require(\"three@0.121.1/build/three.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"rndcolor = ()=>`#${Math.floor(Math.random()*16777215).toString(16)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"OrbitControls = import('https://unpkg.com/three@0.121.1/examples/jsm/controls/OrbitControls.js').then(\n a => a.OrbitControls\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"checkerUrl = await FileAttachment(\"checker.png\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":336,"value":"import { jQuery as $ } from \"@ddspog/useful-libs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":334,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4e","stdlib":"1"}} 24:null