2f:Tffff,md`# Three.js Basics ${(navigator.userAgent.match('HeadlessChrome')) ? html`

{ return new THREE.BoxGeometry( 0.2, d.value, 0.2 ) }) const materials = data.map(d=>{ return new THREE.MeshBasicMaterial( { color: d.color } ); }) const cubes = geometries.map((geometry,i)=>{ return new THREE.Mesh( geometry, materials[i] ); }) cubes.forEach((cube,i)=>{ const pos = -1+i*0.47; cube.position.setX(pos) cube.position.setY(data[i].value/2-1) scene.add( cube ); }) camera.position.z = 2; var animate = function () { requestAnimationFrame( animate ); cubes.forEach((cube,i)=>{ //cube.rotation.x += 0.01; cube.rotation.y += 0.01; }) renderer.render( scene, camera ); }; animate(); invalidation.then(() => ( renderer.dispose())); const controls = new THREE.OrbitControls(camera, renderer.domElement); invalidation.then(() => (controls.dispose(), renderer.dispose())); yield renderer.domElement }32:T533,{ restartScenesLineChallenge; { var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 48, 1, 0.6, 1000 ); var renderer = new THREE.WebGLRenderer(); renderer.setSize( 300, 300 ); camera.position.set(0,0,100); camera.lookAt(new THREE.Vector3(0,0,0)) var material = new THREE.LineBasicMaterial( { color: 'pink' } ); var lines = []; var total = 500; for(var i=0;i{ line.rotation.x += 0.01; line.rotation.y += 0.01; line.rotation.z += 0.01; }); renderer.render( scene, camera ); }; animate(); yield renderer.domElement } }33:T465,{ restartScenesLineChallengeDataviz; { var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 48, 1, 0.6, 1000 ); var renderer = new THREE.WebGLRenderer(); renderer.setSize( 300, 300 ); camera.position.set(0,0,100); camera.lookAt(new THREE.Vector3(0,0,0)) var material = new THREE.LineBasicMaterial( { color: 'pink' } ); var lines = []; var total = 500; var geometry = new THREE.Geometry( 1, 1, 1 ); data.forEach((point,i)=>{ geometry.vertices.push(new THREE.Vector3( i*10-20, point.value * 10-10, 0) ); }) var line = new THREE.Line( geometry, material ); lines.push(line); scene.add( line ); camera.position.z = 52; var animate = function () { requestAnimationFrame( animate ); line.rotation.y += 0.001; renderer.render( scene, camera ); }; animate(); const controls = new THREE.OrbitControls(camera, renderer.domElement); invalidation.then(() => (controls.dispose(), renderer.dispose())); yield renderer.domElement } }34:T456,{ restartScenesText; { var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 45, 1, 0.6, 1000 ); var renderer = new THREE.WebGLRenderer(); renderer.setSize( 300, 300 ); camera.position.set(0,0,100); var loader = new THREE.FontLoader(); loader.load('https://threejs.org/examples/fonts/helvetiker_regular.typeface.json',function (font){ var message = "Hello three!"; var matLite = new THREE.MeshBasicMaterial({ color:'blue', transparent:true, opacity:0.8, side:THREE.DoubleSide }) var shapes = font.generateShapes(message,20); var geometry = new THREE.ShapeBufferGeometry(shapes) .translate( -70, 0, 0 ); var text = new THREE.Mesh( geometry, matLite ); text.position.z = -150; scene.add( text ); animate(); }); camera.position.z = 40; var animate = function () { requestAnimationFrame( animate ); renderer.render( scene, camera ); }; yield renderer.domElement } }35:T69e,{ restartScenesTextChallenge; { var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 45, 1, 0.6, 1000 ); var renderer = new THREE.WebGLRenderer(); renderer.setSize( 300, 300 ); camera.position.set(0,0,100); var loader = new THREE.FontLoader(); var message = "hello world, how are things going? "; var texts = []; loader.load('https://threejs.org/examples/fonts/helvetiker_regular.typeface.json',function (font){ var total = message.length; for(var i=0;i{ text.rotation.x += 0.01; text.rotation.y += 0.01; text.rotation.z += 0.01; }); renderer.render( scene, camera ); }; yield renderer.domElement } }36:T851,{ restartScenesTextChallengeDataviz; var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 65, 1, 0.6, 1000 ); var renderer = new THREE.WebGLRenderer(); renderer.setSize( 300, 300 ); const geometries = data.map(d=>{ return new THREE.BoxGeometry( 0.2, d.value, 0.2 ) }) const materials = data.map(d=>{ return new THREE.MeshBasicMaterial( { color: d.color } ); }) const cubes = geometries.map((geometry,i)=>{ return new THREE.Mesh( geometry, materials[i] ); }) cubes.forEach((cube,i)=>{ const pos = -1+i*0.47; cube.position.setX(pos) cube.position.setY(data[i].value/2-0.84) scene.add( cube ); }) camera.position.z = 2; var animate = function () { requestAnimationFrame( animate ); cubes.forEach((cube,i)=>{ //cube.rotation.x += 0.01; cube.rotation.y += 0.01; }) renderer.render( scene, camera ); }; var loader = new THREE.FontLoader(); loader.load('https://threejs.org/examples/fonts/helvetiker_regular.typeface.json',function (font){ var message = "Hello three!"; var matLite = new THREE.MeshBasicMaterial({ color:'blue', transparent:true, opacity:0.8, side:THREE.DoubleSide }) const textGeometries = data.map(d=>{ return new THREE.TextGeometry( d.id, { font: font, size: 0.08, height: 0.005, }); }) const texts = textGeometries.map(textGeometry=>{ return new THREE.Mesh( textGeometry, matLite ); }) texts.forEach((text,i)=>{ scene.add( text ); text.position.y=-1; text.position.x = -1.1+i*0.47; }) // text.position.z = -150; animate(); }); const controls = new THREE.OrbitControls(camera, renderer.domElement); invalidation.then(() => (controls.dispose(), renderer.dispose())); yield renderer.domElement }37:T7f8,ImportedObjectResult = { var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(45, 1, 0.6, 1000); var gltfUrl = "https://raw.githubusercontent.com/mrdoob/three.js/dev/examples/models/gltf/DamagedHelmet/glTF/DamagedHelmet.gltf"; var renderer = new THREE.WebGLRenderer(); renderer.setSize(540, 430); const controls = new THREE.OrbitControls(camera, renderer.domElement); controls.addEventListener("change", () => renderer.render(scene, camera)); invalidation.then(() => (controls.dispose(), renderer.dispose())); var loader = new THREE.FontLoader(); loader.load( "https://threejs.org/examples/fonts/helvetiker_regular.typeface.json", function (font) { var message = "@izzyz"; var matLite = new THREE.MeshBasicMaterial({ color: "red", transparent: true, opacity: 0.8, side: THREE.DoubleSide }); var shapes = font.generateShapes(message, 20); var geometry = new THREE.ShapeBufferGeometry(shapes).translate(-70, 0, 0); var text = new THREE.Mesh(geometry, matLite); text.position.z = -150; scene.add(text); animate(); } ); camera.position.z = 2; // envmap var path = "https://raw.githubusercontent.com/mrdoob/three.js/dev/examples/textures/cube/Bridge2/"; var format = ".jpg"; var envMap = new THREE.CubeTextureLoader().load([ path + "posx" + format, path + "negx" + format, path + "posy" + format, path + "negy" + format, path + "posz" + format, path + "negz" + format ]); var loader = new THREE.GLTFLoader(); loader.load(gltfUrl, function (gltf) { gltf.scene.traverse(function (child) { if (child.isMesh) { child.material.envMap = envMap; } }); scene.add(gltf.scene); animate(); }); var animate = function () { requestAnimationFrame(animate); scene.rotation.z -= 0.003; scene.rotation.x -= 0.003; scene.rotation.y -= 0.003; renderer.render(scene, camera); }; yield renderer.domElement; }38:[{"id":"2ad152f8901ba5c8b986d262c20ff99490ff1439889db8dd479d39d29ee84eb00a97876b79347b1e382179c2d6f5daee6638ce0e3023eea817bc719b3758b53d","href":"https://static.observableusercontent.com/files/2ad152f8901ba5c8b986d262c20ff99490ff1439889db8dd479d39d29ee84eb00a97876b79347b1e382179c2d6f5daee6638ce0e3023eea817bc719b3758b53d","name":"scene.gltf","type":"model/gltf+json","lastModified":1669648628779.478,"size":6474}] 2d:{"title":"Three.js Basics","cells":[{"id":0,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"md`\n

\nFollowing [official three.js introduction](https://threejs.org/docs/#manual/introduction/Creating-a-scene)...\n\nEach code block is independent, so easily extractable and modifyable. Just keep in mind, that you'll need to remove first line (button code)\n\nAlso keep in mind that, chrome tries to optimize rendering on the page, so output is not generated:\n* when you switch tabs and come back later \n* When you spent too much time on the one part of the page\n\nIn this case, just click \"\\`\\`\\`restart scene\\`\\`\\`\"\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":857,"value":"md`Allongside the tutorial, I also do personal and dataviz challenges, for that, I'll use same data across all challenges`","pinned":false,"hidden":false,"mode":"ojs"},{"id":859,"value":"data = [\n {id:\"BRA\",color:'red',value:2},\n {id:\"MOZ\",color:'green',value:0.8},\n {id:\"DEU\",color:'yellow',value:1.2},\n {id:\"GEO\",color:'green',value:0.8},\n {id:\"CHN\",color:'red',value:2}\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"md`##

Creating Scene

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":798,"value":"viewof restartScenesCube = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"{ restartScenesCube;\n var scene = new THREE.Scene();\n\t\t\tvar camera = new THREE.PerspectiveCamera( 65, 1, 0.6, 1000 );\n\n\t\t\tvar renderer = new THREE.WebGLRenderer();\n\t\t\trenderer.setSize( 300, 300 );\n\n\n\t\t\tvar geometry = new THREE.BoxGeometry( 1, 1, 1 );\n\t\t\tvar material = new THREE.MeshBasicMaterial( { color: 'green' } );\n\t\t\tvar cube = new THREE.Mesh( geometry, material );\n\t\t\tscene.add( cube );\n\n\t\t\tcamera.position.z = 2;\n\n\t\t\tvar animate = function () {\n\t\t\t\trequestAnimationFrame( animate );\n\n\t\t\t\tcube.rotation.x += 0.01;\n\t\t\t\tcube.rotation.y += 0.01;\n\n\t\t\t\trenderer.render( scene, camera );\n\t\t\t};\n\n\t\t\tanimate();\n \n yield renderer.domElement\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":96,"value":"md`#### personal challenge - create second blue cube, which volume will be 8 times smaller and reposition to the right`","pinned":false,"hidden":false,"mode":"ojs"},{"id":816,"value":"viewof restartScenesCubeChallenge = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":647,"value":"md`#### data viz challenge - create bar chart and add controls`","pinned":false,"hidden":false,"mode":"ojs"},{"id":813,"value":"viewof restartScenesCubeDataviz = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":751,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"\nmd`##

Drawing a lines

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":841,"value":"viewof restartScenesLineDefault = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"{ \n restartScenesLineDefault;\n \n {\n var scene = new THREE.Scene();\n\t\t\tvar camera = new THREE.PerspectiveCamera( 48, 1, 0.6, 1000 );\n\n\t\t\tvar renderer = new THREE.WebGLRenderer();\n\t\t\trenderer.setSize( 300, 300 );\n\n camera.position.set(0,0,100);\n camera.lookAt(new THREE.Vector3(0,0,0))\n\n\t\t\tvar geometry = new THREE.Geometry( 1, 1, 1 );\n geometry.vertices.push(new THREE.Vector3( -10, 0, 0) );\n geometry.vertices.push(new THREE.Vector3( 0, 10, 0) );\n geometry.vertices.push(new THREE.Vector3( 10, 0, 0) );\n //geometry.vertices.push(new THREE.Vector3( -10, 0, 0) );\n \n\t\t\tvar material = new THREE.LineBasicMaterial( { color: 'blue' } );\n\t\t\tvar line = new THREE.Line( geometry, material );\n\t\t\tscene.add( line );\n\n\t\t\tcamera.position.z = 52;\n\n\t\t\tvar animate = function () {\n\t\t\t\trequestAnimationFrame( animate );\n\n\t\t\t\t//line.rotation.x += 0.01;\n\t\t\t\tline.rotation.y += 0.01;\n\n\t\t\t\trenderer.render( scene, camera );\n\t\t\t};\n\n\t\t\tanimate();\n \n yield renderer.domElement\n}\n \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":159,"value":"md`#### personal challenge - create large amount of lines, so that, together, they will form pink conus`","pinned":false,"hidden":false,"mode":"ojs"},{"id":845,"value":"viewof restartScenesLineChallenge = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":162,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":651,"value":"md`#### data viz challenge - line chart and add controls`","pinned":false,"hidden":false,"mode":"ojs"},{"id":884,"value":"viewof restartScenesLineChallengeDataviz = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":887,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":82,"value":"\nmd`##

Creating texts

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":974,"value":"viewof restartScenesText = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":79,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":383,"value":"md`#### personal challenge - allign text on circular path, make them green , smaller and rotatable `","pinned":false,"hidden":false,"mode":"ojs"},{"id":971,"value":"viewof restartScenesTextChallenge = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":387,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":655,"value":"md`#### data viz challenge - add texts to the each bar`","pinned":false,"hidden":false,"mode":"ojs"},{"id":967,"value":"viewof restartScenesTextChallengeDataviz = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":923,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":448,"value":"\nmd`##

Loading 3D Models

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":453,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":988,"value":"astro = FileAttachment(\"scene.gltf\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":990,"value":"astroFile = astro.url()","pinned":true,"hidden":false,"mode":"ojs"},{"id":607,"value":"md`#### personal challenge - load hand gltf and add hand controls (drag,zoom) `","pinned":false,"hidden":false,"mode":"ojs"},{"id":977,"value":"md`#### dataviz challenge - load POI building gltf , add two label and make simple interactive presentation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":984,"value":"md`https://sketchfab.com/3d-models/notre-dame-de-paris-6bf04e8c75f141b5a391e2a43fc2f6d8`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":471,"value":"GLTFLoader = requireFromGithub('https://gist.githubusercontent.com/bumbeishvili/56e34b4f943392e4fcc474c7d8a3c040/raw/061cca62e27276388de245d5e6bbd36d71506375/gltfloader.js','GLTFLoader')\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":465,"value":"import { requireFromGithub } from '@bumbeishvili/fetcher'","pinned":true,"hidden":false,"mode":"ojs"},{"id":738,"value":"window.THREE","pinned":false,"hidden":false,"mode":"ojs"},{"id":700,"value":"THREE = {\n GLTFLoader;\n const THREE = window.THREE = await require(\"three@0.99.0/build/three.min.js\");\n await require(\"three@0.99.0/examples/js/controls/OrbitControls.js\").catch(() => {});\n THREE.GLTFLoader = GLTFLoader(THREE)\n return window.THREE;\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W38","stdlib":"1","titling":"auto"}