25:["$","title",null,{"children":"prova 3d | 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":1672079655922.066,"size":1017}] 48:{"id":"b0644c89079e3936","slug":"prova-3d","title":"prova 3d","thumbnail":"1c5a48b0afb04eb8c4f87114771a2ea12c8f1c4a08a4cb4572ba6d40e4fc45df","access_level":"public","create_time":"$D2022-12-26T18:17:36.713Z","update_time":"$D2023-01-03T22:50:54.363Z","view_time":null,"first_public_time":"$D2022-12-26T18:17:36.713Z","has_unpublished_edits":null,"fork":false,"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":352,"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":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"prova 3d","cells":[{"id":0,"value":"# prova 3d","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 requestAnimationFrame(render);\n div.append(canvas);\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 //scene.add(cube);\n scene.add(sphere);\n\n // for(var i=0; i<300; i++)\n // scene.add(rndCube());\n\n addRandCubes(scene, 12, 40, 3, 10);\n //scene.add(light);\n //scene.add(light2);\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":59,"value":"cube = {\n const cubeSize = 4;\n const cubeGeo = new THREE.BoxBufferGeometry(cubeSize, cubeSize, cubeSize);\n const cubeMat = new THREE.MeshPhongMaterial({ color: '#8AC' });\n const mesh = new THREE.Mesh(cubeGeo, cubeMat);\n mesh.position.set(cubeSize + 1, cubeSize / 2, 0);\n return mesh;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"planesize=70\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"function rndCube() {\n const cubeSize = 2;\n const cubeGeo = new THREE.BoxBufferGeometry(cubeSize, cubeSize*(1+Math.random()), cubeSize);\n //const cubeMat = new THREE.MeshPhongMaterial({ color: '#8AC' });\n const cubeMat = new THREE.MeshPhongMaterial({ color: rndcolor() });\n const mesh = new THREE.Mesh(cubeGeo, cubeMat);\n mesh.position.set((Math.random()*2-1)*planesize, 0, (Math.random()*2-1)*planesize);\n return mesh;\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 let x= Math.sin(time*.14+.456754)*planesize*.35;\n let z= Math.cos(time*.1321+.456754)*planesize*.35;\n //let y= Math.sin(time*.5+1.456754)*.1+4;\n let y= 4;\n return [x,y,z];\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 cube.position.set(5, 2, 10*Math.sin(time*2));\n light.position.set(Math.cos(time*.2), 0, Math.sin(time*.2));\n light2.position.set(-Math.cos(time*.2), 0, -Math.sin(time*.2));\n //light.intensity=Math.cos(time*11)*.25+.75;\n //light2.intensity=Math.cos(time*9.6)*.25+.75;\n let cp = camerapos(time*.1);\n let cpt = camerapos(time*.1+.001);\n \n // camera.position.set(20*Math.sin(time*.3), 3,20*Math.cos(time*.23));\n // controls.target.set(0, 5, 0);\n\n camera.position.set(cp[0], 6, cp[2]);\n //controls.target.set(cpt[0], cpt[1]-.003, cpt[2]);\n controls.target.set(0,2,0);\n\n cp = camerapos(time*1.3);\n whiteLight.position.set(cp[0], 8, cp[2]);\n cp = camerapos(-time*1.6);\n whiteLight.target.position.set(cp[0],7,cp[2]);\n //whiteLight.intensity = Math.sin(time*5)*.4+.6;\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\n requestAnimationFrame(render);\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